CSS 기초(2)
- Filter selector
- Layout 연습
- ColorZilla 연습
- 쇼핑몰 & yahoo 만들어보기
<style>
#content > li:nth-child(4){ /*content id의 자식 li 중 4번째*/
background-color: green;
}
#apple > li:nth-child(2n){ /*content id의 자식 li 중 짝수번째*/
background-color: yellow;
}
</style>
이 때 nth-child()에 2n이나 2n+1과 같은 조건을 형식을 넣을 수도 있고, first-child를 대신하여 사용하는 등 다양한 filter를 사용할 수 있다. 또한 필터를 한 번 더 넣어 다양한 행동/조건을 추가할 수 있다.
<style>
#content > p:nth-child(2)::first-line{
font-weight: bold;
color: #2160d1;
} /*content id의 하위 2번째 p의 첫 줄*/
#content > p:nth-child(1)::selection{
background-color: olive;
color: red;
} /*content id의 하위 1번째 p를 드래그했을 때*/
</style>
<style>
*{margin: 0px;} /*모든 tag를 대상으로 margin과의 빈 공간을 0px로 만든다.*/
a{text-decoration: none;} /*a tag (hyperlink)의 기본 스타일을 없애준다.*/
li{list-style-type: none;} /*list의 기본 스타일을 없애준다. (요소 앞의 점이나 숫자)*/
</style>
ColorZilla의 웹페이지 모습. 왼쪽 UI에서 색을 만들고 그에 따른 코드를 오른쪽 CSS코드에서 복사해서 사용하면 된다.
확실히 아직 좀 어색하긴 하다... 계속 해보면 잘 되겠지..!