목록html블록요소 (1)

지지나

CSS 박스모델, border, padding, margin 이해하기

HTML/CSS 공부에서 박스모델을 잘 이해하는 것이 중요하다. MS사에서 발표한 가장 많이 쓰는 css속성 중 70%를 요 박스모델 관련한 속성이 차지하고 있는 만큼, 이번 기회로 잘 알고가자! 블록 태그인 태그에 h1{border: 5px solid red;}로 5픽셀의 빨간 테두리를 줬다. 지금은 테두리랑 '대파라면'사이에 간격이 아예 없다. 그래서 요렇게 padding을 이용해서 20픽셀만큼 간격을 줬다. '대파라면' 양옆, 위아래에 간격이 보이는 것을 알 수 있다. 즉, 박스모델 안쪽에 여백이 생기는 것이 padding 이다. 여기에 또다른 h1 태그를 하나 더 추가해 보았다. 적용한 css 속성은 당연히 같다^^ 여기서 margin에 대해서 알고 갈 건데 margin: 0; 과 margin: ..
기획자의 프로그래밍 걸음마/HTML, CSS 2020. 7. 14. 10:42
Prev 1 Next