스터디에서 자발적으로 크론을 만들자고 얘기가 되었다. 인스타 내 피드를 클론하기로 했고 수요일까지 자바스크립트 공부하면서 차근차근히 하나씩 만들어가보자! 오늘의 스터디는 내가 발표하는 날이었다. 스스로 궁금한 것도 있었고 질문도 받고 답도 해주고 다른 사람들이 모르는 것에 대해서도 머리를 싸매고 있으니까 뭔가 시간을 허투루 쓰는 느낌은 덜하다.
CSS선택자
팀원중 한분이 자신이 이걸 해봤는데 왜 안되는지 모르겠다고 하셔서 그 당시에는 아무리 봐도 모르겠고 코드를 직접 이것저것 돌려볼 수 없으니 캡처를 후다닥 하고 스터디 끝나고 찾아보았다.
팀원의 문제는 .nav-menu li .home a {}가 실행이 안된다는 것이다.
나도 css선택자나, nth-child는 굉장히 헷갈려서 꾸준히 찾아보고 있는데 이 질문이 나에게 좋은 기회가 되었다.
first-of-type은 li중에서 첫번째를 가르켜서 되는 것.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="row">
<ul class="nav-menu">
<li class="home"><a href="google.com">HOME</a></li>
<li class="wtf"><a href="google.com">MY Info</a></li>
<li class="good"><a href="google.com">Project</a></li>
<li class=""><a href="google.com">Contacts</a></li>
</ul>
</div>
</body>
</html>.nav-menu li:first-of-type {
border-style: solid;
border-width: 2px;
border-color: lightcoral;
}
.nav-menu .home a {
border-style: solid;
border-width: 2px;
border-color: lightcoral;
}
.nav-menu .wtf a {
border-style: solid;
border-width: 2px;
border-color: lightcoral;
}
/* ul > li > .good > a {
border-style: solid;
border-width: 2px;
border-color: lightcoral;
} li와 .good이 자손이 아니라 동등*/
.row ul:first-of-type > li:nth-child(4) > a{
border-style: solid;
border-width: 2px;
border-color: lightcoral;
}
ul > li > a {
border-style: solid;
border-width: 2px;
border-color: lightcoral;
}검색해보고 이것도 저것도 추가로 만들어보았는데, 정확한 답인지는 모르겠지만 내가 내린 결론은
.nav-menu li .home a 에서의 li과 .home이 동등한 위치에 있기 때문인 것 같다.
참고사이트 : https://ssungkang.tistory.com/entry/css-css-%EC%84%A0%ED%83%9D%EC%9E%90selector-%EC%9D%98-%EC%A2%85%EB%A5%98%EC%99%80-%EC%98%88%EC%8B%9C / https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048
nth-child : 모든 요소 중 n번째 | A:nth-of-type : 부모 안에서 A요소 중 n번째
- nth-child(odd | 2n+1) => 홀수 | 2*0+1 | 2*1 + 1...
- nth-child(even | 2n) => 짝수 | 2*0 | 2*1 ...
- A:nth-of-type(n) => 부모 안에 있는 A라는 요소중 n번째
참고사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child
position
position에는 relative, absolute, fixed, sticky가 존재한다.
- sticky : 가장 가까운 블록 조상을 기준으로 오프셋 적용한다. 상대적으로 배치된 요소로 취급하지만 주어진 경계선을 지나면 고정위치를 갖게된다.
참고사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/position
'일레븐 스터디' 카테고리의 다른 글
| 인스타 클론 #3 (0) | 2020.04.01 |
|---|---|
| 인스타 클론 #2 (0) | 2020.03.30 |
| 스탠드업 TIL (0) | 2020.03.24 |
| 자기소개 페이지 제작하기 #1 (0) | 2020.03.23 |
댓글