김갱환
맨땅에 코딩
김갱환
전체 방문자
오늘
어제
  • 분류 전체보기 (239)
    • ⁂ 맨땅에 코딩 (11)
      • : Story (3)
      • : MiniProject 'MyWeb' (1)
      • : Final Project (5)
      • : Josa-Moa 한국어 조사 처리 프로젝트 (1)
    • —————Frontend——————————————.. (0)
    • ⁂ HTML (10)
      • : 기본 익히기 (10)
    • ⁂ CSS (15)
      • : 기본 익히기 (15)
    • ⁂ Java Script (32)
      • : 기본 익히기 (28)
      • : 자바스크립트 라이브러리 (1)
      • : 연습 문제 (3)
    • ⁂ jQuery (11)
      • : 기본 익히기 (11)
    • ⁂ Bootstrap (3)
      • : 기본 익히기 (3)
    • ⁂ TailWind CSS (1)
    • ⁂ AJAX (5)
      • : 기본 익히기 (5)
    • ⁂ Vue.js (3)
      • : 기본 익히기 (3)
    • —————DB : Data Base————————.. (0)
    • ⁂ Oracle DB (27)
      • : 기본 익히기 (24)
      • : 연습 문제 (3)
    • ⁂ MyBatis Framework (15)
      • : 기본 익히기 (15)
    • —————Backend———————————————.. (0)
    • ⁂ Java (62)
      • : 기본 익히기 (42)
      • : JDBC - Java DataBase Conn.. (4)
      • : Crawling (2)
      • : 독학으로 공부하기(과거) (11)
      • : 연습문제 (3)
    • ——————Web————————————————— (0)
    • ⁂ JSP (28)
      • : 기본 익히기 (28)
    • ⁂ Spring FrameWork (15)
      • : Legacy Project (1)
      • : 기본 익히기(Boot 기반) (14)
    • ——————————————————————— (0)
    • ⁂ Error Note (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 자바공부
  • http에러메세지
  • 비트연산자 #코딩공부 #자바공부 #코딩 #자바 #프로그래밍 #개발자
  • 코딩 #코딩공부 #프론트앤드 #백앤드 #풀스택개발자
  • web.xml수정
  • 풀스택
  • 코딩공부
  • 객체지향프로그래밍
  • 코딩 #코딩공부 #상수 #리터럴 #형변환 #개발자 #자바 #자바공부 #자바독학
  • 코딩공부 #코딩 #자바 #자바독학 #자바공부 #개발자 #프론트앤드 #백앤드 #풀스택
  • ErrorPage
  • HTML공부
  • 연산자 #기본연산자 #코딩 #자바 #독학 #자바공부 #자바연산자
  • 백앤드
  • 프론트앤드
  • 코딩공부 #자바공부
  • httperror
  • 개발자
  • 자바
  • 코딩

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
김갱환

맨땅에 코딩

⁂ CSS/: 기본 익히기

[CSS] #3-3 레이아웃 3 : float 속성, clear 속성

2022. 8. 1. 16:22

1. float, 레이어를 배치하자

 

 한 웹페이지의 레이아웃을 정한다는 것은 위와 같은 속성들을 연합하여 사용한다는 뜻이다.

 

속성 설명
position 배치 방법을 지정  
float 레이어를 왼쪽 또는 오른쪽 위치 지정할 때 사용하며 수평을 기준으로 정렬한다.
요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치할 때 지정한다.
clear float 속성을 해제  
z-index 레이어 순서를 정함  

 

 이 중에서 position은 3-2에서 함께 알아보았고 이번 3-3에서는 float 속성을 알아보려 한다.

 

 float는 '뜨다'라는 단어이다.

 그래서 '웹 페이지에서 이미지와 텍스트를 어떻게 띄워서 배치할 것인가'라는 의미를 담아 사용하는 속성이며 흔히 '부유한다(=float)'라는 표현을 사용한다.

 한번 사용한 float 속성은 cleat 속성을 사용하여서 한 흐름을 마쳐야지 다음 요소들을 새롭게 float 할 수 있다.

 

 세부적인 내용들에 대해 하나씩 살펴보자.

 

 

2. 드디어 가로로 나열할 수 있어...

 

 지금까지 모든 요소들은 세로로, 수직적으로 쌓이는 형태로 출력이 되었다.

 이제 float 를 사용하면 수평으로 나열할 수 있게 된다.

 아래의 코드를 살펴보자.

<!DOCTYPE html>  
<html lang="ko">
    <head>
        <title>13_float.html</title>
        <style>
            div {border: 1px solid blue; width: 100px; height: 100px; float: left;}

            .box4 {float: right;}
        </style>
    </head>
    <body>
        <div>BOX 1</div>
        <div>BOX 2</div>
        <div>BOX 3</div>

        <div class="box4">BOX 4</div>
    </body>
</html>

 

 여기서 <style> 안에 있는 코드에 주목하자.

 <div>의 요소들에게 float 속성을 사용하여 1-3까지는 letf, 4는 right를 주었다.

 그러자 출력 결과는 다음과 같다.

이제 옆으로도 요소들을 나열하고 출력할 수 있다.

 

 이처럼 float 속성을 사용하면 그 속성값에 따라 요소들을 나열할 수 있다.

 

 

3. 레이아웃 나눠보기

 

 지금까지 배운 것들을 활용하여 아래처럼 웹사이트의 레이아웃을 나눠보고자 한다.

 

 

 먼저 가장 큰 테두리인 빨간 칸을 컨테이너(container)라고 명명하려 한다.

 그리고 헤더(header)와 푸터(footer) 사이의 공간을 이너(inner)라고 하려 한다.

 또 각각의 파란 네모 칸을 섹션(section)이라고 명명한다.

 

 우선 전체 레이아웃을 html 문서에서 구성해보려한다.

 아래의 코드를 살펴보자.

<!DOCTYPE html>  
<html lang="ko">
    <head>
        <title>14_layout.html</title>
        <link rel="stylesheet" href="reset.css">
        <style>
        
        </style>
    </head>
    <body>        
        <!-- 전체 레이아웃 구성하기 -->
        
        <div class="container">
            <header>Header</header>
            <div class="inner">
                <section>Section 1</section>
                <section>Section 2</section>
                <section>Section 3</section>
            </div>
            <footer>Footer</footer>
        </div>

    </body>
</html>

html 문서로 레이아웃을 만들었다

 정상적으로 출력이 잘 되었다.

 이제 한 칸씩 CSS로 레이아웃을 잡아보자!

 

 1) Container

 container 부분은 나누어져있지 않은 커다란 공간이다.

 그래서 전체 크기와 겉테두리만 잡으려고 한다.

 그리고 container의 공간이 전체 페이지의 가운데 정렬되어야하기 때문에 마진값을 auto로 주었다.

 

