CSS파트 claerfix질문
강의중 clearfix div를 넣어주는데
제가 그게 왜들어가는지 들어가서 무슨작용을 하는지
원리가 무엇인지 아직 이해가 덜되서요.. 조금만 더 자세하게 설명해주실수 있나요?
못난 제자라 죄송합니당 ㅜㅜ
html:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-02-clear</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box1 box">
첫번째 박스입니다.<br>
float:left가 적용되어 있습니다.
</div>
<div class="box2 box">
두번째 박스입니다.<br>
float:right가 적용되어 있습니다.
</div>
<div class="clearfix"></div>
<div class="box3">
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.
</div>
</body>
</html>css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: #eeeeee;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 50px 0px;
}
.wrapper {
width: 620px;
padding: 40px 30px;
background-color: white;
border: 1px solid gray;
border-radius: 10px;
}
.wrapper__head {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px dashed gray;
}
.wrapper__head__title {
font-size: 32px;
background-color: orange;
color: white;
text-align: center;
padding: 5px;
margin-bottom: 10px;
}
.wrapper__head__sub-title{
font-size: 18px;
padding: 10px 0;
}
#point {
color: orange;
font-size: 22px;
font-weight: bold;
text-decoration: underline;
display: block;
margin-top: 15px;
}
.wrapper__body {
border: 1px solid #dddddd;
padding: 20px 30px;
}
.diary-title {
font-size: 18px;
font-weight: 600;
background-color: #f4f4f4;
margin-bottom: 20px;
}
.kimchi {
color: red;
font-weight: 600;
}
.egg {
color: orange;
font-weight: 600;
}
.highlight {
font-size: 22px;
color: blue;
font-weight: 700;
font-style: italic;
}
.diary-date {
color: #919191;
font-size: 14px;
text-align: right;
}
.header {
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid gray;
}
.header-inner {
width: 900px;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.logo {
width: 100px;
}
.logo h1 a{
text-decoration: none;
color: orange;
}
.menu__ul {
display: flex;
flex-direction: row;
}
.menu__ul li {
list-style: none;
}
.menu__ul li a{
display: block; /* a 태그는 inline태그여서 상하적용이 안되기 떄문에 block요소를 적용시킴*/
padding: 10px 20px; /*상하에 굳이 시각적 차이 없는 10px을 주는 이유는 마우스 커서클릭 영역이 글자만 되는것 보다 영역을 늘려서 여유를 주기위해서*/
text-decoration: none;
color: black;
}
.menu__ul li a:hover{
color: orange;
}
.user {
width: 100px;
}답변 1
0
안녕하세요, 인프런 AI 인턴이에요.
clearfix는 주로 부모 요소 안에 float 속성을 가진 자식 요소들이 있는 경우 사용됩니다. float 속성을 사용하면 부모 요소는 자식 요소들의 높이를 제대로 계산하지 못하게 됩니다. 이때 clearfix를 사용하면 부모 요소가 자식 요소들의 높이를 제대로 인식할 수 있게 됩니다.
clearfix는 보통 다음과 같은 CSS 코드로 구현됩니다.
.clearfix::after {
content: “”;
display: table;
clear: both;
}
해당 요소의 가상 요소인 “::after”를 사용하여 빈 내용을 추가하고, display 속성을 “table”로 설정하여 가상 요소를 테이블 형식으로 표시하고, clear 속성을 “both”로 설정하여 float 속성을 가진 요소들의 영향을 받지 않도록 합니다.
이렇게 clearfix를 사용하면 부모 요소가 자식 요소들의 높이를 제대로 인식할 수 있고, 예기치 않은 레이아웃 오류를 방지할 수 있습니다.
자세한 내용은 인프런에서 제공하는 CSS 강의를 참고하시면 좋을 것 같아요. 더 궁금한 점이 있으시면 언제든지 물어보세요!
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
40
1
댓글 기능 구현 중 질문드립니다.
0
67
1
쿠폰코드 발급
0
140
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
87
2
문의드립니다!! ㅠㅠ
0
104
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
78
2
_app.js 작성 이후로 에러가 발생하네요
0
95
2
학습자료
0
71
2
학습자료가 안열립니다.
0
51
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
61
0
기존강의 구매자, 업데이트 끝인가요?
0
111
3
업데이트 버전 수강
0
89
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
84
1
graphql 접속이 안됩니다.
0
101
2
const, let 사용 질문 드립니다.
0
71
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
81
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
167
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
185
2
2분 44초 질문
0
132
3