1. display

페이지의 레이아웃을 결정하는 요소이다.

모든 요소들은 이 속성을 암묵적으로 가지고 있다. 굳이 직접 표시하지 않아도, inline/block 속성을 가지며 이 속성은 html 자체에 내포되어 있다.

• block display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한줄을 차지함 width,height,margin,padding 속성이 모두 반영됨 ex) <div> , <p> , <h1>

div,span{
  width: 30px;
  height : 25px;
  margin : 20px;
}

div{
  background : red;
  display : block;
}

span{
  background : Blue;
  display : block;
}

/* div도 한줄에 여러개가 표시됨 */

• inline 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됨 width,height 속성을 지정해도 무시됨 ex) <span> , <a> , <em>

div,span{
  width: 30px;
  height : 25px;
  margin : 20px;
}

div{
  background : red;
  display : inline;
}

/* inline은 컨텐츠 자체만을 꾸며준다, width,heigh를 무시하고 안에 있는 내용의 크기만큼만 변경 */
/* inline은 컨텐츠 내용 */

• inline-block display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됨 but inline 엘리먼트에서 불가능하던 width, height, margin, padding 속성의 상하 간격 지정이 가능해짐 ex) <button>, <input>, <select>

div,span{
  width: 30px;
  height : 25px;
  margin : 20px;
}

div{
  background : red;
  display : inline-block;
}

/* inline-block은 안의 컨텐츠 내용의 크기와 상관 없이
 지정한 크기 width,height에 맞춰서 표기  */
/* inline-block은 상자 */

• float floats는 띄운다는 의미로 페이지에서 이밎와 텍스트를 인라인으로 어우러지게 할 수 있는 기능이다. float 속성을 이용하면 기본적인 문서 배치 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말한다. 신문을 보면 float 속성 처럼 레이아웃을 짠 듯한 형태로 되어 있는 경우가 많다.

img{
  float : left;
  margin : 20px;
}

clear