[배운내용]
(1) 가상 선택자
id, class와 같은 선택자와 달리 html상에는 존재하지 않고, 어떤 상태를 지정하는 것이 가상 선택자이다.
가상 선택자의 종류
상태에 따라
link
방문하지 않은 링크를 선택한다.
a:link{color: red;}
active
마우스로 클릭한 상태를 지정한다.
a:active{color: blue;}
hover
마우스를 위에 올린 상태를 지정한다.
a:hover{color: deeppink;}
focus
input박스 등이 포커스를 가지고 있는 상태를 지정한다.
input:focus{border: solid 10px red;} → input박스를 선택했을 때 입력가능한상태가 되었을때 박스가 빨간색 실선 10px의 크기로 변한다.
순서에 따라
first/last/nth
순서에 따른 상태를 지정할 때 사용한다.
li:first-child{color: red;} → list중 첫번째에 빨간색 적용
li:last-child{color: blue;} → list중 마지막에 파란색 적용
li:nth-child(n){color: gray;} → list중 n번째에 회색 적용
<응용> nth-cgild(2n) : 짝수
nth-cgild(2n+1) : 홀수
위치에 따라
before
지정한 태그의 앞을 지정
li:before{content: "|"} → list앞에 |를 입력. 이때 리스트부호와 리스트의 내용사이에 위치하게 된다.
after
지정한 태그의 뒤를 지정
li:after{content: "입니다"} → list뒤에 입니다를 입력. 이때 예시와 같이 단어나 글을 작성할 수도 있으나 이는 꾸미는 것일뿐 정보나 의미를 담지는 않는다.
(2) 실습 - 네이버 홈화면 만들기
- 홈화면 만들기에서 중요한 부분은 ul,li,img,span 등의 태그에 모두 class를 지정해주고 해당 부분에 원하는 스타일을 적용. 같은 위치에 있는 다른 기사들이 같은 class를 가져 스타일을 같게 지정해주는 것이다. 특히 여기서 중요한부분은 부모태그에서 적용된 스타일이 있더라도 자식태그에서 또 다른 스타일을 적용했다면 앞에 입력했던 것은 무시되고 뒤에 입력했던 값이 지정된다.
(3) 실습 - 카카오 친구목록 만들기
- 여기서도 캐스캐이딩이 적용되어 가작 마지막에 작성한 스타일이 적용되고, 더 디테일하게 작성한 스타일이 적용된다.
- 카카오 친구 프로필사진 부분에서 radius로 라운드를 지정해주는데 이때 사진을 원형으로 표시하고 싶다면 radius값을 50%로 주면 된다.
※ 다른 스타일은 모두 적용이 되었는데 특정 한가지만 적용이 되지않을때 확인 방법
: 크롬에서 검사를 눌러 해당 코드부분을 선택했을때 오른쪽 스타일탭에서 어느 영역이 표시가 되고있지 않은지 확인한다
[어려웠던 점]
- a:link{} 소스가 먹히지 않아서 한참을 헤매었다.
- 닷홈과 파일질라에서 FTP 를 생성하고 도메인을 부여받는 작업을 했다. 이때 다른 교육생들도 여러가지 오류가 났는데, 특히 나는 403 Fobidden에러가 떴다.
[해결방법]
- link는 접속하지 않은 상태에 스타일을 입히는 태그이므로 한번 방문한 사이트는 먹히지 않는다. 특히, 소스를 적용하기 전에 방문했더라도 안되는 것을 확인했고 원하는 사이트의 주소를 직접쳐서 오늘 방문한적이 없는 사이트를 입력하니 스타일이 적용되었다.
- 우선 닷홈의 호스팅관리부분에서 FTP 접속설정의 접속을 허용하게 했는지 확인해야한다.
그리고 403오류의 경우는 닷홈에 문의해본 결과 파일명이 index.html, index.php 와 같은 파일명이어야한다고 한다. 실제로 내가 연결했던 파일은 project.html로 되어있었고 index.html로 변경했더니 잘 접속할 수 있었다.
[학습 소감]
오늘 CSS를 더 배워보니 이제 뼈대에서 뭔가 살이 하나씩 붙는 느낌이 들어 흥미로웠다. 그리고 velog를 계속 작성하고 있는데 정리에 통일성도 없고 나중에 까먹고 다시봤을때 이해하지 못하는 부분도 있지않을까 해서 좀더 알기쉽도록 다시 정리를 해야할 것같다.
