CSS / inline , block, inline-block

기본

    <div id = "div1">

    </div>
    <div id = "div1">
        
    </div>
    <div id = "div3">
        div3
    </div>

아무 디스플레이 속성도 없을 때 나타나는 영역, 서로 붙어서 세로로 나온다!

inline

#div1{
    width: 100px;
    height: 100px;
    background-color: aqua; /*영역 구분하기 쉽게 넣어준 크기와 색상*/
    display: inline;
}

#div2{
    width: 100px;
    height: 100px;
    background-color: bisque;
    display: inline;
}

display 속성을 inline으로 설정시 span처럼 됨! 길이상 div3은 제외했습니다!

--> inline, <span>, <a>, <em>같은 경우 저렇게 줄바꿈 없이 한 줄에 나오게 된다.

--> width, height 속성을 무시한다. 100px로 둘 다 줬음에도 불구하고 안에 들어있는 내용만큼의 크기만 나옴!

 

block

#div1{
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: block;
}

#div2{
    width: 100px;
    height: 100px;
    background-color: bisque;
    display: block;
}

공백 없이 세로로 배치

--> <div>, <p>, <h1>태그처럼 내가 한 줄을 모두 차지함! 

--> inline과 다르게  width, height속성을 무시하지 않는다.

(나중에 나올 margin, padding등 다른 속성도 무시하지 않을 예정)

inline - block

#div1{
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block;
}

#div2{
    width: 100px;
    height: 100px;
    background-color: bisque;
    display: inline-block;
}

 

inline-block 시 블럭이 생긴다! 기본적인 공백도 있음.

--> inline의 가로배치와 block의 스타일속성을 합친 것 같은 모양

--> block처럼 width와 height, margin, padding 속성 모두 따름.

--> <button>, <input>,<select>도 inline-block와 같은 속성.

float

#div1{
    width: 100px;
    height: 100px;
    background-color: aqua;
    float: left; /*왼쪽부터 가로배치*/
}

#div2{
    width: 100px;
    height: 100px;
    background-color: bisque;
    float: left;
}

float : left;

float : right;

--> 만약 공백없는 가로배치를 하고싶다면 float를 사용하면 된다.

--> left, right로 좌우 정렬 가능!