본문 바로가기

css 경계선5

CSS 둥근 테두리 CSS 둥근 테두리 border-radius 속성은 요소에 반올림된 테두리를 추가하는 데 사용된다: border-radius 속성 이 속성은 요소에 반올림된 테두리를 추가하는 데 사용됩니다: Normal border Round border Rounder border Roundest border 위의 코드를 실행한 결과 화면은 아래 그림과 같다. 지금까지 CSS border-radius 둥근 테두리 스타일 활용에 관하여 간략히 살펴보았다. 꼭 실습하기를 추천합니다. 모두 화이팅입니다.!!!! 출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다. 2023. 7. 17.
CSS 단축 테두리 속성 CSS border 속성 - 단축 속성 이전 페이지에서 보셨듯이 테두리를 다룰 때 고려해야 할 많은 속성이 있다. 코드를 단축하기 위해 하나의 속성에 모든 개별 테두리 속성을 지정할 수도 있다. 테두리 속성은 다음과 같은 개별 테두리 속성의 단축형 속성이다: border-width border-style(required) border-color 테두리 속성 이 속성은 테두리 너비, 테두리 스타일 및 테두리 색상에 대한 단축 속성입니다. border 단축 속성에 5px, solid, red 를 한번에 스타일을 적용할 수 있다. 테두리 너비, 테두리 스타일, 테두리 색상을 순서대로 설정한다. 아래 그림은 실행 결과 화면이다. 또한 한 면에 대해 모든 개별 테두리 속성을 지정할 수 있다: border-left.. 2023. 7. 16.
CSS 테두리 측면 속성 설정 CSS 테두리 - 개별 측면 이전 페이지의 예를 통해 각 면에 대해 다른 경계를 지정할 수 있음을 알 수 있다. CSS에서는 각 테두리(위, 오른쪽, 아래 및 왼쪽)를 지정하는 속성도 있다: p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } p요소에 위쪽 테두리는 점선, 오른족 테두리는 직선, 아래쪽 테두리는 점선, 왼쪽 테두리는 직선으로 스타일한다. 개별 측면 테두리 2개의 다른 테두리 스타일. border-style : dotted, solid 값을 설정하면, 위쪽, 아래쪽 테두리는 점선, 왼쪽, 오른쪽 테두리는 직선을 스타일한다. 아래 그림은 결과.. 2023. 7. 15.
CSS 테두리 너비(CSS border-width) CSS border-width 속성 border-style 속성은 네 개의 테두리 너비를 지정한다. 너비는 특정 크기(px, pt, cm, em 등)로 설정하거나 미리 정의된 세 가지 값(thin, medium 또는 thick) 중 하나를 사용하여 설정할 수 있습니다: 몇가지 예제를 통해 속성값 등을 이해해보도록 하자. p.one { border-style: solid; border-width: 5px; } border-style은 solid이고 border-width가 5px이다. 이에 대한 결과 화면이다. p.two { border-style: solid; border-width: medium; } border-style은 solid이고 border-width가 medium이다. 이에 대한 결과 화면.. 2023. 7. 14.