< float 1 >
이미지를 자연스럽게 삽입.
또는 레이아웃을 잡을 때도 사용.
float 활용
이미지를 오른쪽에 두고싶다면
float: right; 사용
p 태그에 border 값 적용
이미지에 floating 효과를 주면
이미지 뒤에 나타나는 엘리멘트들은
모두가 이미지를 피해가도록 되어있다.
피해가지 않도록 하려면
style="clear:both;" 적용
clear:both에 올 수 있는
속성의 값은
left도 있고
right 도 있다.
(이미지의 float 속성에 따라
일치하게 적용)
img의 float:left;이면
left 적용한다
< float 2 : holy grail layout >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header><h1>CSS</h1></header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex impedit odit a
rerum cumque id quidem blanditiis adipisci ullam? Omnis voluptatem maxime
voluptatibus ex modi, ipsum cum sed quis libero.
</article>
<aside>ad</aside>
<footer>copyright</footer>
</body>
</html>
일반적으로 flex를 사용할 줄 알았지만
float를 사용
float는 이미지가 있으면
그 이미지 옆으로 글씨가 흘러감.
p 태그가 이미지태그
오른쪽에 온다는 그 특성을 사용해서,
레이아웃을 짤 때 플로트 효과를 많이 사용
nav에 float:left; 적용
nav 태그 : position float flex 써져 있는 부분
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
article 영역에도
float 효과를 준다
article 위치 조정
화면 전체를 쓰게 돼서 내려와버린
article 에다가
width 값을 사용
위에 있는 float 영역으로
들어갈 만한 크기로 만들어준다
aside 태그에도
float:left;
적용
자기 크기만큼 적용되기 떄문에
width 값을 준다.
footer 태그에
clear:both; 적용
footer 태그는
float 태그의 적용을 받지 않게된다.
text-align
padding 적용
nav에 선 만들기
border-right를 적용했지만
선이 끝까지 내려가지 않음.
article 에다가
border-left로 주게되면
깔끔하게 잘 내려오긴 함
하지만 nav가 길어진다면
역시나 선이 끊기게 된다.
nav 와 article 에
border를 주면
선이 끊어지는 현상은 사라진다.
하지만 겹치는 선이 생기게 됨.
article에 마진을 주면
겹쳐지는 현상이 사라지게 된다.
body의 크기가 작아지면서
float 가 갖고있는 기본적인 특성
(자기가 위치할 수 있는 공간이 없으면
밑으로 내려간다는 특성)
때문에 이런 현상이 발생.
이런현상을 방지하기 위해선,
body의 크기를 고정시키면 된다.
하지만 body를 고정시키는 건 이상하기 떄문에
body 밑에다가
모든태그를 감싸는 태그를 하나 생성
container의 크기를 고정시키면
화면의 크기와 상관없이
레이아웃이 변경되는걸 방지 가능
container 고정
box-sizing 사용
(테두리 기준)
container를 화면
한 가운데에 놓는 방법
margin:auto; 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<header><h1>CSS</h1></header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex impedit odit
a rerum cumque id quidem blanditiis adipisci ullam? Omnis voluptatem
maxime voluptatibus ex modi, ipsum cum sed quis libero.
</article>
<aside>ad</aside>
<footer>copyright</footer>
</div>
</body>
</html>header {
border-bottom: 1px solid gray;
}
nav {
float: left;
width: 120px;
border-right: 1px solid gray;
}
/* nav,
article,
aside {
border: 1px solid gray;
} */
article {
float: left;
width: 300px;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin-left: -1px;
}
aside {
float: left;
border-left: 1px solid gray;
margin-left: -1px;
width: 120px;
}
footer {
clear: both;
border-top: 1px solid gray;
text-align: center;
padding: 20px;
}
/* 모두를 감싸는 태그 */
.container {
width: 540px;
border: 1px solid gray;
margin: auto;
}
/* 박스 크기 지정 */
* {
box-sizing: border-box;
}
'> 프로그래밍 언어 > CSS' 카테고리의 다른 글
| [생활코딩] CSS 수업 정리 (12) (0) | 2023.07.22 |
|---|---|
| [생활코딩] CSS 수업 정리 (11) (0) | 2023.07.22 |
| [생활코딩] CSS 수업 정리 (9) (0) | 2023.07.17 |
| [생활코딩] CSS 수업 정리 (8) (0) | 2023.07.17 |
| [생활코딩] CSS 수업 정리 (7) (0) | 2023.07.17 |
