학습한 내용

가상 선택자 : 선택한 요소에 어떠한 행동과 규칙에 의해서 디자인을 적용하는 방식
가상 선택자를 지정할 때에는 id선택자, class선택자, type선택자를 활용해서 html문서에 접근한 다음 :을 입력 후 이미 css에서 미리 만들어 놓은 선택자를 지정해 줍니다.

<행동과 관련된 디자인을 적용하는 가상 선택자>
- link : 방문한 적이 없는 링크에 대해서 디자인을 적용할 때 사용
- active : 마우스를 클릭 했을때 라고 하는 행동 자체를 정의하고 싶을때 사용
- hover : 마우스를 올렸을 때 배경색상이나 폰트의 색상을 변경하고 싶을때 사용
- focus : input태그를 클릭 했을때 주변에 테두리가 형성되는데 그 디자인을 바꾸고 싶을때 사용

<일정한 규칙을 바탕으로한 디자인을 적용하는 가상 선택자>
태그를 선택 후 :을 입력한 후 원하는 결과가 나오도록 다음값을 입력
- first-child : 여러 태그들 중에서 가장 먼저 나오는 것에 디자인을 적용
- last-child : 여러 태그들 중에서 가장 나중에 나오는 것에 디자인을 적용
- nth-child() : 여러 태그들 중에서 괄호 안에 있는 숫자 번째 것에 디자인을 적용. 홀수 번째 : 2n+1, 짝수 번째 : 2n

<before / after 가상선택자>
글자를 중심으로 before는 앞쪽, after는 뒤쪽에 어떠한 내용물을 디자인으로써 삽입할 수 있습니다.

html과 css를 link로 연동하기 위해서 css경로를 그대로 적어줍니다.
입력하는 파일에서 적용하려는 문서가 다른 폴더에 있어서 일단 그 폴더를 나와야 할때에는 ../를 하고 파일경로를 입력하면 됩니다.

프로젝트를 만들때 각각의 폴더를 만들어서 서로 연결하는 것이 추후 유지보수와 가독성에 많은 도움이 되므로 연습을 해두는 것이 좋습니다.

카카오톡 친구 리스트 설계도면

• 이미지 테두리를 원형으로 하고 싶은 경우는 border-radius: 50%를 입력하면 됩니다.

네이버 오늘 읽을만한 글(리빙)

학습한 내용 중 어려웠던 점 또는 해결못한 것들

크롬을 통해 들어가서 웹페이지를 검사하면서 그것을 인용해서 작성하는 것까지는 괜찮았지만 자세히 보지 않으면 못보고 지나갈거 같았고, 폰트 사이즈가 적혀 있지 않는 것은 다른 곳의 폰트 사이즈를 그대로 사용하는거라서 찾기가 조금 힘들었습니다.

해결방법 작성

검사를 하는 도중에 어떤 부분에 적용되었는지 그리고 폰트 사이즈를 알기 위해서는 마우스를 올려보고 확인 후에 주석처리로 메모를 해 두고 체크박스를 해제해 보면서 확인하는 작업을 통해서 하는 것이 확실할거 같습니다.

학습 소감

큰틀을 만들어서 그 안에서도 구역을 나눠서 입력을 해 놓은 값들에 스타일을 적용하기 위해서는 작업을 하는 방향을 정하고, 그 방향에 따라 순서대로 파일경로를 입력해 나가는 것이 좋겠다고 생각했습니다. 그렇게하면 나중에 자신이 한 작업들을 검사할 때에도 빠트리는 것없이 모두 정해놓은 순서대로 검사를 할 수 있다고 생각했기 때문입니다.