본문 바로가기

CSS Border5

CSS box model 모든 HTML 요소를 box로 간주할 수 있다. CSS box model CSS에서 "박스 모델(box model)"이라는 용어는 디자인과 레이아웃에 대해 말할 때 사용된다. CSS 박스 모델은 본질적으로 모든 HTML 요소를 감싸는 박스이다. margin, border, padding및 실제 콘텐츠로 구성된다. 아래 이미지는 상자 모델을 보여준다: 서로 다른 부분에 대한 설명: content - 텍스트와 이미지가 나타나는 상자의 내용 padding - 내용 주위의 영역을 지웁니다. 패딩이 투명합니다 border - 패딩과 내용 주위를 도는 테두리입니다 margin - 테두리 밖의 영역을 지웁니다. 마진이 투명합니다 상자 모델을 사용하면 요소 주위에 경계를 추가하고 요소 사이의 공간을 정의할 수 있습니다.. 2023. 7. 22.
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.