1) 학습한 내용

오전 회의(오전 11시)

이번 회의는 클론 홈페이지의 완성도를 점검하는 구간으로 원본 홈페이지와 유사한 정도를 점검하는 시간이었다.

헤더 - 원본과 비슷함.
카드 플립 - 원본과 비슷함.
slick-cus - 반응형이 적용되지 않았음.
iconP - 원본과 차이가 있지만 비슷하게 되었음.
kakao_api - 원본과 비슷함.
footer - 왼쪽 로고가 올라가질 않았음.
top 버튼이 추가됨.

가상 클래스란?

가상클래스는 Id 선택자나 class 선택자로 사용할 수 없는 요소들을 선택하는 선택자다.
가상 클래스는 요소의 속성 값, 상태, 상대적 위치 등을 이용하여 요소를 선택할 수 있다.

구조적 가상 클래스란?
웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다.

:root 가상 클래스

웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스다. :root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다. 즉, html에서 root는 항상 html을 가리킨다. 그러나 html보다 :root 가상 클래스의 스타일 적용 우선순위가 더 높다. 문서 전반적으로 재사용할 임의가 있는 값을 작성한다.

:root를 이용해 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다. 이러면 한 번에 수정이 용이하다.

css:root 변수 선언

웹 문서에서 공통으로 사용될 속성을 미리 변수에 선언한다.
--(하이픈 2개) 다음 속성을 이름을 정해주고 :(콜론) 뒤에 속성 값을 적어준다.

css:root 변수 사용

var로 변수를 선언하고, 소괄호 안에 속성 값을 입력한다.
[css] :root 가상 클래스로 css 변수 다루기

2) 학습내용 중 어려웠던 점

슬라이드를 일정한 간격으로 띄우는 것과 클래스명이 바뀐 것과 그로 인해 일일이 대조해야 하는 일이 힘들었다. 그리고, 클론 코딩이라지만, 반응형 웹을 일일이 대조하고 원본 사이트에 맞춰야 하는 것이 정말 시간이 많이 걸린다.

3) 해결방법

강사의 조언에 따르면 여러 번 테스트를 하는 것이 그나마 좋은 것이락 햇었다. 반응형 웹의 이미지 크기 변형은 원본 페이지에 들어가서 그대로 작성했었다면 슬라이드는 제대로 파악을 하기 어려워서 임시적으로 margin: 20px를 집어넣었다.

4) 학습소감

실습 프로젝트 클론코딩도 슬슬 마무리 지어야 할 떼가 오고 있었다. 원본 사이트를