- 11일차 프론트엔드 공부 -
레이아웃
CSS 레이아웃이란 CSS를 이용해서 단순한 문서 형태의 HTML을 보기 좋게 배치하고 재배열 하는 것. 관련 기능,완성된 배열 등을 포괄적으로 지칭한다.
선택자
전체 선택자
*{
property : property value
}
그룹 선택자
.class1, .class2 {
property : property value
}
가상 클래스 선택자
실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다.
선택자:가상 클래스 {
property : property value
}
:first-child
:class:first-child {
property : property value
}
:last-child
:class:last-child {
property : property value
}
:nth-child(n)
:class:nth-child(n) {
property : property value
}
:hover - 마우스가 올라가면 나오게 하는 효과
:class:hover {
property : property value
}
Float 와 Flex 레이아웃
CSS 레이아웃의 흐름
Float -> Flex -> Grid
Float : 이제는 거의 사용하지 않음
Flex, Grid : 상황에 따라 혼용
Float가 쓰이지 않은 이유
반응형 웹이 적합하지 않기 때문
반응형 웹이란?
모바일, 테블릿, PC 등 접속하는 기기의 너비에 맞추어 레이아웃이 변하는 웹페이지
float
HTML 요소를 일반적인 흐름(normal flow)으로부터 벗어나서 특정한 컨테이너의 좌측 혹은 우측을 감싸는 형태로 강제 배치할 수 있도록 도와주는 속성입니다.
float: none (기본값)
float: left
float: right
clear
float가 적용된 요소에 추가로 줄 수 있는 속성으로, float의 영향력을 해당 요소에 한해 해제합니다.
clear: none (기본값)
clear: left
clear: right
clear: both
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="float_box">
안녕!<br>
나는 박스입니다.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Mauris risus sapien,
facilisis vitae feugiat ut, semper at ligula.
Vivamus cursus lectus tincidunt tellus tincidunt
pharetra. Donec pharetra dictum malesuada. Fusce
non sapien egestas, maximus urna vel, pulvinar
magna. Aenean ut dapibus lacus, in blandit ligula.
Vestibulum sit amet efficitur tortor. Phasellus id
viverra felis. Mauris magna est, luctus sit amet
neque et, sagittis ultrices elit. Morbi odio eros,
finibus non justo eget, sollicitudin dapibus ante.
Nunc maximus eu nunc et finibus. Vivamus viverra
feugiat pretium. Sed at tempus enim, et dignissim
ante. Mauris vel nisi leo. Nullam vel nibh suscipit,
lobortis ex eu, mollis nunc. Fusce in eros blandit,
vehicula libero et, euismod enim.
</p>
</body>
</html>.float_box {
width: 200px;
height: 200px;
background-color: blue;
color: white;
padding: 30px;
box-sizing: border-box;
float: right;
}
p {
font-size: 20px;
clear: right;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="float_box">
안녕!<br>
나는 박스입니다.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Mauris risus sapien,
facilisis vitae feugiat ut, semper at ligula.
Vivamus cursus lectus tincidunt tellus tincidunt
pharetra. Donec pharetra dictum malesuada. Fusce
non sapien egestas, maximus urna vel, pulvinar
magna. Aenean ut dapibus lacus, in blandit ligula.
Vestibulum sit amet efficitur tortor. Phasellus id
viverra felis. Mauris magna est, luctus sit amet
neque et, sagittis ultrices elit. Morbi odio eros,
finibus non justo eget, sollicitudin dapibus ante.
Nunc maximus eu nunc et finibus. Vivamus viverra
feugiat pretium. Sed at tempus enim, et dignissim
ante. Mauris vel nisi leo. Nullam vel nibh suscipit,
lobortis ex eu, mollis nunc. Fusce in eros blandit,
vehicula libero et, euismod enim.
</p>
</body>
</html>
.box1 {
height: 400px;
background-color: red;
float: left;
}
.box2 {
height: 200px;
background-color: blue;
float: right;
}
.box {
width: 300px;
padding: 20px;
box-sizing: border-box;
}
/* .box3 {
clear: both;
} */
.clearfix {
clear: both;
}
flex
요소의 속성을 flex로 변경
display : flex
부모요소를 Flex container , 자식요소를 Flex item 이라 한다
flex-direction
row (행) : 중심축을 가로 방향으로 배치 (기본값)
colum (열) : 중심축을 세로 방향으로 배치
justify-content : 중심축 방향 정렬
(row 기준으로)
justify-content : flex-start (기본값)
justify-content : flex-end
justify-content : center
justify-content : space-between
justify-content : space-around
justify-content : space-evenly
align-item : 중심축 반대 방향 정렬
align-item : streth (기본값)
align-item : flex-start
align-item : flex-end
align-item : center
주의1
align-item은 flex-item이 한줄일 때만 우선 적용
두 줄 이상일 때에는 align-conten라는 속성을 사용해야 한다.
주의2
flex-direction이 바뀌면 중심축의 방향이 바뀐다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="flex_container">
<div>Item 1</div>
<div>Item 2 <br>테스트 문구<br>박스 사이즈를 키워봅시다.</div>
<div>Item 3</div>
<div>Item 4<br>중간 사이즈 박스</div>
<div>Item 5</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.flex_container {
height: 300px;
background-color: aqua;
padding: 15px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-end;
}
.flex_container div {
background-color: white;
border: 1px solid red;
}
'프론트엔드 공부 > CSS 기초' 카테고리의 다른 글
| 15일차 프론트엔드 공부 - 함수, position, transition (0) | 2024.09.19 |
|---|---|
| 14일차 프론트엔드 공부 - 폰트, 단위 (0) | 2024.09.12 |
| 13일차 프론트엔드 공부 - 폰트, 단위 (1) | 2024.09.11 |
| 12일차 프론트엔드 공부 - Float, Flex (0) | 2024.09.10 |
| 09일차 프론트엔드 공부 - 기초 CSS (0) | 2024.09.04 |