Display 프로퍼티

-. display 프로퍼티

layout 정의에 자주 사용되는 중요한 프로퍼티이다. (교재의 내용이 어려워서 다른 곳에서 공부를 했다.)

block : 요소 앞뒤로 줄바꿈 된다.

inline : 요소 앞뒤로 줄바꿈이 되지 않는다.

lnline-block : 박스 모양이 inline 처럼 옆으로 늘어선다.

none : 박스가 생성되지 않습니다.

 

-. block 레벨 요소

• div (division) : 순수 컨테이너로서 아무것도 표현하지 않지만 class 나 id 속성으로 꾸미기 쉽도록 돕는 태그
• h1~h6 : 제목 태그
• p (paragraph) : 단락을 나누는 태그
• ol (ordered list) :  순서가 있는 리스트 / 앞에 숫자가 붙는 태그
• ul (unordered list) : 순서가 없는 리스트 / 앞에 리스트 점이 붙는 태그
• li : 목록의 항목을 나타내는 태그 / ol 이나 ul, menu 안에 위치해야한다
• hr : 이야기 장면 전환, 구획 내 주제 변경 등 문단 레벨 요소에서 주제의 분리를 나타내는 태그
• table : 행과 열로 이루어진 표를 나타내는 태그

->

table tag 예시

• form : 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타내는 태그

->

form 태그 예시

 

-. inline 레벨 요소

• span : div와 매우 유사하지만 인라인 태그
• a (앵커) : href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 다른 URL로 연결할 수 있는 하이퍼링크를 제조하는 태그
• strong
• img : 중대하거나 긴급한 컨텐츠를 나타내는 태그
• br : 줄바꿈 태그
• input : 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성하는 태그

->

input 태그 예시

• select : 옵션 메뉴를 제공하는 컨트롤을 나타내는 태그

->

select 태그 예시

• textarea : 멀티라인 일반 텍스트 편집 컨드롤을 나타내는 태그

->

textarea 태그 예시

• button : 클릭 가능한 버튼을 나타내는 태그

 

-. inline-block 레벨 요소

inline 레벨 요소와 같이 한 줄에 표현되면서 width,height,margin 프로퍼티를 모두 지정할 수 있다.

 

inline-block 예시

-. visibility 프로퍼티

visibility : visible - 해당 요소를 보이게 한다

               hidden - 해당 요소를 보이지 않게 한다

               collapse : table 요소에 사용하며 행이나 열을 보이지 않게 한다

               none : table 요소의 row 나 column을 보이지 않게 한다

 

-. opacity 프로퍼티

0.0~1.0 의 값을 입력하면 0.0은 투명 1.0은 불투명을 의미한다