🤮 코딩초짜 코칭 프로젝트 - (4) 레이아웃1

들어가기

• 화면 레이아웃 그리기 (css)
• 클릭할 수 있는 글자 만들기 (a 태그)

이전 수업에서 변화를 준 부분

• 이론 보다 응용을 전면으로
• 무엇을 구현할지(=왜 필요한지) 중심

---

전체화면 잡기

• div는 화면 구성 가장 기본단위.
• className : 화면에 이름을 부여해서 데려와 꾸밀 수 있게 설정.

• width, height
  • vh, vw로 설정하면 화면대비 비율로 설정가능
  • %로 설정하면 부모대비 비율로 설정가능
• margin : 좌우위아래 여백 설정
• border : 테두리 설정
• barground-color : 배경색 설정

---

위-중간-아래 나누기

---

왼쪽-중간-오른쪽 나누기

• display : div의 성격을 결정함.
  • block : 아웃싸이더 (width 전부 차지)
  • inline : 인싸 (width 설정 불가)
  • inline-block : 함께 그리고 또 따로 (width 설정 가능)

---

나가기

• 이전 수업보다 직관적이었다는 평가
• 이전 수업들에도 비슷한 방식으로 적용해서 리뉴얼 해야지.
• 다음 수업에는 예시 디스플레이를 줘서 형이 직접 만들어보고,
• 그리고 붙일 기능들 리스트업해서 붙여가는 식으로 적용하면 될 듯.