(CSS) 박스

박스 모델(Box Model)

• 모든 HTML 요소는 박스 모양으로 구성
• 박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함

내용(content)

• 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분

패딩(padding)

• 내용과 테두리 사이의 간격
• padding-top, padding-right, padding-bottom, padding-left
• padding: 위 오른쪽 아래 왼쪽순으로 설정

CSS
    #padding1{ padding: 10px 30px 20px 40px; }
    <!-- 위 10px, 오른쪽 30px, 아래 20px, 왼쪽 40px -->

    #padding2{ padding: 20px 30px 40px; }
    <!-- 위 20px, 오른쪽 왼쪽 30px, 아래 40px -->

    div#padding{ padding: 30px 50px; }
    <!-- 위 아래 30px, 오른쪽 왼쪽 50px -->

    div#padding{ padding: 20px; }
    <!-- 위 오른쪽 아래 왼쪽 20px -->

HTML
    <h2>패딩</h2>
    <div id="padding1">Lorem ...</div>
    <div id="padding2">Lorem ...</div>
    <div id="padding3">Lorem ...</div>
    <div id="padding4">Lorem ...</div>

 

div 안쪽 content와 테두리의 공백이 지정값으로 변경되는걸 확인할 수 있다.

 

테두리(border)

• 내용(content)과 패딩(padding) 주변을 감싸는 테두리
• border-style(테두리 모양), border-color(테두리 생상), border-width(테두리 두께), border(한꺼번에 설정)

CSS
        div{
            width: 200px;
            height: 100px;
            margin: 15px;
            border-width: 5px;
            color: black;
        }
        #border1 { border-style: solid; }
        #border2 { border-style: dotted; }
        #border3 { border-style: dashed; }
        #border4 { border-style: double; }
        #border5 {
            border-color: gold;
            border-top-style: dotted;
            border-right-style: solid;
            border-bottom-style: dashed;
            border-left-style: double;
        }
        #border6 { border: 3px dotted red; }
        
HTML
    <h2>테두리</h2>
    <div id="border1"></div>
    <div id="border2"></div>
    <div id="border3"></div>
    <div id="border4"></div>
    <div id="border5"></div>
    <div id="border6"></div>

 

div 의 테두리 색깔이나 스타일을 지정해 줄 수 있으며 상하좌우 방향만 선택하여 값을 지정할 수 있다.

마진(margin)

• 테두리(border)와 이웃하는 요소들 사이의 간격
• 마진은 눈에 보이지 않음
• 세로 겹침 현상이 나타남

✅ 세로 겹침 현상

• 세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘중 큰 값을 선택하는 현상

CSS
    #margin1{ margin:30px 50px 30px 50px; }
    #margin2{ margin:30px 50px; }
    #margin3{ margin:50px; }
    #margin4{ margin:30px 5px 10px; }
    #margin5{ margin:30px auto; }

HTML
    <div id="margin1"></div>
    <div id="margin2"></div>
    <div id="margin3"></div>
    <div id="margin4"></div>
    <div id="margin5"></div>

다음 태그와의 거리를 지정해주며 좌우 값에 auto를 지정할 경우 자동으로 가운데로 맞춰준다.

박스사이징(box-sizing)

• width, height 값에 padding, border 영역은 포함되지 않음
• 만약 width가 100%로 설정되는 경우 padding이나 border 속성을 추가하면 안됨
• box-sizing 속성값을 border-box로 설정하면 width와 height값에 padding과 border를 포함

CSS
    div{
    width: 300px;
    height: 150px;
    margin: 10px;
    padding: 30px;
    border: 3px solid red;
    }
    #boxsizing1{ box-sizing: content-box; }
    #boxsizing2{ box-sizing: border-box; }

HTML
    <h2>박스사이징</h2>
    <div id="boxsizing1">box-sizing = 'content-box'</div>
    <div id="boxsizing2">box-sizing = 'border-box'</div>

content-box는 width와 height값에 border와 padding이 포함이 안되어 크기가 크고 border-box는 포함을 하기 때문에 content-box에 비해 작은 것을 확인할 수 있다.

CSS 디스플레이

• 웹 페이지의 레이아웃을 결정하는 속성
• block, inline, inline-block, none
  ✅ visibility: hidden; -> visibility: visible;

CSS
    div{
        background-color: deepskyblue;
        border: 3px solid red;
        margin-bottom: 30px;
    }
    p#none{display:none;}
    p#hidden{visibility: hidden;}

