CSS3 - CSS 스타일 - display 속성 변경 (23)

CSS3 - CSS 스타일 - display 속성 변경 (23)

오늘은 CSS3의 스물 세번째 내용으로 display 속성에 대해서 알아 보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - display 속성이란?

먼저 css에서 display 속성이란 html 태그 (요소)를 작성 할때 기본적으로 

블록태그, 인라인태그로 나누어지는 이러한 부분을 변경해 주는 속성 입니다.

예를 들어 css에서 인라인태그를 선택 후 display 속성으로 block라는 속성 값을 적용하게

된다면 인라인태그는 블록요소 배치가 되는 그러한 개념 입니다.

반대로 블록 태그를 선택후 inline을 적용 한다면 인라인요소 로 배치가 되겠죠?

css 스타일 - display 속성 사용법

display 속성 사용법은 위와 같습니다. 

자세한 설명은 위 주석에 표시를 해놓았는데요 참고 하시면 좋을 것 같네요. ^^

추가로 display 속성의 값은 위 두가지 만 있는 것은 아닙니다.

여러 가지가 있는데 전체적으로 위 두가지를 포함해 아래 표를 만들어 놓을 테니

보시고 한번씩 써보시는 것도 좋을 것 같습니다.

display : block	블록으로 변환
display : inline	인라인으로 변환
display : none	없는 것으로 간주
display : hidden	화면에서 감춘다.

<display 속성, 값 내용>

이렇게 위 처럼 사용하는 방법을 알아 보았는데 

이러한 css에서 display 속성은 왜 사용할까요?

이 전 포스팅 "레이아웃 기초" 에서 설명하였듯이 이번 포스팅 부터는

웹 페이지의 레이아웃을 작성할떄 사용되는 중요한 속성에 대해서 알아 보기로 했습니다.

위 display 속성은 웹페이지 레이아웃 작성시 태그의 인라인 요소나 블록요소를 

필요에 따라서 변경해 주는 것인데 말로 설명하는 것 보다 한번 보는게 좋겠죠?

css 스타일 - display 속성 예시

전형적으로 display 속성을 사용하는 한가지 예로 홈페이지 네비게이션바 를 설명 하도록 하겠습니다.

먼저 html 문서에 리스트 태그를 이용해서 아래와 같이 작성 하도록 하겠습니다.

위는 리스트(목록) 항목을 나타내는 데 사용되는 ul, li 요소로 기본적 기업 홈페이지에 들어가는

메뉴를 간략하게 적어 보았습니다.

하지만 위에서 요소를 그대로 웹 페이지에 출력 했을 시에는 위 오른쪽 이미지 처럼 

일렬로 나열 되게 되는데 생각했던 네비게이션바 와는 다른 모습으로 출력 되게 됩니다.

여기서 우리가 생각했던 네비게이션바 를 만들기 위해서는 태생적으로 블록 태그인 li 태그 (요소)

css의 display 속성을 이용해 인라인으로 변경 하면 아래와 같이 생각했던 네비게이션바 처럼

일렬로 정렬되게 됩니다.

<li 태그 요소에 display : inline 적용>

위 이미지 내용은 css에서 li 태그를 inline 으로만 바꾸어 놓은 상태 입니다.

위 와같은 상태에서는 이제부터 앞에서 배웠던 background(배경색),

border(경계선), margin(마진), padding(패딩) 등 여러가지 속성을 응용해서 조금더 

네비게이션바 처럼 간단하게 한번씩 만들어 보는게 좋을 듯 싶습니다.

(지금은 전체적으로 가볍게 하나씩 설명을 하지만 앞으로 남은 속성에 관련된 

포스팅이 끝나고 js, jQ 관련 포스팅을 마무리 짓고 나면 응용관련에 대해서 조금씩 포스팅 할

계획 입니다.  예를들면 자바스크립, 제이쿼리를 이용한 이벤트 등)

 여기까지 css의 display 속성이란 어떠한 것이며 사용은 어떻게 되는 가에 대해서 

 간략 하게 알아 보았는데 혹시나 모르는 부분이나 하다가 잘 안 풀리는 부분은 댓글 남겨 주시면 

 늦더라도 답변 드리겠습니다. ^^ 

이상 CSS3 - CSS 스타일 - display 속성 변경 (23)에

관련된 포스팅을 마치도록 하겠습니다.