display속성 값은 2가지로 나눌 수 있다.
1. 도형이나 이미지를 삽입된 부분 (block 속성)
2. 페이지의 제목, 내용, 글자로 입력이되는 모든부분 (inline 속성)
이러한 특징을 구분지어서 Css에서 다음과 같이 약속을 했다.
- 도형 이미지에는 display:block;
- 페이지의 글자로 이루어진 부분엔 display:inline; 을 설정해 주어야 한다.
하지만, 대부분 글자나 도형(이미지)에 사용하는 엘리먼트들마다 기본적인 속성이 다르다.
그래서 기본적인 설정에따르므로 우리는 굳이 설정을 안해도 되지만, 어떻게 쓰이냐에 따라서 우리가 임의적으로 부여 할 수 있다.
- block
(block의 요소 : div, p, form 등의 요소)
한 줄에 하나의 요소만 존재하고 주변 요소들은 모두 줄 바꿈 시켜버리는 속성을 갖고 있다.
- inline
(inline의 요소 : span, a 등의 요소)
한 줄에 여러개의 inline요소들이 줄 바꿈되지 않고도 존재할 수 있다. 이러한 특성상 margin, padding, width, height, offset(left, top, right, bottom)속성에 값을 지정할 수 없다.
따라서 자유로운 위치 값과 영역을 갖기 위해서는 display:block상태로 존재하여야 한다.
[예제 : 엘리먼트 div의 display의 속성 값을 block에서 inline으로 부여]
HTML
CSS
[ 실행결과 ]
그러면 이제, block과 inline의 특징을 한번 알아보자.
기본적으로 block은 도형 혹은 이미지를 활용할때의 설정 값으로 사용이 되어있다고 했다.
그래서 width(가로길이), height(세로길이)에 값을 부여할 수 있다.
왜냐? 도형을 사용하는데 길이/높이 설정을 해주어야하지 않는가?
그래서 기본값을 설정이되어있다는 것이다. 그리고 줄바꿈의 기능이 있다. 다르게 말하면, 한줄을 자신의 공간으로 사용한다는 의미이다.
예를들어 div 태그를 2개 소환했다고 해보자,
div의 공간이 2개 필요할것이다. 하나의 div태그당 가로의 길이가 하나의 div태그의 전체 가로 공간이 되는것이다. 그래서 그 옆자리 공간은 div태그의 공간이므로, 형제들은 줄바꿈 기능을 해서 그밑에 쌓이게된다. 이렇듯 사용하지 않는 공간이여도 형제들의 공간은 임의로 설정해주지 않는 이상 침범하지 않는다.
하지만, display의 inline값은 글자형식을 사용할때 부여하는 속성이므로, width와 height의 설정이 필요없지않는가?
그래서 display:inline에는 width와 height를 사용할 수 없다.
정리를 해보면,
- display:inline : 줄바꿈 기능이 없으며, width와 height의 설정을 제한한다.
- display:block : 줄바꿈 기능이 있으며, width와 height의 설정이 자유롭다.
하지만 이게끝이 아니다.
특이하게도 inline과 block형태를 특징을 갖고있는 녀석이 있다.
바로 inline-block의 속성 값이 있다.
- display:inline-block
1) inline의 특징: 줄바꿈 기능이 있다.
2) block의 특징: width와 height의 설정을 부여할 수 있으며(block기능)
그럼, 어떨 때 사용하는가?
웹 페이지의 제목이나 코드상에서 엘리먼트 a의 디자인을 설정 할 때(해당 목록들의 크기 설정이나 이미지 설정 시)즉, 텍스트들이 들어간 주변의 디자인의 크기 조정시에 width와 height의 값을 부여하려고 inline속성에 block속성을 첨부한거라고 생각하면된다.
그래서 inline의 줄바꿈기능에 block의 width / height의 설정 또한 가능한 것이다.
댓글 없음:
댓글 쓰기