CSS 레이아웃
크기단위
여러가지 크기 단위가 있고 이 크기 단위들은 속성값으로 다양하게 사용된다
- px : 화소한개의 크기를 의미하고 디바이스 해당도에따라 상대적인 크기를 갖는다.
- % : 부모요소의 사이즈에 대한 비율이다.
- viewport: 뷰포트에 대한 크기 지정이다.
vw : 뷰포트 너비의 1 / 100이다.
vh : 뷰포트 높이의 1 / 100이다.
vmin : 뷰포트 높이나 너비중 작은곳의 1 / 100이다.
vmax : 뷰포트 높이나 너비중 작은곳의 1 / 100이다. - em : 해당요소의 폰트크기 기준으로 비례하는 상대크기이다.
- rem : 최상위 요소인 html 요소의 폰트크기 기준으로 비례하는 상대크기이다.
- calc() : 연산자를 사용한 단위 지정이다.
위 그림처럼 위의 크기 단위를 사용하여 블록요소(div요소)의 크기지정이 가능하다
여백 속성
margin
margin 속성은 외부여백을 지정해주는 속성이다.
속성값의 개수에 따라 달라진다.
코드로 보면....
.test{
/*속성값 1개일 때 상하좌우 10px 외부여백지정 */
margin: 10px;
/*속성값 2개일 때 상하 10px 좌우 20px이 외부여백지정*/
margin: 10px 20px;
/*속성값 3개일 때 상10px 좌우 20px 하 30px이 외부여백지정*/
margin: 10px 20px 30px;
/*속성값 4개일 때 상10px 좌우 20px 하 30px이 외부여백지정*/
margin: 10px 20px 30px 40px;
}padding
padding 속성은 내부여백을 지정해주는 속성이다.
요녀석도 속성값의 개수에 따라 달라진다.
코드로 보면....
.test{
/*속성값 1개일 때 상하좌우 10px 내부여백지정 */
padding: 10px;
/*속성값 2개일 때 상하 10px 좌우 20px이 내부여백지정*/
padding: 10px 20px;
/*속성값 3개일 때 상10px 좌우 20px 하 30px이 내부여백지정*/
padding: 10px 20px 30px;
/*속성값 4개일 때 상10px 좌우 20px 하 30px이 내부여백지정*/
padding: 10px 20px 30px 40px;
}box-sizing
block요소에 대한 크기를 지정해준다.
속상값으로는 2가지가 있는데
코드로 보면....
box-sizing: content-box /*요소의 내용으로 크기지정!!*/
box-sizing: border-box /*요소의 내용 + padding + border로 크기계산!!*/display 속성
속성값으로 4가지를 가진다!!!
block
display: block /*블록요소로 출력되게함*/inline
display: inline /*인라인요소로 출력되게함*/none
display: none /*요소를 보이지 않게 출력되게함*/!!!flex!!!
display: flex /*요소를 flex 시켜준다*/FLEX란???
어떤 요소를 flex속성을 지정하게 된다면
자식요소들이 정렬됨을 알 수 있다.
위 그림을 보면 회색 영역의 부모요소가 각 보라색의 3개의 요소를 자식요소로 가지고 있고
flex를 지정해주니 수평으로 정렬됨을 볼 수 있다.
flex관련 다양한 속성들이 있다.
이링크가 많은 이해에 도움이된다!!
->링크<-
flex direction
속성값 : row, column, row-reverse, column-reverse가 있다.
각각 정렬축을 가로 세로인지 그리고 정렬의 시작점을 지정해줄 수 있다.
.class{
display: flex;
flex-direction: column /*위에서 아래로 자식요소가 쌓인다.*/
}flex-wrap
속성값 : wrap, no-wrap
자식요소를 수평정렬했을 때 wrap으로 속성값을 지정하면 부모요소를 넘어갈때 다음줄부터 자식요소가 정렬된다.
.class{
display: flex;
flex-wrap: wrap; /*줄바꿈을 허용하여 flex정렬을 한다.*/
}justify-content
정렬 방향에 수직되게 요소들을 정렬시켜준다.
정렬축은 고정이고 요소들이 속성값을 기준으로 정렬된다.
속성값: flex-start, flex-end, center, space-between등등
내가 이해한 이미지는 꼬챙이로 자식요소가 꽃여있고 꼬챙이는 고정한 상태로 움직이는 이미지로 이해했다!!!
.class{
display: flex;
justify-content: center; /*flex요소들을 정렬출을 고정시킨뒤 가운데로 정렬*/
}align-items
한줄에 대해서 주로 사용해주고
정렬 축에대해 수직적인 정렬을 시켜준다.
속성값: flex-end, flex-start, stretch, center
align은 정렬 축이 이동하는 이미지로 이해했다.
.class{
display: flex;
align-items: center /*flex 정렬축의 수직축을 기준으로 flex item들을 가운데로 정렬한다.*/
}align-contents
여러줄에 대해 주로 사용해준다.
정렬 축에 수직에대한 정렬을 시켜준다.
속성값 : flex-start, flex-end, center, space-between등등
.class{
display: flex;
align-contents: center /*flex 정렬축의 수직축을 기준으로 flex item들을 가운데로 정렬한다.*/
}
