분류 전체보기89 HTML/CSS] 가상클래스(Pseudo-class)란? 우리는 앞서 여러가지 선택자들을 공부했습니다. 그런데 코딩을 하다보면 앞에서 배운 선택자들로 지정하기 어려운 경우가 생깁니다. 예를 들어, 커피 메뉴판을 만들었는데 메뉴판의 몇번째 커피명이라든지, 커피콩 설명단락의 첫번째 글자 등에 스타일을 주고 싶은 경우가 있습니다. 이런 경우리 클래스 이름 앞에 콜론(:)을 붙여 가상 클래스를 만들어서 사용할 수 있습니다. n번째 자식 :first-child 첫 번째 자식 요소 선택 :last-child 마지막 자식 요소 선택 :nth-child(n) n번째 자식 요소 선택 :nth-last-child(n) 끝에서부터 n번째 태그 요소 선택 예시 1번 예시 2번 예시 3번 예시 4번 예시 5번 예시 6번 /* 첫번째 자식 요소 선택*/ .pseudo p:first-c.. 2021. 5. 24. HTML/CSS] 자식 선택자, 직속 자식 선택자 이번에는 연결 선택자인 '자식 선택자'와 '직속 자식 선택자'에 대해서 알아보도록 하겠습니다. 자식선택자(Children selector) 자식 선택자는 부모 요소에 포함된 자식들에게 스타일을 적용시킬 때 사용합니다. 우리는 아래 예제에서 content클래스를 부모로 가지고 있는 자식 요소들 중 b태그에 스타일을 적용시켜 보겠습니다 부모명 자식명 ... {} 자 기 소 개 안녕하세요 제 이름은 지금입니다 제 나이는 20살입니다 저는 코딩을 좋아합니다 .content b { font-size: 20px; color: green; } 직속자식 선택자(Direct children selector) 직속 자식 선택자는 말그대로 바로 아래에 있는 직속 자식에게만 적용이 됩니다. 그래서 아래 예제를 보면 conte.. 2021. 5. 22. HTML/CSS] 복수선택자, 여러조건 선택자 지난 시간에 이어 선택자를 공부해봅시다. 'selector(선택자)'란 이름 그대로 선택을 해서 특정 태그에 원하는 스타일을 적용해주는 요소를 말합니다. 선택자를 이용하면 하나 또는 여러개의 태그에 원하는 대로 스타일을 적용해 줄 수 있습니다. 복수 선택자 같은 스타일을 여러 태그에 적용하고 싶을 때가 있습니다. 이럴때는 적용하고 싶은 클래스들을 복수 선택해서 한번에 적용할 수 있는데요. 원하는 태그의 이름들을 쉼표(,)를 사용하여 나열하면 스타일을 한꺼번에 적용시킬 수 있습니다. 태그명1, 태그명2, 태그명3, ... 안녕, 나는 H1이야 안녕, 나는 H4라고해 첫번째 p태그 두번째 p태그 다시 첫번째 p태그 다시 두번째 p태그 다시 세번째 p태그 다시 네번째 p태그 .first, .second { c.. 2021. 5. 21. HTML/CSS] class-selector(클래스 선택자), id-selector(아이디 선택자) 지난 시간에 이어 선택자를 학습해 보겠습니다. 스타일 속성을 적용하는 요소를 'selector(선택자)'라고 부릅니다. 선택자를 이용하면 하나 또는 여러개의 태그에 스타일을 지정해 줄 수 있습니다. 원하는 대로 여러 태그에 한번에 스타일을 적용할 수 있으니 간편하겠죠? 오늘 사용할 예시입니다. index.html만 작성하고 style.css는 비워두었습니다. class 선택자(class-selector) : 특정 부분에만 스타일을 적용하고 싶을 땐, class 선택자를 사용합니다. 예를 들어 같은 p태그라도 두번째 단락에는 다른 색상을 적용하고 싶다면, class 선택자를 사용하면 됩니다. .content1 { color: gray; } .content2 { color: rgb(212, 57, 199);.. 2021. 5. 18. 이전 1 ··· 15 16 17 18 19 20 21 ··· 23 다음
