ㅡ 시멘틱태그의 기본 구성
ㅡ 레이아웃을 나누는 방법 4가지가 있다.
- display:inline-block
- float
- display:flex
- display:grid
ㅡ 가장 먼저 div 태그로 나누자
일단 div 태그로 나누자.
div의 class , id 명으로 구분
> 명사 + 명사
> headerSearch
>header-search 와 같이 직관적인 네이밍 필요함.
1. 레이아웃 만들기 ( display_inline) : 옛날 방식 ㅠㅠ
-한줄로 맞춰줄 요소에게 입력 해준다.
display: inline-block;
-text가 있을 경우, 간격이 생길 경우 부모 태그에게 아래를 아래를 입력해준다.
font-size:0;
-정렬이 어긋날 때는
vertical-align: top; 를 줘서 정렬을 다시 맞춰준다,
2. 레이아웃 만들기 float : 부모기준으로 맞춰 준다.
(위치를 지정할 요소의 부모를 만들어주고 부모에게 float 을 입력함)
float : left ;
float : right ; 로 위치 값을 준 후
다음에 새로 배치되어야 할 태그에는
clear : both; 로 리셋 시켜준다.
3. 레이아웃 만들기 flex : 부모 크기 안에 자동 배열
display : flex; >> 로 기본 왼쪽 줄 정렬
flex-direction: column; >> 줄의 배치 기준을 바꿔줌 (왼쪽, 수직, 오른쪽, 아래)
flex-wrap : wrap >> 한줄 초과일때 사용해서 요소를 다음 줄로 넘겨준다.
align-content >> 한줄 초과일때 2줄 이상일때 배치하는 옵션이다.
align-items >> 한줄의 아이템을 배치하는 옵션다
justify-content: space-between; >> 부모안에 컨텐츠 간격 자동 배치
4. 레이아웃 만들기- grid ★ (가장 많이 사용한다. 먼저 부모값에 grid 코딩 후 자식에게 area 를 배분한다.)
1fr 부모 기준의 비율값으로 균등하게 공간을 배분함.
columns-가로 , rows-세로 / 수치는 1fr 또는 100px 또는 3fr 로도 입력 가능
grid-gap : 10px; >> grid간의 간격 주기
자식에게 >> width:auto; height:auto;값 주고 진행하면 편하다.
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"top top"
"left right"
"bottom bottom";
>>부모에게 작성
ex)
HTML
<body>
<div class="container">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
CSS
.container {
width: 400px;
height: 600px;
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"top top"
"left right"
"bottom bottom"; }
.top {
background-color: red;
width: 400px;
height: 200px;
font-size: 16px;
grid-area: top;
}
.left {
background-color: blue;
width: 200px;
height: 200px;
display: inline-block;
font-size: 16px;
grid-area: left;
/* float: left; */
/* vertical-align: top; */
}
.right {
background-color: aquamarine;
width: 200px;
height: 200px;
grid-area: right;
/* display: inline-block; */
font-size: 16px;
/* float: right; */
}
.bottom {
/* clear: both; */
background-color: pink;
width: 400px;
height: 200px;
font-size: 16px;
grid-area: bottom;
}
'제로베이스 프론트엔드 스쿨 23기 > [사전학습]' 카테고리의 다른 글
| (기초) CSS - 공간을 부여하는 속성 padding, margin (0) | 2023.12.18 |
|---|---|
| (기초) CSS - font 속성들 (0) | 2023.12.18 |
| (기초) HTML 기본태그의 특성 <p> <h1> (1) | 2023.12.18 |
| (기초) HTML 과 CSS ( style 태그, class와 id속성, Link태그로 CSS파일 불러오기) (0) | 2023.12.13 |
| (입문)비주얼 스튜디오(Visual Studio)에서 HTML 선언하기( HTML실행) (0) | 2023.12.13 |
