06. [FE] CSS Display 디스플레이 요소

CSS의 디스플레이 요소에는 네가지 종류가 있다. 

1. inline
2. block
3. inline-block
4. flex

차례대로 살펴보자.

 

flex 기능 연습 사이트) 

https://flexboxfroggy.com/#ko

 

---

Display 요소

 

1. inline 요소

 

→ span 태그 / a태그

• 줄바꿈 X
• 계속 이어서 나란히 배치
• width, height 속성 지정 불가
• margin, padding-top, padding- bottom 등 모든 여백 간격지정 불가

 

2. block 요소

→ div 태그 / p 태그 /  h1 태그

• 줄바꿈 O
• 한 요소당, 한 줄 차지
• margin, padding 모든 여백 간격 지정 가능 

 

 

3. inline-block 요소

→ button 태그 / select태그

• 줄바꿈 X
• width,height 속성 지정 가능
• margin, padding 등 상하간격 지정 가능

 

4. flex 요소

→ ??????

• '축'을 기준으로 정렬하는 요소.
• 하나의 'flex-container', 이를 상속받는? flex-item 들로 구성
• flex-container : 부모 요소들
• flex-item : 자식 요소들(부모 요소로 부터 상속받음)

---

Position 

 1. Relative 

• 현재 좌표를 기준으로 위치를 계산함

ex)

position: relative

 

 2. Absolute 

• position static이 아닌(relative, absolute, fixed) 부모 태그를 기반으로 움직인다.
• Default 상태 :  가장 상위 태그인 body 태그가 기준이 된다. 
• width 값이 없는 경우 → inline 형태

 

 3. Fixed

• 레이아웃을 고정시킴
• 상위요소에 영향을 받지 않고 고정됨. (영향 X)
• width 값이 없는 경우 → inline 형태

 

---

CSS 심화

1. Transform

•  회전, 크기조절, 기울이기, 이동 3D 효과
• perspective? 사용

2. Transition

• 상태변화를 일으킴
• 애니메이션 효과 

• transition-property	적용할 속성이름
  transition-duration	애니메이션 재생시간
  transition-timing-function	가속도값
  transition-delay	delay 이후 동작시작

3. Animation

•