DAY-33. 레이아웃

🎨 2022-04-19

CSS 기초

❗ 수업을 듣고, 개인이 공부한 내용을 적은 것 이기에 오류가 많을 수도 있음

공백 삽입 -> &nbsp 이용

🔔img 수직 정렬

• vertical-align: middle; 사용
• 부모가 아닌 img에 직접 적용해야 함
• vertical-align은 테이블 셀 안이나 inline 요소에 쓰인다

🔔overflow

• overflow : visible
  • 부모의 범위를 넘어가더라도, 그대로 보여준다.
• overflow : hidden
  • 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리한다.
• overflow : scroll
  • 부모요소의 범위를 넘어가는 부분은 스크롤 바를 통하여 확인할 수 있게 한다.
  • 내용이 넘치지 않아도 스크롤바가 항상 보인다
• overflow : auto
  • 부모요소의 범위를 넘어가는 자식요소의 부분이 있을경우 해당 부분은 보이지 않도록 처리하고,사용자가 해당 부분을 확인 할 수 있도록 스크롤 바를 표시하여준다.
  • 내용이 잘릴 때만 스크롤바가 보인다
• overflow-x / overflow-y -가로부분의 넘치는 부분은 감추는 부분은 감추고, 세로 부분의 넘치는 부분은 그대로 보여주어야 할 때가 있다.그 때는 overflow-x와 overflow-y를 아래와 같이 사용하면 된다. #parent { overflow-x : hidden; overflow-y : visible }

overflow와 vertical-align 사용

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

🔔line-height

• line-height를 이용해 부모의 height크기를 자식에서 똑같이 해주면 텍스트가 중앙에 온다

navigation 생성

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.