CSS 2일차(2)

레이아웃

블록요소 : 행을 전부 차지하고 있는 요소 / 다음 콘텐츠는 줄밖임 발생(div, p, pre, h...)
인라인요소 : 콘텐츠 부분만 영역을 차지하고 있는 요소 / 다음 콘텐츠가 바로 옆에 올 수 있음 / 단. 임의로 크기조절 안됨(span, lable, input, img, 글자...)

요소(element) : content + padding + border 
외부여백 : margin

 

width, height : 기본적으로 내용을 차지하는 컨탠츠영역의 가로, 세로 길이를 조절하는 데 사용

 

고정크기(px)

<style>
.size-test{
    border: 1px solid black;
}

#test1{
    width: 400px;
    height: 200px;
}
</style>
<div id="test1" class="size-test"></div>

 

 

가변크기(%, vh/vw)

<style>
    .size-test{
        border: 1px solid black;
    }

    #test2{
        width: calc(100% - 200px); /*계산값을 적용할 수 있다.*/
        height: 150px;
    }
</style>
<div id="test2" class="size-test"></div>

 

 

display

화면 배치 방법 변경

형식 : 선택자{display : inline | block | inline-block | flex;} 

block

• 한 줄을 전부 사용하기에 다음에 올 그림, 텍스트, 표 등은 다음 줄에 배치된다. 
• 크기를 변경할 수 있다.

inline

• block과 다르게 같은 줄에 사용할 수 있다.
• 크기를 변경할 수 없다.

inline-block

• inline의 장점인 같은 줄에 배치와 block의 장점인 크기 변경을 동시에 사용한다.
• 보통 inline-block을 많이 사용한다.

<style>
    .display-test{
        border: 1px solid black;
        width: 150px;
        height: 150px;
    }

    .red{
        background: red;
    }

    .green{
        background: green;
    }

    .blue{
        background: blue;
    }

    .inline{
        display: inline; /*inline요소는 크기조절 x*/
    }

    .inline-block{
        display: inline-block; /*크기조절 가능, 옆에 다른요소가 올 수 있음*/
    }
</style>
<h4>display : inline</h4>
<div class="display-test inline red">첫번째</div>
<div class="display-test inline green">두번째</div>
<div class="display-test inline blue">세번째</div>

<h4>display : inline-block</h4>
<div class="display-test inline-block red">첫번째</div>
<div class="display-test inline-block green">두번째</div>
<div class="display-test inline-block blue">세번째</div>

<h4>display : block</h4>
<div class="display-test red">첫번째</div>
<div class="display-test green">두번째</div>
<div class="display-test blue">세번째</div>

 

display : inline

첫번째

두번째

세번째

display : inline-block

첫번째

두번째

세번째

display : block

첫번째

두번째

세번째

 

position

상대위치(relative)와 절대위치(absolute)

relative

• 요소를 기본위치 상대적으로 이동
• 이동후에도 원래 자리공간은 그대로 차지함
• 주로 자식 absolute요소의 기준점을 만들기 위해 사용

absolute

• 요소를 가장 가까운 position 지정 조상요소(relative, absolute, fixed, sticky...) 기준으로 위치 설정
• 지정된 조상이 없다면 html 기준으로 위치 설정
• 자신이 차지하던 공간을 무시하고 레이아웃에서 빠짐

<style>
    .positioning{
        border: 1px solid black;
    }

    .outer{
        position: relative;
        border: 1px solid red;
    }

    #first{
        width: 300px;
        height: 300px;
        background: yellow;
    }

    #second{
        width: 200px;
        height: 200px;
        background: teal;
        position: absolute; /*내가 원하는 위치에 두기(절대값 위치 조정)*/
        left: 50px;
        top: 50px;

    }

    #third{
        width: 100px;
        height: 100px;
        background: pink;
        position: absolute;
        top: 100px;
        left: 100px;
    }
</style>
<div class="outer">
    <div class="positioning" id="first">첫번째 자식 요소</div>
    <div class="positioning" id="second">두번째 자식 요소</div>
    <div class="positioning" id="third">세번째 자식 요소</div>
</div>

첫번째 자식 요소

두번째 자식 요소

세번째 자식 요소

 

fixed

• 브라우저 화면(뷰 포트)을 기준으로 위치가 고정됨
• 스크롤 시에도 항상 같은 위치값을 가짐
• 레이아웃에서 제회(absolute와 동일하게 원래 공간 차지 x)

<sytle>
    #fixed-area{
        width: 70px;
        height: 70px;
        background: rgb(174, 183, 233);
        font-size: 24px;
        font-weight: 900;
        color: azure;
        border: none;
        text-align: center;
        line-height: 70px;
        border-radius: 50px;
        position: fixed;
        right: 20px;
        bottom: 20px;
    }
</style>
<div class="positioning" id="fixed-area">문의</div>

html 삽입이 안되지만, 요즘 AI챗봇을 브라우저에 넣어 상담을 도와주는 기능이 추가하는 홈페이지들이 늘어났기에 비슷하게 틀만 제작했다.

float

• 이미지 주변에 텍스트를 감싸기 위해서 만들어진 속성
• 요소를 왼쪽 또는 오른쪽으로 띄어서 배치
• 뒤에 오는 콘텐츠는 띄어진 요소를 피해 흐름을 따라서 배치

<style>
    .float-test{
        border: 1px solid black;
        width: 70px;
        height: 30px;
        float: left;
    }

    .clearfloat{
        clear: both;
        /* clear: left;
        clear: right; */
    }
</style>

<div class="float-test">요소1</div>
<div class="float-test">요소2</div>
<div class="float-test">요소3</div>
<div class="float-test">요소4</div>
<div class="float-test">요소5</div>

<br clear="both">

요소1

요소2

요소3

요소4

요소5