쫑's바른생활

[코딩 초보 개발일지] 상세_01. css 배우기_float 와 clear 본문

개발일지/코린이

[코딩 초보 개발일지] 상세_01. css 배우기_float 와 clear

쫑이야기 2023. 4. 3. 23:46
728x90
반응형

float는 이전에 작성한 글을 참고하시면 좋습니다.
>>> [코딩 초보 개발일지] 입문_04-2. css 작업물 만들기 <<<

 
 

css 속성 중 하나인 float 는 
블록들을 정렬하는 중요한 css 속성이다.
'층 설정 or 자리차지' 라고 해석해 보았다.
다음과 같이 만들예정.
 
< 설정값(가이드)>

< 설정값>

  • 모든 블록 넓이 1200px(side 와 cont 제외)
  • 배경색 임의지정(구분되게만)
  • 글자크기 35px
  • 글자 중간 정렬
  • 페이지 가운데 정렬
  • header : h100
  • banner : h200
  • contents : h300
  • side : w400
  • cont : w800

< Step 01.>
body에 html 작성
head - style에 css 속성 작성
float 없이 우선 작성하면 아래와 같다.

728x90


 

<html lang="ko">
<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>레이아웃_03</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #wrap{
            width: 1200px;
            background-color: aquamarine;
            margin: 0 auto;
        }
        div{
            font-size: 35px;
            text-align: center;
            text-transform: uppercase;
        }
        #header{
            width: 1200px;
            height: 100px;
            background-color :cornflowerblue;
            line-height: 100px;
        }
        #banner{
            width: 1200px;
            height: 200px;
            background-color: pink;
            line-height: 200px;
        }
        #contents{
            width: 1200px;
            line-height: 300px;
        }
        #side{
            width: 400px;
            height: 300px;
            background-color: brown;
        }
        #cont{
            width: 800px;
            height: 300px;
            background-color: green;
        }
        #footer{
            width: 1200px;
            height: 100px;
            background-color: blueviolet;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="banner">banner</div>
        <div id="contents">
            <div id="side">side</div>
            <div id="cont">cont</div>
        </div><!--//contents-->
        <div id="footer">footer</div>
    </div><!--//wrap-->
</body>
</html>

 

블록 정렬이 되지않은 채 만들어짐

< Step 02.>
side와 cont 정렬을 위해 float 를 사용한다.
 

  #side{
  	width: 400px;
  	height: 300px;
  	background-color: brown;
  	float: left;}
  #cont{
	width: 800px;
	height: 300px;
	background-color: green;
	float: left;}
  #footer{
	width: 1200px;
	height: 100px;
	background-color: blueviolet;
	line-height: 100px;}

 
float를 써줌으로써 side 와 cont 를 한 층 위로 올렸다고 해줄 수 있다.
다만 그냥 올린것이 아니라, left를 사용하여 왼쪽정렬하여 층을 올렸다.
 
그런데, 여기서 잠깐! footer가 보이지 않는다.

왜 그런지 도식화하여 설명하면,

 
블록(body)은 기본적으로 1층(A)에 깔림
float는 층을 한 층 올림
따라서 한 층 올리면 2층(B)로 올라감
그럼 2층(B) 아래로 1층 a블록들이 깔리면서 안보이게 됨
 
 
< Step 03. 완성본>
clear : both; 를 활용하여 층 정리를 해준다.
(맨 마지막 블록인 footer에 작성)
* clear : both; = 층 마감 = 층 자리차지
 

  #side{
  	width: 400px;
  	height: 300px;
  	background-color: brown;
  	float: left;}
  #cont{
	width: 800px;
	height: 300px;
	background-color: green;
	float: left;}
  #footer{
	width: 1200px;
	height: 100px;
	background-color: blueviolet;
	line-height: 100px;
	clear: both;}

 

정렬이 되었음!

 
clear : both;를 footer에 입력하므로써
footer가 2층으로 올라간 side와 cont 영역을 채움처리하고
층을 마감하여 깔끔하게 정렬이 된다.

 

clear : both; 의 개념을 3D로 표현하자면 아래와 같다.

side와 cont 가 왼쪽정렬로 2층으로 올라갔다. 
contents의 높이가 side/cont 보다 높다면 contents의 영역이 보이겠지만
높이를 같게 설정하였으므로 2층(side, cont) 아래인 1층에 깔려보이지 않는다.
만약 contents의 높이보다 낮았다면
위 3D그림과 같이 side/cont 아래에 contents가 보였을 것.
 
< Step 04. 응용>
만약 side/cont 높이를 200px로 한다면?
.
.
.
.

side/cont 아래에 민트색(아쿠아색)의 contents 영역이 보이게 됨

 

< Step 05. clearfix>
매번 일일이 블록(선택자)마다
clear: both; 를 설정해주기에는 상당히 귀찮고 오류발생가능성이 높다. 
 이를 줄이기 위해 마치 매크로마냥 clear:both;를 만들어주고
이를 적용하는것이 편한데, 이때 사용하는것이 가상요소와 clearfix이다.
 
일명 매크로이기때문에 clearfix라는 명칭은 임의로 지어준것.

.clearfix::after, .clearfix::before{
    content: "";
    display: block;
    clear: both;
}

:: >>클론2개는 가상요소를 뜻한다.
가상요소는 앞(before)과 뒤(after)만 사용가능.
내용을 살펴보면,
content: " "; 콘텐츠는 공백으로 두고
display 모든요소는 블럭요소로 만들어주고
마지막에 clear:both; 명령어를 넣어준것.
이 clearfix를 정렬이 필요한 선택자에 넣어주면 된다.
 
앞으로의 작업물과 상세설명으로
clearfix와 dispay 블럭요소에 대해 설명할 예정!
 
<끝>
다소 이해하기 힘든 개념이지만
점차 정렬할 일이 많아지게 되면 더 자세히 설명할 수 있을지도...
 
그럼, 오늘도 모두 고생하셨습니다 :)

728x90
반응형

'개발일지 > 코린이' 카테고리의 다른 글

부적합한 열유형 : 1111 오류  (0) 2023.09.04
SQL 시퀀스(Sequence) 순서오류 nextval_1,2,3,4, 21_캐시관련  (0) 2023.08.03
인텔리제이(InteliJ) 로컬호스트 한글깨짐 오류발생=해결  (0) 2023.07.30
'개발일지/코린이' Related Articles more
Comments