반응형 웹 실전 프로젝트 #19 (레이아웃: float)
HTML, CSS 2020. 7. 23. 17:01레이아웃 #1 : float
block요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치 할수 있다
float은 레이아웃을 완성하기 위한 필수적인 속성이므로 주의를 집중해서 학습하자
float을 지정하는 방법과 함께 float을 해제 하는 방법도 알아두어야 나머지 레이아웃을 완료 할수 있다
float
float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성이다
세로로만 나열되던 블록들을 가로로 서로 어울리게 배치 하려할때 매우 유용하다
float한 박스에 가로 사이즈를 지정해주어야 크로스브라우징 된다
그러나 heading요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않는다
float: left;
속성값 | 속성설명 |
left | 요소를 왼쪽에 배치, 나머지 컨텐츠는 그 주변을 흐르도록 |
right | 요소를 오른쪽에 배치 나머지 컨텐츠는 그 주변을 흐르도록 |
옆으로만 배치한 컨텐츠 내용이 많으면 아래로 흐름
float을 취소할때 float: none; 을 하면됨
예젤르 통해 제목을 float: left; 한이후 나머지 내용들이 주변을 어떻게 감싸는지 살펴보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
</style>
</head>
<body>
<h1>금 연<br>일 지</h1>
<p>
<strong>첫날</strong>은 담배 냄새가 나지 않아서 좋았고, 다음날은
<strong>눈</strong>이 맑아진것 같아 좋았고 그다음날은
<strong>아들</strong>에게 당당하게 담배 피우지 말라고 말할수 있어서 좋았다
개인적인 기호를
법적으로 관리 할수도 없는것이고 금연을 일사불란하게 실행한다는것은 말도 안되는 일이지만,
애연가들 덕분에 그들과 더불어 원치 않게 죽어가는 많은 사람들의 넋은 누가 달래야 할 것인가...
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
h1,
p {
margin: 0;
padding: 0;
}
h1 {
float: left;
margin: 5px 10px 5px 0;
padding: 3px 10px;
font-size: 200%;
background: brown;
color: #fff;
}
p {
width: 500px;
text-align: justify;
color: darkgreen;
}
p strong {
font-size: 120%;
}
</style>
</head>
<body>
<h1>금 연<br>일 지</h1>
<p>
<strong>첫날</strong>은 담배 냄새가 나지 않아서 좋았고, 다음날은
<strong>눈</strong>이 맑아진것 같아 좋았고 그다음날은
<strong>아들</strong>에게 당당하게 담배 피우지 말라고 말할수 있어서 좋았다
개인적인 기호를
법적으로 관리 할수도 없는것이고 금연을 일사불란하게 실행한다는것은 말도 안되는 일이지만,
애연가들 덕분에 그들과 더불어 원치 않게 죽어가는 많은 사람들의 넋은 누가 달래야 할 것인가...
</p>
</body>
</html>
정확한 레이아웃을 표현하기 위해 블록의 안 여백, 바깥 여백을 초기화
h1요소를 float: left; 로 지정하여 뒤 이은 내용들을 옆으로 끌어 올림
h1 요소가 내용들과 너무 붙지 않도록 위, 아래 여백은 5px 오른쪽여백은 10px로 지정
h1 요소의 안쪽 디자인을 위해 여백 지정
float: right; 하면 어떻게 될까?
좌측이 아닌 우측에 붙는다는것 외 큰 차이는 없다
단순한 하나의 요소가 아닌 하위 요소를 포함하고 있는 박스를 float해보자
요소가 많아져 css가 늘어날뿐 방법은 같다
예제를 통해서 div, toomany 박스 안에서 이미지와 텍스트를 포함하는 div, lotus를 우측으로 붙이고 나머지 내용이 좌측으로 흐르도록 하는 레이아웃을 위해 float을 사용해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
body,
h3,
div,
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h3>은혜 갚은 개미</h3>
<div class="toomany">
<div class="ant">
<img src="public/images/ant.png" width="50%" alt="은혜값은개미">
<p>어느 무더운 여름날, 목이 마른 개미 한 마리가 시냇가로...</p>
</div>
<p>
어느 무더운 여름날, 목이 마른 개미 한 마리가 시냇가로 갔어요.<br />
그런데 바람이 너무 세게 불어 개미는 그만 시냇물에 '풍덩'빠지고 말았어요.<br />
"어푸 어푸. 개미살려!"<br />
때마침 나무 위에 앉아 있던 비둘기다 물속에서 허우적대는 개미를 보았어요.<br />
"이런. 개미야. 나뭇잎을 던져 줄테니 어서 그 위로 올라가렴."<br />
개미는 비둘기가 던져 준 나뭇잎 덕분에 무사히 땅 위로 올라올 수 있었어요.<br />
"후유, 살았다. 비둘기야, 이 은혜를 절대 잊지 않을게."<br />
개미가 인사를 하려고 고개를 들었을 때였어요.<br />
비둘기를 잡으려는 사냥꾼이 화살을 들고 서 있지 뭐예요?<br />
"사냥꾼이 나타났다. 비둘기야, 어서 도망쳐."<br />
개미가 소리쳤지만 비둘기는 듣지 못했어요.<br />
당황한 개미는 있는 힘껏 사냥꾼의 발을 꽉 깨물었지요.<br />
"앗, 따가워!"<br />
사냥꾼은 들고 있던 활과 화살을 집어 던지며 소리쳤어요.<br />
그 소리에 깜짝 놀란 비둘기는 포르르 날아갔지요.<br />
"개미야, 고마워." "아니야, 비둘기야. 내가 더 고마워."<br />
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
body,
h3,
div,
p {
margin: 0;
padding: 0;
}
h3 {
padding: 10px 70px 10px;
border-bottom: 1px dotted #aaa;
color: #357;
}
.toomany {
width: 75%;
max-width: 600px;
margin: 20px;
text-align: justify;
}
.ant {
float: right;
width: 150px;
padding: 10px;
border: 1px solid #aaa;
margin-left: 20px;
}
.ant p {
font-size: 10px;
}
</style>
</head>
<body>
<h3>은혜 갚은 개미</h3>
<div class="toomany">
<div class="ant">
<img src="public/images/ant.png" width="100%" alt="은혜값은개미">
<p>어느 무더운 여름날, 목이 마른 개미 한 마리가 시냇가로...</p>
</div>
<p>
어느 무더운 여름날, 목이 마른 개미 한 마리가 시냇가로 갔어요.<br />
그런데 바람이 너무 세게 불어 개미는 그만 시냇물에 '풍덩'빠지고 말았어요.<br />
"어푸 어푸. 개미살려!"<br />
때마침 나무 위에 앉아 있던 비둘기다 물속에서 허우적대는 개미를 보았어요.<br />
"이런. 개미야. 나뭇잎을 던져 줄테니 어서 그 위로 올라가렴."<br />
개미는 비둘기가 던져 준 나뭇잎 덕분에 무사히 땅 위로 올라올 수 있었어요.<br />
"후유, 살았다. 비둘기야, 이 은혜를 절대 잊지 않을게."<br />
개미가 인사를 하려고 고개를 들었을 때였어요.<br />
비둘기를 잡으려는 사냥꾼이 화살을 들고 서 있지 뭐예요?<br />
"사냥꾼이 나타났다. 비둘기야, 어서 도망쳐."<br />
개미가 소리쳤지만 비둘기는 듣지 못했어요.<br />
당황한 개미는 있는 힘껏 사냥꾼의 발을 꽉 깨물었지요.<br />
"앗, 따가워!"<br />
사냥꾼은 들고 있던 활과 화살을 집어 던지며 소리쳤어요.<br />
그 소리에 깜짝 놀란 비둘기는 포르르 날아갔지요.<br />
"개미야, 고마워." "아니야, 비둘기야. 내가 더 고마워."<br />
</p>
</div>
</body>
</html>
정확한 레이아웃의 표현을 위해 블록들의 안여백, 바깥여백을 초기화
float되는 요소와 닿아 있는 면의 텍스트는 주로 가지런히 정렬하여 가독성을 높임
이미지와 텍스트를 포함하는 상자를 float: right; 하여 나머지 요소들을 좌측으로 끌어 올려 흐르게 함
float 하는 div는 가로 사이즈를 명시 해야 함
float 하는 div에 안 여백과 테두리를 지정해 액자처럼 디자인함
float하는 div가 좌측 컨텐츠와 붙지 않도록 좌측에 바깥 여백을 줌
만약 컨텐츠들을 연속적으로 float하면 어떻게 될까?
계속 옆에 붙어 가로로 나열되는 결과를 얻을수 있다
예제를 통해 제목과 내용을 포함 하는 박스를 모두 float하여 가로로 나열시켜보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
</style>
</head>
<body>
<h3>캠핑가자</h3>
<p>
캠핑정보 서비스입니다.<br>
<strong>캠핑장 검색</strong>과 <strong>캠핑장 예약</strong>등을 할수 있습니다.
</p>
<ul>
<ul>
<li>
<h3>캠핑장 검색</h3>
<p>원하시는 날짜를 입력 하시면 캠핑장과 잔여수가 보입니다.</p>
</li>
<li>
<h3>캠핑장 예약</h3>
<p>캠핑장을 선택 하시면 네이버 예약 사이트로 이동합니다.</p>
</li>
<li>
<h3>캠핑 장비</h3>
<p>캠핑장비를 기록하고 공유 할수 있습니다.</p>
</li>
<li>
<h3>캠핑 토크</h3>
<p>마음이 맞는 캠퍼들과 수다떨어 보세요.</p>
</li>
</ul>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
h1,
p,
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.gallery {
padding: 0;
}
.gallery li {
float: left;
width: 150px;
height: 150px;
text-align: center;
border: 1px solid #000;
margin: 5px;
}
.gallery h3 {
padding: 5px;
}
.gallery li h3 {
background: #daa;
}
.gallery li+li h3 {
background: #abc;
}
.gallery li+li+li h3 {
background: #eba;
}
.gallery li+li+li+li h3 {
background: #aa7;
}
.gallery li p {
padding: 10px;
text-align: justify;
font-size: 14px;
}
</style>
</head>
<body>
<h3>캠핑가자</h3>
<p>
캠핑정보 서비스입니다.<br>
<strong>캠핑장 검색</strong>과 <strong>캠핑장 예약</strong>등을 할수 있습니다.
</p>
<ul class="gallery">
<li>
<h3>캠핑장 검색</h3>
<p>원하시는 날짜를 입력 하시면 캠핑장과 잔여수가 보입니다.</p>
</li>
<li>
<h3>캠핑장 예약</h3>
<p>캠핑장을 선택 하시면 네이버 예약 사이트로 이동합니다.</p>
</li>
<li>
<h3>캠핑 장비</h3>
<p>캠핑장비를 기록하고 공유 할수 있습니다.</p>
</li>
<li>
<h3>캠핑 토크</h3>
<p>마음이 맞는 캠퍼들과 수다떨어 보세요.</p>
</li>
</ul>
</body>
</html>
정확한 레이아웃의 표현을 위해 블록들의 안 여백, 바깥 여백을 초기화 함
.gallery의 목록들을 float: left; 하여 가로로 나열함, 가로 사이즈를 지정
목록들이 서로 붙지 않도록 우측 바깥 여백을 10px로 지정
clear
만약 float로 레이아웃을 설정하고 난뒤 컨텐츠가 계속 또 있으면 어떻게 될지 예제를 통해 알아보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
body {
margin: 20px 30px;
max-width: 800px;
}
p {
padding: 10px;
text-align: justify;
font-size: 13px;
}
.story1 {
float: left;
width: 50%;
background: #ddd;
}
.story2 {
float: right;
width: 46%;
background: #ddd;
}
.story3 {
background: #cff;
}
</style>
</head>
<body>
<div class="story1">
<h3>은혜 갚은 개미</h3>
<p>어느 무더운 여름날, 목이 마른 개미 한 마리가 시냇가로 갔어요.
그런데 바람이 너무 세게 불어 개미는 그만 시냇물에 '풍덩'빠지고 말았어요.
"어푸 어푸. 개미살려!"
때마침 나무 위에 앉아 있던 비둘기다 물속에서 허우적대는 개미를 보았어요.
"이런. 개미야. 나뭇잎을 던져 줄테니 어서 그 위로 올라가렴."
개미는 비둘기가 던져 준 나뭇잎 덕분에 무사히 땅 위로 올라올 수 있었어요.
"후유, 살았다. 비둘기야, 이 은혜를 절대 잊지 않을게."
개미가 인사를 하려고 고개를 들었을 때였어요.
비둘기를 잡으려는 사냥꾼이 화살을 들고 서 있지 뭐예요?
"사냥꾼이 나타났다. 비둘기야, 어서 도망쳐."
개미가 소리쳤지만 비둘기는 듣지 못했어요.
당황한 개미는 있는 힘껏 사냥꾼의 발을 꽉 깨물었지요.
"앗, 따가워!"
사냥꾼은 들고 있던 활과 화살을 집어 던지며 소리쳤어요.
그 소리에 깜짝 놀란 비둘기는 포르르 날아갔지요.
"개미야, 고마워." "아니야, 비둘기야. 내가 더 고마워."</p>
</div>
<div class="story2">
<h3>토끼와 거북이 이야기</h3>
<p>
거북이가 숲 속을 엉금엉금 기어가고 있었어요.
깡충깡충 뛰어오던 토끼가 그 모습을 보며 놀렸어요.
"비켜라 비켜. 깡충깡충 토끼님이 나가신다. 느림보는 길을 비켜라."
약이 오른 거북이가 걸음을 멈추고 말했어요.
"이봐, 토끼. 우리 산꼭대가 나무까지 누가 빨리 가나 시합하자."
"아하하. 해 보나마나 내가 이길 텐데? 좋아. 그럼 준비, 출발!"
토끼와 거북이는 동시에 나무를 향해 출발했어요.
토끼는 깡충깡충 뛰어 순식간에 쌩 사라졌고,
거북이는 느릿느릿 땀을 흘리며 뛰따랐지요.
"느림보가 어디쯤 오나?
헤헤. 쫓아오려면 아직도 멀었네. 한숨 자야지."
하지만 거북이는 쉬지 않고 엉금엉금 산을 올라겠어요.
거북이는 쿨쿨 잠이 든 토끼를 지나 마침내 산꼭대기에 도착했어요.
"야호! 내가 토끼를 이겼다." "아, 아니. 뭐라고?"
뒤늦게 잠에서 깨어난 토끼는 그제야 허둥지둥 산으로 달려갔어요.
하지만 거북이는 이미 산쪽대가 나무 아래에서 쉬고 있었답니다.
</p>
</div>
<div class="story3">
<h3>그림자를 뽐냈던 늑대 이야기</h3>
<p>
늑대가 먹잇감을 찾아 어슬렁거리고 있었어요.
그러다 땅바닥에 길게 드리워진 자신이 그림자를 보았지요.
"이야, 내 다리는 어쩜 이렇게도 길까?
날카롭고 뾰족한 이빨은 또 어떻고.
사자도 이런 그림자는 갖지 못했을 거야."
의기양양해진 늑대는 자기가 어디로 가고 있는 줄도 몰랐답니다.
곧 정신이 든 늑대는 깜짝 놀라고 말았어요.
"앗, 여긴 사자의 동굴 앞 아니야? 빨리 돌아가야겠어.:
하지만 갑자기 이런 생각이 불쑥 들지 뭐예요.
"아, 아니지. 사자가 내 커다란 그림자를 보고 달아날꺼야.
사실 동물의 왕은 내가 되어야 해."
바로 그때 잔뜩 화가 난 사자가 나타나 늑대를 단숨에
넘어뜨리며 말했어요.
"방금 뭐라고 했느냐. 고얀 늑대 같으니라고. 크아앙!"
"흑흑, 잘난 척하다가 결국 사자 밥이 되는구나."
그제야 늑대는 때늦은 후회를 했답니다.
</p>
</div>
</body>
</html>
좌측 박스를 float: left; 하고 우측 박스를 float: right; 했더니 다음과 같은 결과가 나타났다
developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats_skills
Test your skills: floats - Learn web development | MDN
The aim of this task is to get you working with the CSS float and clear properties covered in our lesson on Floats. You will be working through three small tasks which use different elements of the material you have just covered. Note: You can try out so
developer.mozilla.org
float1
float2
p
왜 이런 결과가 표시 된것일까?
float을 왜 해제 해야 하는지 위의 결과가 말해주고 있다
두번째 박스가 float함으로써 아래쪽 컨텐츠를 끌어올렸기 때문이다
clear속성은 float된 박스들의 바로 다름 박스에게 주변을 흐르지 않고 원래대로 아래에 배치되도록 한다
즉, float을 해제 시켜주는 중요한 역할을 하는데 이요소는 블록이어야 한다
clear: both;
속성 값 | 속성 설명 |
left | float된 박스 중 좌측이 짧을때 좌측의 빈 공간 부터 채워 내려옴 |
right | float된 박스중 우측이 짧을때 우측의 빈공간부터 채워 내려옴 |
both | float된 박스중 어느쪽도 채우지 않고 다시 한단으로 배치 |
.story3 요소에 clear: both; 를 추가 하고 나면 다음과 같이 표시 된다
.story3 {
background: #cff;
clear: both;
}
float이 해제 되어 한줄에 한 단만 나타나고 있다
위쪽 두 박스의 너비를 조절하여 좌측을 짧게 하고 clear: left;를 해보자
clear는 left, right할 경우가 거의 없다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
border: 5px solid black;
padding: 10px;
}
.float1 {
float: left;
width: 50px;
height: 50px;
border: 5px solid gold;
text-align: center;
}
.float2 {
float: right;
width: 50px;
height: 100px;
border: 5px solid gold;
text-align: center;
}
.box p {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="float1">
<p>Left</p>
</div>
<div class="float2">
<p>Right</p>
</div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit neque
temporibus, eos dolore nisi, quis omnis in consectetur quidem quia hic
facilis ipsam. Nihil nostrum quidem minima sequi modi! Dignissimos
necessitatibus dolorem cum, voluptas doloribus hic repellat tenetur,
reiciendis sit dolores rerum, inventore modi illum aspernatur mollitia
odio sint illo!
</p>
</div>
</body>
</html>
float한 박스뒤에 컨텐츠가 없어서 clear: both; 할 선택자가 없으면 어떻게 되는지 살펴 보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
.stories {
padding: 30px;
background: #eee;
border: 5px solid #bbb;
}
h3 {
margin: 0 0 10px;
text-align: center;
}
p {
box-sizing: border-box;
padding: 15px 25px;
text-align: justify;
background: rgba(255, 255, 255, 0.8);
}
.story1 {
float: left;
width: 47%;
border: 3px solid green;
}
.story2 {
float: right;
width: 47%;
border: 3px solid #a50;
}
</style>
</head>
<body>
<div class="stories">
<h3>은혜 갚은 개미 & 토끼와 거북이 이야기</h3>
<p class="story1">어느 무더운 여름날, 목이 마른 개미 한 마리가 시냇가로 갔어요.
그런데 바람이 너무 세게 불어 개미는 그만 시냇물에 '풍덩'빠지고 말았어요.
"어푸 어푸. 개미살려!"
때마침 나무 위에 앉아 있던 비둘기다 물속에서 허우적대는 개미를 보았어요.
"이런. 개미야. 나뭇잎을 던져 줄테니 어서 그 위로 올라가렴."
개미는 비둘기가 던져 준 나뭇잎 덕분에 무사히 땅 위로 올라올 수 있었어요.
"후유, 살았다. 비둘기야, 이 은혜를 절대 잊지 않을게."
개미가 인사를 하려고 고개를 들었을 때였어요.
비둘기를 잡으려는 사냥꾼이 화살을 들고 서 있지 뭐예요?
"사냥꾼이 나타났다. 비둘기야, 어서 도망쳐."
개미가 소리쳤지만 비둘기는 듣지 못했어요.
당황한 개미는 있는 힘껏 사냥꾼의 발을 꽉 깨물었지요.
"앗, 따가워!"
사냥꾼은 들고 있던 활과 화살을 집어 던지며 소리쳤어요.
그 소리에 깜짝 놀란 비둘기는 포르르 날아갔지요.
"개미야, 고마워." "아니야, 비둘기야. 내가 더 고마워."</p>
<p class="story2">
거북이가 숲 속을 엉금엉금 기어가고 있었어요.
깡충깡충 뛰어오던 토끼가 그 모습을 보며 놀렸어요.
"비켜라 비켜. 깡충깡충 토끼님이 나가신다. 느림보는 길을 비켜라."
약이 오른 거북이가 걸음을 멈추고 말했어요.
"이봐, 토끼. 우리 산꼭대가 나무까지 누가 빨리 가나 시합하자."
"아하하. 해 보나마나 내가 이길 텐데? 좋아. 그럼 준비, 출발!"
토끼와 거북이는 동시에 나무를 향해 출발했어요.
토끼는 깡충깡충 뛰어 순식간에 쌩 사라졌고,
거북이는 느릿느릿 땀을 흘리며 뛰따랐지요.
"느림보가 어디쯤 오나?
헤헤. 쫓아오려면 아직도 멀었네. 한숨 자야지."
하지만 거북이는 쉬지 않고 엉금엉금 산을 올라겠어요.
거북이는 쿨쿨 잠이 든 토끼를 지나 마침내 산꼭대기에 도착했어요.
"야호! 내가 토끼를 이겼다." "아, 아니. 뭐라고?"
뒤늦게 잠에서 깨어난 토끼는 그제야 허둥지둥 산으로 달려갔어요.
하지만 거북이는 이미 산쪽대가 나무 아래에서 쉬고 있었답니다.
</p>
</div>
</body>
</html>
width값을 %로 주었기 때문에 padding의 px값이 width에 포함되도록 box-sizing을 border-box로 지정
.story1좌측에 .story2우측에 47% 크기로 가로로 배치함
float된 요소들을 감싸고 있는 .stories의 레이아웃이 깨졌다
원인은 float한뒤 clear: both; 할 요소가 없어 방치 했기 때문이다
이럴때는 .stories 요소안에 가상으로 요소를 만들어 거기에 clear: both;를 한다
.stories:after {
content: "";
display: block;
clear: both;
}
박스 안에 가짜로 요소를 만들어 내용은 없지만 블록 속성을 부여하여 clear: both하는 것이다
이것이 float을 해제 하는 가장 일반적인 방법이다
보통 저런 속성을 미리 하나의 클래스로 등록하여 float을 해제 해야 하는 요소마다 그 클래스를 붙여 준다
.clear:after {
content: "";
display: block;
clear: both;
}
<div class="stories clear">
<h3>은혜 갚은 개미 & 토끼와 거북이 이야기</h3>
...
결과는 다음과 같다
이제야 float한 세트가 완료 되었다
레이아웃에 가장 많이 동원되는 float도 clear가 없이는 오류뿐이라는 점을 기억해야 한다
그 외 float 해제하는 몇가지 방법들
지금까지 알아본 바로 float을 해제 하지 않으면 다음 박스들에 레이아웃이 틀어지며, 또한 float된 박스를 감싸는 박스에 부여된 배경, 테두리 여백 등이 제대로 나타나지 않았다
따라서 레이아웃을 제대로 표현 하는데 float해제는 반드시 필요하다
clear를 쓰지 않아도 해제 되는 경우를 알아본다
속성 설명 |
float된 요소를 감싸는 박스가 이미 float되어 있는경우 우연히 일어난 경우가 드물며, 어짜피 감싸는 박스의 float을 해제 해야 함 |
float된 요소를 감싸는 박스에 overflow: auto; 한다 새로 스크롤바가 생길경우 사용할수 없으며 width 값을 주어야 크로스 브라우징 된다 |
float된 박스들을 감싸는 박스에 height값을 준다 본문 내용엔 높이를 주지 않으므로 새로 사이즈가 불변일경우 아니면 사용불가능 |
float을 이용하여 초간단 웹페이지 템플릿을 구성해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>캠핑가자</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<header>
<h1><a href="#">캠핑가자</a></h1>
<ul>
<li><a href="#">캠핑장 검색</a></li>
<li><a href="#">캠핑장 예약</a></li>
<li><a href="#">캠핑 장비</a></li>
<li><a href="#">캠핑 토크</a></li>
</ul>
</header>
<div>
<ul>
<li><a href="#">캠핑장 검색</a></li>
<li><a href="#">캠핑장 예약</a></li>
<li><a href="#">캠핑 장비</a></li>
<li><a href="#">캠핑 토크</a></li>
</ul>
<div>
<p>
캠핑장 검색은 날짜선택을 먼저 해주세요. <br>
캠핑장 예약은 네이버 예약으로 연결됩니다.<br>
캠핑 장비는 공유 할수 있습니다.<br>
캠핑 토크를 통해 커뮤니티에 참여해보세요.<br>
</p>
</div>
</div>
</div>
<footer>
<p>Copyright 2020. smilejsu. All rights reserved.</p>
</footer>
</body>
</html>
정확한 레이아웃의 표현을 위해 블록의 안 여백, 바깥여백을 초기화
body,
header,
div,
footer,
h1,
p,
ul,
li {
margin: 0;
padding: 0;
}
float을 해제 하기 위해 clear클래스 선언
.clear:after {
content: "";
display: block;
clear: both;
}
대표글꼴 선언
body {
font: 14px 'Malgun Gothic', '맑은고딕';
}
header안에 로고와 주 메뉴를 가로로 배치 하기위해 h1에 float속성 부여
header h1 {
float: left;
margin-right: 40px;
}
header안에 로고와 주메뉴를 가로로 배치 하기위해 .gnb에 float속성 부여
header .gnb {
float: left;
padding-top: 10px;
}
.gnb안에 m1, m2등 메뉴를 가로로 배치 하기 위해 li에 float속성 부여
header .gnb li {
float: left;
}
#container 안에 서브메뉴와 컨텐츠를 가로로 배치 하기 위해 .lnb에 float속성 부여
.lnb {
float: left;
}
#container안에 서브메뉴와 컨텐츠를 가로로 배치하기 위해 .content_area에 float속성 부여
.content_area {
float: left;
width: 80%;
background: forestgreen;
}
float을 감싸는 요소에 float 해제를 위해 마련한 clear클래스 부여
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>캠핑가자</title>
<style type="text/css">
body,
header,
div,
footer,
h1,
p,
ul,
li {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.clear:after {
content: "";
display: block;
clear: both;
}
body {
font: 14px 'Malgun Gothic', '맑은고딕';
}
a {
text-decoration: none;
color: #444;
}
a:hover {
text-decoration: underline;
}
#wrap {
background: #cfc;
}
header {
background: crimson;
}
header h1 {
float: left;
margin-right: 40px;
}
header .gnb {
float: left;
padding-top: 10px;
}
header .gnb li {
float: left;
}
header .gnb li a {
display: block;
width: 100px;
text-align: center;
font-size: 16px;
}
.lnb {
float: left;
width: 20%;
background: lightgreen;
}
.lnb li a {
display: block;
padding: 5px 20px;
}
.content_area {
float: left;
width: 80%;
background: forestgreen;
}
.content_area p {}
footer {
padding: 10px;
background: lightgray;
}
footer p {
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<header class="clear">
<h1><a href="#">캠핑가자</a></h1>
<ul class="gnb clear">
<li><a href="#">캠핑장 검색</a></li>
<li><a href="#">캠핑장 예약</a></li>
<li><a href="#">캠핑 장비</a></li>
<li><a href="#">캠핑 토크</a></li>
</ul>
</header>
<div id="container" class="clear">
<ul class="lnb">
<li><a href="#">캠핑장 검색</a></li>
<li><a href="#">캠핑장 예약</a></li>
<li><a href="#">캠핑 장비</a></li>
<li><a href="#">캠핑 토크</a></li>
</ul>
<div class="content_area">
<p>
캠핑장 검색은 날짜선택을 먼저 해주세요. <br>
캠핑장 예약은 네이버 예약으로 연결됩니다.<br>
캠핑 장비는 공유 할수 있습니다.<br>
캠핑 토크를 통해 커뮤니티에 참여해보세요.<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</div>
</div>
</div>
<footer>
<p>Copyright 2020. smilejsu. All rights reserved.</p>
</footer>
</body>
</html>
'HTML, CSS' 카테고리의 다른 글
반응형 웹 실전 프로젝트 #21 (미디어쿼리 media query) (0) | 2020.07.23 |
---|---|
반응형 웹 실전 프로젝트 #20 (레이아웃: position) (0) | 2020.07.23 |
반응형 웹 실전 프로젝트 #18 (기타 CSS3 속성) (0) | 2020.07.23 |
반응형 웹 실전 프로젝트 #17 (BOX MODEL) (0) | 2020.07.23 |
반응형 웹 실전 프로젝트 #16 (배경 background) (0) | 2020.07.23 |