- 넷플릭스 클론코딩을 진행하며, 어려웠던 부분이나 새로 알게된 개념, 클론코딩 순서를 기록하고자 합니다.
🔶 'display: flex' 속성: 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수 있고, 크기와 위치를 자동으로 지정한다!!
🔶 css 단위:
- px: 절대 단위
- em: 상대적인 단어/ 상위 요소의 폰트 사이즈를 기반으로
- rem: html 루트 요소의 폰트 사이즈가 계산의 기반값임/ 웹 브라우저의 폰트 사이즈를 기반으로 한 상대적인 사이즈/ 웹 브라우저마다 다른 기본 폰트 사이즈에 대응 가능
-> rem이나 px 많이 사용 함!
🔶 position: 요소가 배치되는 방식을 결정/ 기본값: static
- relative: 원래 위치를 기준으로 한 상대적인 위치/위, 아래, 양 옆의 위치 지정가능
- absolute: 첫번째 상위 요소를 기준으로 배치
🔶 'align-items'와 'justify-center'
- align-items: 세로축
- justify-center: 가로축
🔶 요소 나란히 배치하기
-> 위와 같이 block형태로 나오는 dispay를 해결하기 위해서....... 로그인 버튼과 언어선택 select태그를 모두 감싸는 div에 display: flex 속성을 넣어주었더니 해결되었다.
🔶 문서 수평으로 정렬할 때!!
-> 부모 요소에 이렇게 text-align: center 해줬더니 바로 해결....
-> 이거 자꾸 해결이 안되어서 애 먹었다..
🔶 text-align, justify-content, align-items 차이
- text-align: 말 그대로, 텍스트 문자만을 가운데로 정렬
- justify-content: 주로 영역에 적용! 가로축 기준으로 정렬/ 글자를 감싸고 있는 그 영역 자체를! 주로 부모 요소에 써줌
- align-items: 주로 영역에 적용! 수직축 기준으로 아이템들이 정렬/ 부모 요소의 자식들 전체를 묶어서 정렬- 주로 부모 요소에 써줌!
🔶 main 부분에서 영상 삽입이 안되는 문제
-> css에서 영상의 width와 height를 지정해줌으로써, 영상이 나타남!
🔶 요소의 위치 조정
-> 배경 이미지 위로 넷플릭스 로고가 뜨길 원했는데, 배경 이미지 아래로 배치 되는 것이다.
-> 이를 해결하기 위해 position: absolute를 써주었더니, 제대로 실행이 되었다. 부모 요소인 body를 기준으로 배치되는 것이므로 처음에 로고가 배치되는 것이다.
position: absolute- 부모 요소를 기준으로 위치 결정
🔶 요소 위에 다른 요소 배치
-> 위와 같이 ipnut창 위에 label이 뜨게끔 처리하고 싶었다.
-> 위와 같이 부모요소에 relative, label요소에 absolute를 position시켜줌으로써 실행시킬 수 있다.
-> 메인페이지의 이 부분의 블록을 짜는 것이 어려웠다. 각 요소들 간의 배치가 마음대로 되지 않았고, block형태로 정렬하고 싶은데 계속 나란히 정렬되고..클릭했을 때, 답변이 나오도록 구성하는 부분이 어려웠다. 그렇다면 이 블록을 코딩한 내용을 자세히 기술해 놓겠다.
2023.04.04
-> 질문 블록에 대한 기본적인 구조는 완성하였다. 질문 블록에서 질문과 +가 세로 가운데 정렬로 오게하는 것을 해결하지 못 했다....
-> 메인페이지 풋터에서 그리드를 적용하는 것이 어려웠다. grid 개념을 잘 몰랐기 때문에...
https://velog.io/@asj1966/HTMLCSSJS-CSS-GRID
-> 따라서 위와 같이 일단 grid에 대한 학습을 하였다.
-> ul을 부모 요소, 즉 컨테이너라 생각하고, li를 각각의 아이템이라 생각하여, 컨테이너에 위와 같이 적용해주었다. 열은 3개를 각 1:1:1의 비율로 지정해주었고, 행은 1:1:1:1의 비율로 4개를 지정해주었다.