박스모델
1. width, height
요소의 box에서 content box의 너비, 높이 설정
2. border
요소를 둘러싸고 있는 박스의 테두리
border-width
border-color
border-style
세 개의 속성이 모두 있어야 테투리가 나타난다.
border: width, style, color 순서로 한 번에 설정이 가능하다.
+border-left-width와 같이 한 방향에만 속성 지정이 가능하다.
box-sizing: border-box; => 테두리를 포함한 사이즈를 기준으로 크기 설정
border-radius: 박스 테두리 곡률 설정
마찬가지로 원하는 부분에만 설정할 수 있다.
3. padding
콘텐츠 박스와 요소를 둘러싼 테두리 사이 공간(테두리와 콘텐츠 사이 공간)
공간이 필요할 때 패딩을 사용하여 텍스트 크기는 그대로 두고 요소 크기 자체만 키울 수 있다.
padding: 5px 10px 15px 20px; => 상단 부터 시계방향으로 적용
+padding-top과 같이 한 방향에만 속성 지정 가능
4. margin
두 요소의 테두리간의 간격
margin: ~ (padding과 동일하게 시계 방향으로 적용)
5. display
-display: inline; 인라인 요소로 표시
이 경우 width와 height 속성 무시. padding속성은 가능하지만 공간을 차지하지 않는다(같은 공간 공유)
-display: block; 블록 요소로 표시
이 경우 width, height, padding, margin이 모든 방향에 적용됨.
-display: inline-block;
인라인 요소처럼 표시하지만 width, height, padding, margin 속성이 모두 적용 됨.
css 단위
상대적 단위
- %: width: 50% = 부모 요소의 절반으로 너비 설정. 항상 다른 값과 상대적으로 너비나 높이 지정에 많이 사용함.
line-height속성의 경우 요소 자체의 font-size를 기준으로 함.
h1{
font-size: 40px;
line-height: 200%; // 80px과 같음
}
- em: 글꼴 크기를 기준으로 변함
ex1)font-size: 1em; = 부모의 font-size와 동일한 사이즈
font-size: 2em; = 부모의 font-size의 2배
ex2)margin: 1em; = 요소의 font-size와 동일 => 요소의 font-size는 부모의 font-size에 좌우됨 => 다른 속성도 부모 요소의 글꼴 크기에 영향을 받는다.
pixel을 사용할 때와 다르게 em을 사용하면 '글꼴 크기'가 변해도 모양과 비율이 대략적으로 동일하게 유지된다. pixel을 사용하면 주변 크기가 변하면 하나하나 바꿔줘야 하지만 em은 대략적으로 비율이 유지됨.
em의 문제점: 중첩구조에서 단계별로 누적되어 적용되므로 원하지 않는 결과를 얻을 수 있음
ex)
ul{
font-size: 1.5em;
}
와 같이 설정하고, ul이 중첩구조를 가지면, 중첩될수록 1.5배씩 font-size가 커진다.
- rem(root em): 글꼴 크기를 부모 요소의 크기에 따라 바꾸지 않고, 루트인 html요소(<html></html>)의 글꼴 크기를 기준으로 사용.
rem은 루트 글꼴 크기가 바뀌지 않는 한 바뀌지 않고, em은 부모 요소의 글꼴 크기에 따라 달라진다.
=> em은 주위 글꼴에 맞춰서 변하도록(?) 해야할 경우에 좋음
절대적 단위
px이 가장 흔하게 쓰임
