- 레이아웃 (layout) ?
레이아웃이란, 사이트에 구성되는 요소들을 제한된 공간안에 효과적으로 배치하는 일을 의미합니다.
CSS상에서 레이아웃을 나눌때 display 속성을 많이 사용하게됩니다.
- display ?
화면 표시 방법에 대한 속성 입니다. 종류로는 (block, inline, inline-block) 등이 있습니다.
화면을 표시할 때 자식요소들을 정렬 시킬때 display:flex 속성을 사용합니다.
한가지 주의할점은 display:flex 속성을 사용할때에는 자식요소 위에 있는 부모태그에 작성해주어야합니다.
display 속성과 많이 엮어 사용 하는 속성도 있습니다.
- justify-content ?
display:flex 속성을 사용 했을 때 사용할 수 있는 속성입니다.
종류로는 (flex-start : 왼쪽부터 정렬 (left) , center 가운데정렬 , flex-end (right) 오른쪽 정렬) 등이 있고
space-between (정렬하는 박스 사이 여백을 자동 계산해 나눠줌 )
space-around ( 정렬하는 박스들 좌우에 균일하게 여백 자동으로 나눠줌) 등 여백을 자동으로 나눠주는 속성도 있습니다.
justify-content 속성 처럼, display 속성을 사용했을 때 사용할 수 있는 다른 속성으로는
align-items 속성이 있습니다.
- align-items ?
박스의 정렬 방향을 세로로 정렬했을 때 사용하는 속성입니다. flex-start ( 세로방향 위로 정렬 ) ,
center ( 세로방향 가운데 정렬 ) , flex-end ( 세로방향 아래로 정렬) 등 을 사용할 수 있습니다.
-- 응용 해보기
html, css 구간은 이렇게 작성되었습니다.
html와 css를 이렇게 작성하였을때 나오는 화면 입니다.
구분이 되기 쉽도록 background color를 각각 다른색으로 주었습니다
'HTML , CSS' 카테고리의 다른 글
05- background 속성 (0) | 2023.06.27 |
---|---|
04 - 가상선택자 ? (0) | 2023.06.27 |
02 - 4 CSS 박스모델 심화 (0) | 2023.06.04 |
02 - 3 CSS font 관련 속성 추가 [ text-align , line-height 속성 ] (0) | 2023.06.04 |
02 - 2 CSS 속성, 박스 모델의 이해 (0) | 2023.06.04 |