| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
- 소프트웨어 장인
- strong 태그
- 프론트엔드 과정
- p 태그
- 의문
- form 입력양식
- li 태그
- ol 태그
- form 텍스트입력
- 첫 시작
- ul 태그
- h1~h6 태그
- 뭐임마
- 공부 기록용(비공개)
- 네카라쿠배
- img 태그
- 패캠
- table
- html 기본 태그
- HTML escape
- u 태그
- form 문법
- 네카라쿠배 팁
- 목록 태그
- 공부 기록용
- 왜?
- 포기도 습관이 된다.
- ATOM
- br 태그
- 뭐
- Today
- Total
끈기의 힘 : 뉴비에서 풀스텍으로
[인프런/생활코딩] 섹션5. float (2) - holy grail layout 본문
오늘의 수업은 float란 속성을 중심으로 다음 그림과 같은 레이아웃을 만들어보자!
다만 한계점이 있는데, 크기를 좌우로 늘리든 이 레이아웃의 크기는 변동이 없다.
물론 한계를 해결할 순 있지만 자바스크립트 등의 언어가 필요해지게 되니까 지금은 의미없다. 즉, 화면이 고정된 상태의 성배 레이아웃을 만들어보자.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</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 ~~
</article>
<aside>
ad
</aside>
<footer>
copyleft
</footer>
</body>
</html> 이렇게 만들면 그 값은 다음과 같다.
이제 여기서 css에 속성을 넣어보자.
header{
border-bottom: 1px solid gray;
} 하고
nav, article, aside가 수직인데 수평으로 만들어줘야 하니까 이때 flex를 쓰지 않고 이 수업은 float니까 바로 float효과를 주면 된다. (float: 이미지가 있으면 그 이미지 옆으로 흘러가는 특성)
즉, 1강에서 float 기초를 배웠듯, 밑에 있던 <p> 태그가 이미지태그 오른쪽에 온다는 특성을 활용해서 레이아웃을 짤 때, float 효과를 많이 사용.
nav{
float: left;
}
그래서 nav에 float:left; 값을 주게 되면, 다음과 같이 수평처럼 표현된다.
그 다음에 다음과 같이 추가하면,
nav, article, aside{
border: 1px solid gray;
}
이렇게 될텐데, 이상태에서 ad영역까지 수평으로 되게 위로 올리고 중간에 있는 article영역이 왼쪽에 있는 nav가 끝나니까 위처럼 흘러가버렸는데 이는 우리가 원했던 그림이 아니다. 그럼 우째?
예를 들어, float의 힘이 상당히 강하다고 생각해보자. 그러면 float가 적용된 nav영역이 아닌 article영역은 float의 눈치를 보면서 float가 끝나는 부분에서 화면 전체를 사용하는 것을 볼 수가 있다. ★
그럼 어떻게 하면 article 영역이 float의 눈치를 보지 않고 자기 화면 전체를 쓰게 할 수 있느냐?? 그럼 article에도 float효과를 주면 돼!!
article{
float: left;
} 이렇게.
근데 마찬가지로 우리가 원했던 그림은 아니네? 그럼 우째?
이 article의 영역이 위에 있는 float 영역으로 들어갈 만한 크기로 만들어주면 돼!
ex) article에 width:300px;의 값을 주면 nav영역을 제외한 나머지 영역의 크기에 들어올 수 있는 크기가 되었기에 다음과 같이 올라올 수 있게 되는 것이여!
ad(aside)도 article처럼 하려면 aside에 float:left; 값을 주면 되는디, 문제는 ad가 자신의 크기만큼만 딱 차지하니까 요런 경우엔 얘도 width값을 주면 된다!
nav{
float: left;
width: 120px;
}
article{
float: left;
width: 300px;
}
aside{
float: left;
width: 120px;
} 요렇게. 다음 그림은 그 결과값.
그럼 이제 copyleft 부분이 제일 밑으로 가게 만들어야 하는데, 요 부분은 <footer>라고 할 수 있는데 이제 <footer> 이전에 등장하는 여러 태그에 float 효과가 적용되어 있기에 <footer>영역은 이렇게 위로 올라와 있는 상태이다. 그럼 내려야 하니까 어떻게 내리냐?
<footer>가 더는 이전에 등장한 float 효과를 받는 영역들의 영향을 받지 않는다.라고 float 효과를 지워버려야 한다.
footer{
clear: both;
}를 해주면, 다음과 같이 float 효과가 사라진다.
맨 처음 사진처럼 만드려면 copyleft에 선이 필요하다. 누구한테 선을 주든 상관은 없지만, footer에게 줘보자. 다음처럼
footer{
clear: both;
border-top: 1px solid gray;
text-align: center;
padding: 20px;
}처럼 값을 추가했다고 하자. 다음과 같이 화면 가운데에 적당한 여백을 갖도록.
맨 처음 사진과 비교했을 때 nav쪽 선이 깔끔하게 떨어지지 못하고 있다. 그럼 우째?
처음에 만든 다음 값을 이제 지우자.
nav, article, aside{
border: 1px solid gray;
}
그리고 nav에 줄을 그어보겠다. border-right:1px solid gray;
요렇게 선이 내려가다 말아버린다. 왜 그럴까?
그렇다고 nav에 border-right를 ariticle에 border-left로 준다고 해도 그건 일시적인 효과다. 왜냐??
★★ nav의 영역에 내용이 늘어나게 되면 다음 그림에서처럼 자동으로 article에 있는 border-left선이 끊기게 표현된다는 것이다. 그럼 어떻게 하라고? ★★
nav의 오른쪽에 선을 그으면 nav가 길어졌을 때, 끊기지 않을 것이고 동시에 article의 왼쪽에 선을 그어주면 article이 커졌을 때 선이 끊기지 않게 되지 않을까??
nav{border-right:1px solid gray;}
article{border-left:1px solid gray;}를 추가.
각자 선이 있기에 자신의 크기에 따라서 자동으로 늘어나기에 선이 끊기지 않는다! ★
근데 이래도 또 문제가 있다.. 뭔데?
아래그림에서처럼 nav의 오른쪽 선과 article의 왼쪽, 두 선이 만나면서 겹쳐보인다는 것.
반대로 밑에는 얇아보이는 그런 애매한 현상..그럼 우째?
article영역을 왼쪽으로 1px만큼 움직이면 nav의 오른쪽 border와 article의 왼쪽 border가 오버랩되는 현상이 사라지게 된다. 그래서 article에 margin-left:-1px;값을 주게 되면 해결.
마찬가지로 ad부분 즉, aside에도 border-left:1px solid gray; margin-left:-1px; 추가.
이렇게만 하면 ad영역의 왼쪽 선이 또 끊기게 되는데, 이는 article영역에 border-right:1px solid gray; 값을 추가하면 해결된다.
이제 여기서 화면을 줄이면 article과 aside 영역은 다시 nav영역 밑으로 분리되어버린다.
이렇게 되는 이유는 <body>가 작아지면서 float가 기본적으로 갖고 있는 특성, 자기가 위치할 수 있는 공간이 없다면 밑으로 내려간다는 그 특성으로 인해서 그렇다.
그럼 어째? <body>의 크기를 고정시키면 돼. 근데, body를 고정시키는 건 좀 이상해.
그래서 <body> 바로 밑에다 container라고 하는 클래스 속성값을 가진 div 태그를 만들어 볼 것이다. 그 안에 <header>부터의 모든 내용을 옮기면 돼. 다음 그림처럼.
이제 여기서 container의 크기를 고정시키면 화면의 크기완 상관없이 레이아웃이 변경되는 것을 막을 수가 있지요!
.container{
width: 600px;
border: 1px solid gray;
}를 추가.
추가하면 화면의 크기와는 상관없이 레이아웃은 그대로!
근데 우리 수업의 첫 번째 사진과 비교했을 땐, aside 부분이 좀 비대한 편이다. 왜 그럴까?
이땐 크롬에서 F12를 통해 확인할 수 있다. 뭘?
nav와 article, aside의 width의 합은 540px이니까 container의 값도 540px로 바꾸자.
근데, 또 바꿔놓으면 aside값이 밑으로 내려간다. 그건 왜 그러냐?
nav, article, aside를 감싸고 있는 class의 속성값이 container가 540px을 가졌는데,
표시되는 값보다 실제로 nav, article, aside가 가진 값은 540px보다 크기 때문이다.
(이때 딱! 저번에 배운 ★★★ box-sizing이 떠올라야제!!)
F12누르고 특정 섹터보는 버튼으로 눌러보면, nav의 원래 값은 121px, article은 302px, aside는 121px로 나온다. 이건 무슨 의미냐면, 기본적으로 CSS의 박스모델은 폭을 계산할 때 테두리 값을 포함한다!!! ★★★ 그래서 각각의 폭 값을 더하면 되는데, 만약 이게 수십가지를 넘어가면 복잡하니까 예~~전에 배운 ‘box-sizing’ 있지? 그걸 활용하자!!! ★★★
box-sizing:border-box; (박스를 포함해서 측정하도록 하는 효과)★★★
근데 굳이 이걸 또 .container에 적을 이유가 없고 box-sizing 시간에 배웠던 것처럼 html에 존재하는 모든 태그에 대해 box-sizing을 하겠다는 선택자인 ‘아스터리스크’ 즉, 별표(*)의 CSS영역에 box-sizing:border-box;값을 추가하면 된다! ★★★ (아~ 이건 무슨 소린지 알겠네)
*{
box-sizing:border-box;
}
그리고 이 container를 화면 가운데에 있게 하고 싶다면, container 선택자 영역에
margin:auto;를 추가해주면, container의 왼쪽과 오른쪽의 마진 값이 공평하게 노나지면서 화면 가운데로 위치하게 된다!
반복해서 익숙해지는 게 답인 것 같다. 일단 이해가 잘 안 가지만 무한 복습하면 어느 정도 익숙해지겠지 뭐 ★★★
'프로그래밍 언어 > CSS 공부' 카테고리의 다른 글
| flex box / vh(단위) (0) | 2021.03.15 |
|---|---|
| [인프런/생활코딩] 섹션5. float (1) - 기본 (0) | 2021.03.04 |
| [인프런/생활코딩] 섹션5. Multi column(다단) 기능 (0) | 2021.03.04 |
| [인프런/생활코딩] 섹션5. 미디어쿼리(Media query) - 반응형 디자인 (0) | 2021.03.04 |
| [인프런/생활코딩] 섹션5-4~5. flex : holy grail layout? flex 기타 속성들? (0) | 2021.03.02 |
