레이아웃 스타일(display , visibility)

레이아웃(layout)이란 : 사용 목적을 기반으로 시각적 효과를 구성하는 행위

 

display : 화면 표시나 형식에 대한 배치 지정

- 태그가 화면에 어떻게 보여질지 형식을 지정하는 속성

- block : 화면을 수직 분할(한 줄 차지)
      가로(width), 세로(height) 지정 가능

- inline : 화면을 수평 분할(디자인을 글자, 문자열로 취급)
      가로(width), 세로(height) 지정 불가능

- inline-block : inline처럼 수평 분할은 가능하되 block처럼 가로 세로 지정이 가능
      가로(width), 세로(height) 지정 가능

- none : 태그가 존재하지만 숨김. 화면에 보이지 않게 함

- flex : 태그 간의 간격을 유연하게 처리하는 방식
      태그의 정렬 방향 또한 유연하게 처리하는 방식

- grid : # 격자무늬 형식으로 화면을 쉽게 분할하는 형식

 

block 형식 요소를 inline 형식으로 변경

 

코드 실행 결과

 

 

inline-block, none 확인하기

- inline, inline-block은 String과 같은 글자형식으로 보면 됨
- html에서 글, 태그 사이 띄어쓰기나 엔터는 모두 띄어쓰기 1칸으로 인식됨

- inline-block 형식의 태그가 아래처럼 줄이 바뀐상태로 작성되어지면 태그 사이에 띄어쓰기 한 칸이 추가됨

 

코드실행결과

 

화면 영역 분할 영역 - 2분할

 

코드 실행 결과

 

화면 영역 분할 영역 - 3분할

 

 

코드 실행 결과

 

 

 

visibility : 태그(요소)를 보이게/ 투명하게 만드는 속성

- visible : 기본값, 태그가 보임

- hidden : 태그가 보이지 않지만, 태그가 차지하는 공간은 그대로 유지

- collapse : 주로 table에 관련 요소, 표의 행이나 열이 보이지 않고, 차지하는 공간도 사라짐

표 외의 요소에서는 hidden과 동일하게 동작

- inherit : 부모 태그의 visivility 값을 상속받음