HTML
    <h2>디스플레이</h2>
    <div>
        <p>display 속성값을 none으로 설정</p>
        <p id="none">display 속성값을 none으로 설정</p>
    </div>
    <div>
        <p>visibility 속성값을 hidden으로 설정</p>
        <p id="hidden">visibility 속성값을 hidden으로 설정</p>
    </div>

display: none은 위치의 자리마저 사라지는 속성이지만 visibility: hidden은 눈에 보이지 않지만 실제로 자리는 차지한다.

 

CSS 폼

• 폼 요소의 스타일 설정

HTML

    <h2>폼</h2>
    <form action="#">
        <p>아이디: <input type="text" id="userid" class="input" maxlength="20" placeholder="아이디를 입력하세요"></p>
        <p>비밀번호: <input type="password" id="userpw" class="input" maxlength="20" placeholder="비밀번호를 입력하세요"></p>
        <p>직업: 
            <select>
                <option value="프로그래머">프로그래머</option>
                <option value="디자이너">디자이너</option>
                <option value="학생">학생</option>
                <option value="유튜버">유튜버</option>
                <option value="공무원">공무원</option>
            </select>
        </p>
        <p><textarea id="content"></textarea></p>
        <p class="center"><button class="btn">회원가입</button></p>
    </form>

CSS

.input{
    box-sizing: border-box;
    width: 100%;
    background-color: gold;
    padding: 10px 20px;
    margin: 5px 0;
}

input[type="text"] {
    border-radius: 15px;
}

input[type="text"]:focus {
    background-color: greenyellow;
    border: 3px dotted black;
}

input의 type을 선택할 수 있으며 :focus를 이용하여 사용자가 해당 박스를 입력중 일때 스타일도 지정할 수 있다.

select {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    background-color: pink;
    margin: 5px 0;
    border: 2px solid deeppink;
}​

select 박스안의 스타일까지 함께 바꿔준다.

textarea#content{
    box-sizing: border-box;
    width: 100%;
    height: 200px;
    resize: none;
    font-size: 20px;
}

텍스트 박스의 크기를 지정하고  resize: none으로 사용자가 사이즈 조정을 못하게 한다.

button.btn{
    width: 150px;
    background-color: seagreen;
    color: white;
    padding: 12px 25px;
    cursor: pointer;
    border: none;
}

버튼 태그에도 스타일을 줄 수 있으며 cursor: pointer를 이용하면 마우스가 위에 있을 때 클릭 버튼으로 활성화 된다.

CSS Position

• 요소의 위치를 결정하는 방식을 설정

정적 위치 지정방식

• static position 기본값
• HTML 요소의 위치를 결정하는 기본적인 방식
• 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식

상대 위치 지정방식

• relative position
• HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정 하는 방식
• top, left, right, bottom 속성값을 사용하여 재설정

CSS
    div{
        width: 200px;
        padding: 20px;
    }
    .relative1{
        background-color: deeppink;
    }
    .relative2{
        position: relative;
        background-color: deepskyblue;
        left: 200px;
        top: 100px;
    }
    .relative3{
        position: relative;
        background-color: gold;
        right: 100px;
        bottom: 50px;
    }

HTML
    <h2>상대 위치 지정 방식</h2>
    <div class="relative1">상대 위치 지정 방식1</div>
    <div class="relative2">상대 위치 지정 방식2</div>
    <div class="relative3">상대 위치 지정 방식3</div>

relative를 이용하면 위치를 직접 지정해 줄수 있으며 상위 객체의 기준으로 위치를 지정한다.

고정 위치 지정방식

• fixed position
• 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
• 뷰포트를 기준으로 위치를 설정하는 방식
• top, left, right, bottom 속성값을 사용할 수 있음

CSS
#fx{
    position: fixed;
    width: 100px;
    height: 200px;
    background-color: gold;
    right: 10px;
    bottom: 10px;
}

HTML
    <h2>고정 위치 지정 방식</h2>
    <div id="fx"></div>
    <div id="content">
    	<p>Lorem ... </p>
        <p>Lorem ... </p>
        ...
        <p>Lorem ... </p>
    </div>

fixed를 이용하면 화면에 변화를 주어도 사용자 화면 위치에서는 변화가 없는것을 확인 할 수 있다.

부모태그를 이용한 고정 위치 지정방식

• sticky position
• fixed가 브라우저 화면의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대 위치값을 사용하는 방식
• 익스플로러에서는 작동하지 않음

