HTML-10일차 display

 

display

1. display : block 의 특징

-width ,height 속성이 적용된다.

- 연속으로 사용 할 경우 세로 정렬이 된다.

- 가로 값을 넣어주지 않으면 현재 웹사이트의 길이에 맞춰진다.

만약에 감싸는 부모 태그가 있다면 그 부모태그의 가로값으로 설정된다.

- 세로 값을 넣어주지 않으면 태그안의 내용물에 따라 자동으로 늘어나거나 줄어든다.

2. display : inline 의 특징

- width, height 속성이 적용되지 않는다.

- 연속으로 사용 할 경우 가로 정렬이 된다.

3. display : inline-block 의 특징

- width, height 속성이 적용된다.

- 연속으로 사용 할 경우 가로 정렬이 된다.

- margin:0 auto로 중앙정렬 되지 않는다.

4. display : none 의 특징

- 대상 태그를 웹사이트에서 사라지게 한다.

 

* img 태그와 같이 margin:0 auto와 text-align:center 로도 중앙정렬이 안될 경우 <div>태그와 같이 display:block 속성을 가진 태그로 감싸는 방법도 있지만 img 속성에 display:block를 입력하여 display 속성을 변경하여 적용한다. 하지만 display 속성을 변경하여도 해당 태그의 고유 속성은 변경되지 않고 배치 또는 width값height값 그리고 margin:0 auto 와 같은 부분에만 영향을 준다.