CSS - Display
CSS display 웹 페이지의 레이아웃을 결정하는 속성 block : 새로운 라인에서 시작하고, 해당 라인의 모든 너비를 차지 높이값만큼 한 줄을 가득 채우는 속성을 가지고 있음 (div, header, p, table, h1~h6 등) inline : 새로운 라인에서 시작되지 않고, 앞의 요소에 이어서 배치 width, height 값이 적용x 안의 컨텐츠 내용이 영역을 차지한다. (a, span, img 태그 등) *display inline일 경우 margin, padding top-bottom 이 안 먹는 경우가 있음 대표적으로 span inline-block : block과 inline 속성을 모두 적용 width, height 적용 line-height 적용된 상태에서 가로로 나열 no..
2022. 12. 29.
CSS - 박스 모델(테두리, padding, margin, box-sizing)
박스모델 모든 html 요소는 네모난 박스모양으로 구성되어있다 = 박스모델 박스모델은 html 요소를 내용(content), 패딩, 테두리, 마진으로 구분함. 테두리 박스모델의 내용과 패딩 주변을 감싸는 테두리 border : width style color ex) border : 3px solid/dotted #000; 따로 부여 가능하다. border-style, border-color, border-width 패딩 박스모델의 내용과 테두리 사이의 간격(안쪽 여백) 마진 테두리와 이웃하는 요소 사이의 간격(바깥 여백) 마진은 눈에 보이지 않음 CSS 속성 : a b c d (위, 오른쪽, 아래, 왼쪽) (시계방향) CSS 속성 : a b c(위, 아래, 양옆) CSS 속성 : a b..
2022. 12. 29.
