[Project H4C] 16. CSS 박스 모델

[Project H4C] 16. CSS 박스 모델

 

위 태그를 

htdocs > css > ex_css_2.html 경로에 저장하고 시작해보자.

 

head에 style 태그를 넣고 <li>태그에 빨간색 테두리 넣기 

 

이렇게..!

 

<li>css</li>에만 빨간색 테두리 넣어보자. 

 

<li id="selected">css</li>를 사용하고

head에 li를 #selected로 바꿔주면 된다.

 

 

짠

css의 빨간 테두리와 css글자 사이의 간격을 수정하고 싶다면

padding:30px 을 추가한다.

이렇게

 

javascript글자에 파란색 테두리를 적용하고 싶다면

id="extra"로 정의 후 

border:blue 1px solid;를 추가한다.

 

이렇게 된당!

css와 javascript 박스 사이의 간격을 띄우고 싶다면

margin:50px; 추가한다.

 

-margin: 태그와 태그 사이의 간격

 

이렇게 된다.

 

 

• 박스모델 정리

border: content의 테두리

padding: content와 테두리 사이의 여백

height: content의 높이

width: contect의 폭

margin: 태그와 태그 사이의 간격

 

크롬에서 우클릭 - 검사를 클릭하면

html 요소들을 확인할 수 있다.