<style>
    .container{
        border: 2px solid blue;
        width: 900px;
        margin: auto;
    }
</style>

container 영역을 레이아웃하였다

 

 

 2) Header

 Header 영역은 Container 영역과 비슷하지만 칸의 높이와 안에 들어갈 글자를 가운데 정렬하는 작업을 추가했다.

 그리고 텍스트 줄간격(line-height)도 지정해주었다.

 

<style>
    /* 1) */
    .container{
        border: 2px solid red;
        width: 900px;
        margin: auto;
    }

    /* 2) */
    header{
        border: 2px solid green;
        height: 150px;
        width: 100%;
        line-height: 150px;
        text-align: center;
    }

</style>

 

header영역까지 만들었다.

 

 3) Inner와 Section1,2,3

 이제 Inner 영역을 만들려한다.

 각 Section 마다 테두리를 설정해주고 크기를 설정해준 뒤 float 속성을 부여했다.

        <style>
            /* 1) */
            .container{
                border: 2px solid red;
                width: 900px;
                margin: auto;
            }

            /* 2) */
            header{
                border: 2px solid green;
                height: 150px;
                width: 100%;
                line-height: 150px;
                text-align: center;
            }

            .inner section{
                border: 2px solid greenyellow;
                height: 300px;
                width: 300px;
                float: left;
            }

        </style>

 

 그런데..

 이대로 출력하니 결과가 이상하다.

 아래 사진을 보자.

Section 3 는 사춘기..

 

 왜 이런 현상이 생겼을까?

 Section 1, 2, 3이 가로로 다 들어가기엔 길이가 안맞는다는 뜻이다.

 

 "이상하다, 각각이 300씩이라서 3개 합치면 900인데.."

 는 테두리를 계산하지 않았다.

 각각의 테두리가 2px씩 들어가므로 총 12px이 추가가 되어야한다.

 

 위의 수정사항을 다시 적용한 코드는 아래와 같다.

 

