display속성

display속성

---

block-level과 inline-level의 특징을 결정짓는 속성.

1) display: block;

• Block-Level요소의 기본 값.

• 어떤 요소를 문단처럼 구성할 수 있도록 한다. (줄바꿈)

• width, height가 적용된다.

2) display:inline;

• Inline-Level요소의 기본값.

• 어떤 요소를 문장처럼 구성할 수 있도록 한다. (줄바꿈 안함)

• width, height를 적용할 수 없다.

3) display: inline-block;

• 크기 지정이 가능한 문장요소

4) display: none;

• 어떤 요소를 화면 표시하지 않도록 숨긴다.

응용1 : 링크의 영역을 확장하기 

1. <a> 태그에게 width, height를 부여하면 그 만큼 클릭 가능한 영역이 확장

2. <a> 태그가 inline-level이므로 display속성을 block으로 지정해야만 처리가 가능.

응용2 : 목록정의 요소

1. <ul>, <ol>에게 list-syle: none; padding: 0;  margin: 0을 부여하면 2중으로 중첩된 <div> 요소와 같이 초기화 된다.

2. 이후부터 <li> 요소의 display속성을 조절하여 메뉴를 배치할 수 있다.

float속성

---

박스(Block-Level)를 부모의 왼쪽이나 오른쪽에 고정시키고 문장을 그 옆으로 흐르도록 하기 위한 속성

적용가능한 값

left(왼쪽), right(오른쪽), none(해제), inherit(부모값 상속)

제약사항

• 새로운 문단을 시작하기 위해서는 이전 float를 off시켜야 한다.

• 부모요소가 float가 적용된 자식요소를 감싸지 못한다.

해결책

• 이전 float 속성을 해제.(마감제)

ㄴ부모요소가 끝나기 전(혹은 새로운 문단이 시작하기 전)

   float: none; clear:both가 적용된 Block-Level요소를 배치.

  a. 빈 <div>

  b. 부모의:after 가상 클래스를 사용해서 아래의 코드 적용

content: ' '; display: block; float: none; clear: both

특성

두 개 이상의 Block-Level요소에게 float를 연속적으로 적용하면 박스의 배치 효과