css 4. block level / inline / inline-block

block level element

화면 전체를 사용하는 요소

ex.<h1><div> <ul> <p>

width와 height로 크기 조정가능하다.

 

스타일을 패딩과 마진, 보더 속성을 사용하여 디자인 할 수 있으며 다른 요소를 밀어낸다.

inline element

자기 자신의 부피, 컨텐츠만큼 사용하는 요소

ex.<img><span> <a><strong>

width와 height로 크기 조정을 할 수 없다.

 

패딩과 , 보더 속성을 자유롭게 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다.

 

해당 속성들의 상하 값이 다른 요소를 밀어내지 않는다.

inline-block element

 inline요소 block level 요소의 특성을 모두 가지고 있다. 

 inline 처럼 다른요소와 붙어있을 수 있고,

 

block level처럼 width, height, margin, padding 등 모든 값을 지정 가능하다.

 

*위와 같은 속성들은 display속성을 통해 변환이 가능하다.

+ display : none ;

->요소를 안 보이게 하는 value.

 

float property

.green-thing {
  float: left;
}

* float 속성을 통해 inline 성격을 부여할 수 있다.

 

중복되는 코드 제거하는 법

->콤마를 이용한다.

h1 , a {

         border : solid gray 5px ;

         }