23_10_12 CSS 공부정리

[코딩애플] HTML CSS 기초모듈

 

-이미지를 가운데정렬하는 코드

display:block; margin-left:auto; margin-right:auto;

-letter-spacing : 자간조절

-<strong>태그 : 자동으로 글자가 굵어짐.인라인 속성

-css적용 우선순위 : !important - inline style - id - class - tag

 

-box-shadow : 박스에 그림자를 주는 속성

    box-shadow: 10px 5px 5px black; (밑, 오른쪽, 흐릿함, 색)

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

box-shadow - CSS: Cascading Style Sheets | MDN

 

-레이아웃을 할때 가장 큰 박스를 container 혹은 wrapper 박스라고함.

-container박스를 만들때 width를 설정해서 최대크기를 만드는 경우가 많음.

 

-float 속성을 주면 박스가 붕뜨게됨.

    <div class="container">

        <div class="header"></div>

        <div class="left-menu"></div>

        <div class="right"></div>

        <div class="footer"></div>

    </div>

 

.left-menu {

    float : left;

    width: 20%;

    height : 400px;

    background: cornflowerblue;

}

.right {

    float : left;

    width : 80%;

    height : 400px;

    background : coral;

}

.footer {

    width : 100%;

    height: 100px;

    background-color: gray;

}

footer가 float된 상자 뒤쪽에 존재함.

-float이후에 { clear : both } 속성을 넣어주면 해결됨.

 

clear : both;후 정상작동.

 

-float를 쓰지않고 위와같이 하기 위해서 inline-block을 사용할 수 있음

-inline-block끼리 공백제거(줄바꿈도 없앰)

<div class="container">

        <div class="header"></div>

        <div class="left-menu"></div><div class="right"></div> // 이렇게 공백제거해야 inline-block효과가 나타남.

        <div class="footer"></div>

</div>

 

.left-menu {

    /* float : left; */

    display : inline-block;

    width: 20%;

    height : 400px;

    background: cornflowerblue;

}

.right {

    /* float : left; */

    display : inline-block;

    width : 80%;

    height : 400px;

    background : coral;

}

.footer {

    /* clear : both; */

    width : 100%;

    height: 100px;

    background-color: gray;

}

inline-block단점

1.태그사이 공백을 못씀

2.안에 내용을 쓰면 레이아웃이 망가짐

(baseline이 생기기 때문. baseline이 옆에 존재하면 inline-block요소들이 baseline위로 오려고함.)

 

이런식으로 baseline위로 박스가 올라가려함

실제 베이스라인 위로 올라간 왼쪽박스

-해결법 : { vertical-align : top } 으로 설정.

https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align

vertical-align - CSS: Cascading Style Sheets | MDN