<style>
    /* 1) */
    /*
    .container{
        border: 2px solid red;
        width: 900px;
        margin: auto;
    }
    */

    /* 4) */
    .container{
        border: 2px solid red;
        width: 912px; /* 각 section들의border 값까지 계산하여 다시 작성 */
        margin: auto;
    }

    /* 2) */
    header{
        border: 2px solid green;
        height: 150px;
        width: 100%;
        line-height: 150px;
        text-align: center;
    }

    .inner section{
        border: 2px solid greenyellow;
        height: 300px;
        width: 300px;
        float: left;
    }

</style>

편안...

 

 

 그런데!!

 페이지를 만들다보면 세부 내용에 따라 칸의 너비나 여러가지 값이 달라질 수 있다.

 그 때마다 계속 코드들을 수정할 수는 없다. 그래서 위의 진행과정처럼 전체적인 칸의 너비를 수정하는 것이 틀린 것은 아니지만 'box-sizing'이라는 명령어를 활용하는 방법이 있다.

 

 'box-sizing: border-box' 는 float 속성을 사용해서 가로로 나열할 때 선 굵기, 여백 등으로 바뀌는 부분들은 상위의 레이아웃인 container의 width값인 900px 안에서 해결하라는 코드이다.

 

 완성된 코드를 확인해보자.

 

<!DOCTYPE html>  
<html lang="ko">
    <head>
        <title>14_layout.html</title>
        <link rel="stylesheet" href="reset.css">
        <style>
            .container{
                border: 2px solid red;
                width: 900px;
                margin: auto;
            }

            header{
                border: 2px solid green;
                height: 150px;
                width: 100%;
                line-height: 150px;
                text-align: center;
            }

			.inner section{
                border: 2px solid greenyellow;
                height: 300px;
                width: 300px;
                float: left;
                box-sizing: border-box;
            }

        </style>
    </head>
    <body>
    
        <div class="container">
            <header>Header</header>
            <div class="inner">
                <section>Section 1</section>
                <section>Section 2</section>
                <section>Section 3</section>
            </div>
            <footer>Footer</footer>
        </div>

    </body>
</html>

깔끔쓰-

 

4) Footer

 이제 마지막으로 footer 부분을 만들려한다.

 footer 부분은 간단하게 테두리 선 굵기와 색깔 정도만 지정해주려고 한다.

footer {border: 5px solid orange; height: 100px;}

 

 이렇게 집어 넣으면 잘 나오겠지 했는데 읭?

 뭐가 이상하다.

 

어디 가니 푸터야..

 

 footer의 박스가 이상한 곳에 가있다.

 왜일까?

 위에서 잡았던 float 속성이 마쳐지지 않아서 그러하다.

 왜냐하면 float 속성은 이전 요소의 속성을 상속받는 특징이 있기 때문이다.

 

 지금 footer에게는 section에서 걸렸었던 'float: left;'라는 속성이 상속되어있는 상태이다.

 그래서 clear 속성을 사용하여(이 게시글 맨 위 상단의 내용을 다시 복기해보자) float 속성을 마친 후에 footer를 작업해야한다.

 이 때 left를 상속했기에 clear: left; 를 사용했으나 clear: both;를 사용해도 무방하다(왼쪽, 오른쪽 모두 없앤다는 뜻).

 

footer {border: 5px solid orange; height: 100px; clear: left;}

완벽쓰 ^_^

저작자표시 비영리 동일조건 (새창열림)

'⁂ CSS > : 기본 익히기' 카테고리의 다른 글

[CSS] #4-1 CSS의 display 알아보기  (0) 2022.08.02
[CSS] #3-4 레이아웃 4 : z-index 속성  (0) 2022.08.01
[CSS] #3-2 레이아웃 2 : position 속성(Static, Absolute, Relative, Fixed, Sticky)  (0) 2022.08.01
[CSS] #3-1 레이아웃 1 : 레이아웃 이해하기  (0) 2022.08.01
[CSS] #2-3 Reset(리셋)  (0) 2022.08.01
    '⁂ CSS/: 기본 익히기' 카테고리의 다른 글
    • [CSS] #4-1 CSS의 display 알아보기
    • [CSS] #3-4 레이아웃 4 : z-index 속성
    • [CSS] #3-2 레이아웃 2 : position 속성(Static, Absolute, Relative, Fixed, Sticky)
    • [CSS] #3-1 레이아웃 1 : 레이아웃 이해하기
    김갱환
    김갱환
    코딩의 코자도 모르는 이의 공부 기록장

    티스토리툴바