CSS
        .header{
            height: 80px;
            background-color: gold;
        }

        .container{
            display:flex;
            flex-flow: row nowrap;
        }

        .content{
            box-sizing: border-box;
            width: 80%;
            height: 800px;
            background-color: deepskyblue;
        }

        .sidebar{
            position: sticky;
            box-sizing: border-box;
            width: 20%;
            background-color: deeppink;
            height: 400px;
            top: 0; /* 상위 부모 컨테이너의 가장 상단에서부터 적용 */
        }

        .footer{
            background-color: yellowgreen;
            height: 200px;
        }

HTML
    <header class="header">헤더</header>
    <main class="container">
        <section class="content">메인 컨텐츠</section>
        <aside class="sidebar">Sticky 적용하기</aside>
    </main>
    <footer class="footer">푸터</footer>

 

 

부모태그의 절대위치값이기 때문에 부모태그가 아직 상단에 없거나 하단에 끝이나면 위치 변환이 없다.

절대 위치 지정방식

• absolute position
• 뷰포트를 기준으로 위치를 설정하는 방식
• 조상 요소를 기준으로 위치를 지정할 수 있음
• 조상 요소를 가지지 않으면 body 요소를 기준으로 위치를 결정
• 조상요소를 기준으로 위치를 지정하려면 조상요소는 반드시 정적 위치 지정 방식이 아니여야 함
• top, left, right, bottom 속성값을 사용할 수 있음

CSS
    #wrap{
        position: relative;
        width: 500px;
        height: 500px;
        border: 3px solid red;
    }
    .box{
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: deeppink;
    }
    #ab1 { top: 0; right: 0; }
    #ab2 { bottom: 0; left: 0; }
    #ab3 { bottom: 0; right: 0; }
    #ab4 { top: 100px; left: 150px; }

HTML
    <h2>절대 위치 지정 방식</h2>
    <div id="wrap">
        <div class="box" id="ab1"></div>
        <div class="box" id="ab2"></div>
        <div class="box" id="ab3"></div>
        <div class="box" id="ab4"></div>
        <div class="box" id="ab5"></div>
    </div>

relative값을 가진 부모에서 절대 위치를 갖게된다.

z-index

• HTML 요소의 위치를 설정하게 되면 위치 밒 방식에 따라 요소가 겹칠 수 있음
• 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
• 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됨

CSS
    div#wrapper { position: relative; }
    div.box {
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        font-size: 25px;
    }
    #b1{
        left: 50px;
        top: 50px;
        background-color: deeppink;
        z-index: 10;
    }
    #b2{
        left: 120px;
        top: 70px;
        background-color: gold;
        z-index: 100;
    }
    #b3{
        left: 70px;
        top: 110px;
        background-color: greenyellow;
        z-index: 5;
    }

HTML
    <h2>z-index</h2>
    <div id="wrapper">
        <div id="b1" class="box">1번째 div</div>
        <div id="b2" class="box">2번째 div</div>
        <div id="b3" class="box">3번째 div</div>
    </div>

z-index의 값 순서대로 객체가 쌓이는것을 확인 할 수 있다.

float

• HTML 요소가 주변(수형으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 사용
• float를 적용받은 요소의 다음에는 나오는 모든 요소들이 끌어올려짐
• float를 적용받은 요소의 방향을 결정(left, right)
• 컨텐츠 크기 만큼만 영역을 설정(블록)
• float를 적용받은 요소는 다음 요소보다 위쪽에 위치(배경보다 위)

CSS
    img {
        float: left;
        margin-right: 20px;
    }

HTML
    <h2>float1</h2>
    <img src="./bus.png" alt="버스">Lorem ...

float으로 요소의 방향을 정하고 나머지 요소를 옆으로 끌어 올린다.

 

CSS
    #box1{
        padding: 20px;
        background-color: gold;
        float: left;
        margin-right: 20px;
    }
    #box2{
        padding: 20px;
        background-color: deeppink;
        float: left;
        margin-right: 20px;
    }
    #box3{
        padding: 20px;
        background-color: deepskyblue;
        float: left;
    }
    #box4{
        padding: 20px;
        background-color: greenyellow;
        float: right;
    }

HTML
    <h2>float2</h2>
    <div id="box1">박스-1</div>
    <div id="box2">박스-2</div>
    <div id="box3">박스-3</div>
    <div id="box4">박스-4</div>

여러 요소가 같은 방향을 지정 받으면 순서대로 한줄로 정렬하게 된다.

clear

• float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
• float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듬
• clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left, right, both)