CSS 레이아웃

div태그로 공간 나누기

    ● 일단 div태그로 나누자

        ○ 유지보수가 쉬워짐

        ○ 협업이 쉬워짐

        ○ class와 id이름은 직관적으로 넣자(명사+명사 형태로)

inherit

    ● 자식태그는 부모태그의 스타일 속성을 따라감

px,em,rem

    ● 일반적으로 16px = 1em = 1rem

    ● 부모태그에게 font-size 속성이 있으면, 그 속성을 1em으로 계산함

    ● rem은 16px로 설정되어있음

    ● font-size같은 경우는 rem으로 해줘야함

        ○ 크롬브라우저에서 글꼴크기를 변경하면 px은 작동되지않음(크기가 변하지 않음)

    ● 일반적으로 px이 가장 많이 사용됨

레이아웃 만들기- display_inline

   

.container {
    width: 100px;
    height: 600px;
    border: 1px solid black;
    font-size: 0px;
}

p {
    margin: 0px;
}

.top {
    background-color: red;
    width: 400px;
    height: 200px;
}

.left {
    background-color: blue;
    width: 200px;
    height: 200px;
    display: inline-block;
    vertical-align: top;
}

.right {
    background-color: green;
    width: 200px;
    height: 200px;
    display: inline-block;
}

.bottom {
    background-color: purple;
    width: 400px;
    height: 200px;
}

    ● 공간과 공간사이 여백때문에 container에 font-size: 0px;

    ● 상자가 밑으로 흘러 내려오는것을 막기위해 left에 vertical-align: top;

레이아웃 만들기- float

.left {
    background-color: blue;
    width: 200px;
    height: 200px;
    float: rigth;
}

.right {
    background-color: green;
    width: 200px;
    height: 200px;
    float: rigth;
}

.bottom {
    clear: both;
    background-color: purple;
    width: 400px;
    height: 200px;
}

    ● float : none은 다 1층에 존재하는데 float 에 right나 left를 부여하게 되면 2층으로 올라감

    ● bottom에 clear:both;

레이아웃 만들기- flex

<div class="container">
        <div class="top"></div>
        <div class="flexBox">
            <div class="left">
            </div>
            <div class="right">
            </div>
        </div>
        <div class="bottom">
        </div>
    </div>

.flexBox {
    display: flex;
}

    ● html 문서에 right, left를 div로 묶어서 css적용

레이아웃 만들기- grid

.container {
    width: 100px;
    height: 600px;
    border: 1px solid black;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "top top"
        "left right"
        "bottom bottom";
}

p {
    margin: 0px;
}

.top {
    background-color: red;
    width: 400px;
    height: 200px;
    grid-area: top;
}

.left {
    background-color: blue;
    width: 200px;
    height: 200px;
    grid-area: left;
}

.right {
    background-color: green;
    width: 200px;
    height: 200px;
    grid-area: right;
}

.bottom {
    background-color: purple;
    width: 400px;
    height: 200px;
    grid-area: bottom;
}

폰트를 꾸며주는 css속성들

    ● font-style : normal: 기본, italic: 약간 옆으로 누움

    ● font-weight : lighter(100), normal(400), bold(700), bolder(900)

    ● font-variant: 글자를 소문자로 바꾸거나, 대문자로 바꿈

    ● font-size : px, em, rem

    ● line-height : 줄간격

    ● font-family: 글꼴, 제 앞에 글꼴이 적용되고 없다면 다음꺼 없다면 다음꺼 순으로 적용됨

공간을 보여하는 css속성들

    ● margin: 박스 바깥의 공간

    ● padding: 박스 안의 공

margin collaption

    ● 위의 margin bottom과 아래의 bottom top이 겹치는 현상

    ● 수치가 다르다면 큰 값으로 적용받음

    ● margin 사이에 시각적인 효과가 있다면 마친겹침현상을 해결할 수 있음