[ 코딩 ] css display 속성

 

[ 코딩 ] css display 속성 알아보기

 

 

 

태그에 따라서 display 속성이 다르다.

 

 

그리고 display 속성에 따라서 화면에 나타나는 모습이 달라진다. 

 

 

display 속성 별 정의

 

 

 

 

display : none;

- 태그가 화면에 보이지 않게 해준다.

 

 

display : block;

- 태그가 블럭형식으로 보여진다.

행단위(가로) 전체를 공간으로 차지하고, 폭과 높이가 있다. 

 

 

display : inline;

- 태그가 인라인형식으로 보여진다. 

폭과 높이가 없고, 자리만 잡고 있는 상태이다.

 

 

display : inline-block;

- 태그가 인라인블럭형식으로 보여진다. 

이름그대로 인라인과 블럭의 성질을 섞어서 가지고 있다.

블럭과 동일하게 폭과 높이는 있지만, 인라인처럼 자리만 잡고 있다.

(행단위 전체를 공간으로 차지하지 않는다.)

 

 

그럼 예제를 통해서 하나씩 익혀보자. 

 

 

우선 아래와 같이 html 을 작성해준다.

 

 

위처럼 코드를 적어주고 실행을 시키면,

파우더블루 색의 테두리가 안녕하세요. 글자를 감싼 형태가 화면에 보여진다 .

 

 

이제 css를 실행시켜주는 style 태그 안에 display 속성을 하나씩 적용시켜보자. 

 

 

display: none;

 

 

 

style 태그에 display : none; 을 적어준 뒤

실행을 시키면 빈 화면이 나타난다. 

 

 

태그가 화면에 보이지 않게 해주는 게 바로 display none의 기능이다.

 

 

만약 빈 화면이 아닌 태그가 보인다면 오타가 났을 수 있으니 다시 확인해보기 바란다. 

 

 

 

 

 

 

display : block;

 

 

 

h1 태그는 기본 속성이 block이다

 

그래서 display: block;를 적어주지 않아도 위와 같이 나타난다. 

 

 

그래도 일단 디스플레이에 대해서 공부하는 중이기 때문에 

태그의 기본 속성이 어땠는지는 무시하고 

 

 

style 태그 안에 display : block ; 속성을 적어주면, 

 가로행 전체를 포함하게 된다.

 

 

위 실행화면 이미지와 같이 연파란색 테두리가 모두 h1의 자리가 된다. 

 

 

display : block;은 폭과 높이를 지정하지 않으면, 행단위를 전체적으로 차지하고,

폭(width)과 높이(height)를 주면 지정 된 값으로 변화된다.

 

 

 

 

 width: 200px; 

height: 200px;

 

적어주고 화면을 실행시켜주면 

테두리의 위치가 변경된 걸 확인 할 수 있다.

 

 

이처럼 display: block;은 폭과 높이를 지정할 수 있다.

 

 

display: inline;

 

 

 

display : inline; 은 폭과 높이를 지정해줘도 적용이 안된다. 

그냥 자리만 잡고 있다고 생각하면 된다. 

 

 

위 이미지를 보면 폭과 높이를 지정해줬는데 적용되지 않고, 

파란색 테두리가 글자만 딱 감싸고 있는 걸 볼 수 있다. 

 

 

 

display : inline-block;

 

 

 

 

display : inline-block; 은 inline과 block 속성을 결합했다고 생각하면 된다. 

자리는 inline처럼 잡히지만 block처럼 폭과 높이를 줄 수 있다. 

 

 

 

 

 

display: inline-block;  폭과 높이가 적용된 걸 확인할 수 있다.

 

 

한번 직접 실습해보면 이해가 더 쉬울 거다.