본문 바로가기

HTML/CSS문법79

CSS outline-width CSS outline-width outline-width 속성은 아웃라인의 너비를 지정하며 다음 값 중 하나를 가질 수 있다: thin(일반적으로 1인치) medium(일반적으로 3인치) thick(일반적으로 5인치) 특정 크기(px, pt, cm, em 등) CSS outline-width thin p.ex1 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thin; } CSS outline-width를 thin으로 설정한 예제는 아래 표와 같다. outline-width 속성 A thin outline. outline-width를 thin으로 설정한 결과 화면은 아래 그림과 같다. CSS outlin.. 2023. 7. 24.
CSS outline 윤곽선은 요소의 테두리 바깥쪽에 그려진 선이다. 아래 그림에서 초록색이 outline으로 테두리 바깥쪽에 그려지는 선이다. CSS outline 속성 outline은 요소를 "눈에 띄도록" 만들기 위해 요소 주위, 테두리 외부에 그려진 선이다. CSS에는 다음과 같은 outline 속성이 있다: outline-style outline-color outline-width outline-offset outline 참고: outline은 테두리와 다르다! 테두리와 달리 outline은 요소의 테두리 밖에 그려지며 다른 내용과 겹칠 수 있다. 또한 outline은 요소 치수의 일부가 아니며, 요소의 전체 너비와 높이는 윤곽선 너비의 영향을 받지 않는다. CSS outline-style 속성 outline-sty.. 2023. 7. 23.
CSS box model 모든 HTML 요소를 box로 간주할 수 있다. CSS box model CSS에서 "박스 모델(box model)"이라는 용어는 디자인과 레이아웃에 대해 말할 때 사용된다. CSS 박스 모델은 본질적으로 모든 HTML 요소를 감싸는 박스이다. margin, border, padding및 실제 콘텐츠로 구성된다. 아래 이미지는 상자 모델을 보여준다: 서로 다른 부분에 대한 설명: content - 텍스트와 이미지가 나타나는 상자의 내용 padding - 내용 주위의 영역을 지웁니다. 패딩이 투명합니다 border - 패딩과 내용 주위를 도는 테두리입니다 margin - 테두리 밖의 영역을 지웁니다. 마진이 투명합니다 상자 모델을 사용하면 요소 주위에 경계를 추가하고 요소 사이의 공간을 정의할 수 있습니다.. 2023. 7. 22.
CSS height, width, max-width 속성 CSS height 및 width 속성은 요소의 높이 및 너비를 설정하는 데 사용된다. CSS max-width 속성은 요소의 최대 너비를 설정하는 데 사용된다. CSS height, width 설정 height 및 width 속성의 값은 다음과 같습니다: auto - 기본값이다. 브라우저가 높이와 너비를 계산한다 length - 높이/폭을 px, cm 등으로 정의한다. % - 포함 블록의 높이/폭을 백분율로 정의한다 initial - 높이/폭을 기본값으로 설정한다 inherit - 높이/폭이 상위 값에서 상속된다 div { height: 200px; width: 50%; background-color: powderblue; } div에 높이 200px width는 50% 설정한 예제는 아래 코드와 같다.. 2023. 7. 21.