inline level과 block level
block level : 자동으로 줄바꿈이 됨 (h1태그)
inline level : 그 줄에 속해있다. (a태그)
display : inline or block 으로 속성 변경이 가능하다.
Box model
- border : 10px solid red;
- padding : 20px; - content의 border 사이의 간격
- margin : 40px; - element와 element 사이의 간격
- width : 120px;
inline level에서는 width와 height가 적용되지 않는다.
box-sizing
width와 height로 box의 크기를 조절할 때 content의 크기를 조절하기 때문에 padding과 border까지 포함된 box의 크기를 예측하지 못하는 경우가 있다. 그 이유는 기본적으로 box-sizing : content-box;로 설정되어있기 때문이다.
box-sizing : border-box;를 사용하여 border를 기준으로 크기를 조절하면 된다.
*{ box-sizing : border-box; } 를 사용하여 전체에 적용해줌으로써 편리하게 조절하기도 한다.
마진 겹침
- 같은 block level이 붙여 있을 때 발생 - 더 큰 margin이 적용된다.
- 부모 태그와 자식 태그 사이에서 부모 태그의 border가 조건이 없어 투명하다면 발생 - 더 큰 margin이 적용된다.
포지션
element의 위치를 조절할 수 있는 기능이다.
- position : static; - 기본값
- position : relative; - 포지션 조절 가능
- left = 100px - 왼쪽에서 100px 띄워라, 오른쪽으로 이동한다.
- top = 100px - 위쪽에서 100px 띄워라, 아래쪽으로 이동한다.
- left와 right를 동시에 사용하면 left를 따르고 top과 bottom을 동시에 사용하면 top을 따른다.
media query
반응형 디자인을 만들기 위한 중심적인 기능이다
- @media(max-width : 500px) { } - 최대 폭 500px이다. 500px 이하일 때
- @media(min-width : 500px) { } - 최소 폭 500px이다. 500px 이상일 때
- 나중에 쓴 것이 더 우선 순위가 있다.
- ~400px 일 때 : 배경은 파랑
- 400~600px 일 때 : 배경은 빨강
- 600px~ 일 때 : 배경은 노랑
<!doctype>
<html>
<head>
<style>
@media (max-width : 600px) {
body{
background-color: blue;
}
}
@media (max-width : 400px) {
body{
background-color: red;
}
}
@media (min-width : 601px) {
body{
background-color: yellow;
}
}
</style>
</head>
<body>
</body>
</html>디바이스 크기에 따라 변화
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">- chrome 개발자도구 show media quries와 toggle device toolbar를 통해 확인할 수 있다.
float
이미지를 글의 중간에 삽입하고 싶을 때 사용하는 기능
- float : left; - 이미지가 왼쪽에 위치해있다.
float를 무시하게 하는 방법
- style = "clear : both;" - 해당 content에 적용하면 된다.
multicolumn
다단을 만들 수 있는 기능
- column-count : 2; - 단을 2개로 고정시킨다.
- column-width : 200px; - 단을 200px 단위로 만드므로 화면 크기에 따라 변화
- column-gap : 30px; - column의 간격 조절
- column-rule-style : solid; - column 나누는 선 설정
- column-rule-color : red; - cloumn 나누는 선 색 설정
column 적용 무시하게 하는 방법
- column-span : all; - 모든 column설정값을 무시한다.
