CSS_display

display

• 요소의 레벨을 바꿔주거나 화면에서 사라지게 할 수 있는 속성
• 특이점 : 상속 안됨

display: inline;
display: block;

1. inline

• inline특성상 위 빨간 화살표만큼의 공간도 빈칸으로 적용이 돼서 위와같이 박스들이 띄워지게 된다.
• 이때는 그 요소들의 부모에 font-size: 0; 을 넣어서 빈칸을 없애면 된다.
• 주의) 모든 글씨들이 0이 되기 때문에 화면에 보여야 하는 글자들은 별도로 사이즈를 줘야 한다.

2. block

3. inline-block : inline의 옆으로 나열되는 특성(필요한 만큼만 영역 잡음) + block의 사이즈가 적용되는 특성

• ★카테고리상 inline에 속한다.
  --> block에서만 사용할 수 있는 margine: 0 auto가 사용이 안되고 text-align: center로 정렬을 해야 한다.
• 사이에 공백이 생기므로(inline특징) 잘 쓰지 않는다.
• inline 요소들은 컨트롤하기 힘드니까 잘 사용하지 않는다. 특히 글자마다 기준선이 다르기 때문에 가운데정렬하기 힘들다. (margin, padding이나 float나 flex로 조절하자. )

4. ★★none : 화면에 그려지지 않음.

• px도 먹지 않음. 투명이 아님. 아예 존재가 없는 거임. (해당 부분 은근 중요)

---

화면에서 사라지게 하는 속성

1. display : none
2. opacity : 요소를 투명하게 함
   • px 살아있고 눈에만 안보임
   • 단위 : 0~1실수 (0: 투명, 1: 기본값, 보임)
   • ★visibility와 차이점은 투명도 조절이 가능.(그래서 visibility를 잘 안쓰고 이 요소를 잘 씀)
   • 안에 있는 자식들도 같이 투명하게 되니 주의할 것
3. visibility : 요소를 투명하게 함 (잘 안씀)
   • px 살아있고 눈에만 안보임
   • visible : 기본값, 보임, hidden : 투명
     -> display는 아예 없는 거라 영역도 안잡고 opacity와 visibility는 영역을 잡고 눈에만 안보이게 하는 것.