서론
오늘은 선택자들에 대해서 알아 보고자 합니다.
매우 중요한 개념인 선택자이기 때문에 꼭 여러번 읽어 보시고
모르는 부분이 있으면 댓글이나 채널톡을 통하여 질문해주시면됩니다.
채널톡은 오른쪽 하단에 있는 아이콘을 누르면 됩니다.
↑↑↑ 채널톡 아이콘 ↑↑↑
그럼 시작하겠습니다.
초보자 입문 CSS #03
오늘은 선택자에 대해서 알아본다고 했는습니다.
그러면 선택자가 어떤것인지 간략하고 쉽게 설명하고 넘어가도록 하겠습니다.
위의 이미지 처럼 CSS 제일 앞에 붙는 녀석을 선택자 라고 합니다.
{} 안에는 속성과 속성 값으로 구성되어 있지요.
좀더 알아본다 라고 하면
F12를 눌러 관리자 페이지를 열어 보세요
관리자 페이지에서 요소 혹은 Elements 라는 상단탭에 들어가보세요
요소와 Elements 탭에 들어가서 오른쪽 상단을 보면 style / 스타일 탭이 있습니다.
어떤것은 해당요소의 태그만(p, div, li, html, body 등등)
어떤 것은 #(id이름)이나 .(class이름)이 붙어서
어떤 것들은 ,(쉼표), >(화살표), +(더하기),::(가상선택자) 등이 붙어서 적용을 합니다.
선택자는 내가 해당요소를 고르는 과정이라 볼수 있습니다.
내가 원하는 요소에 변화를 주기위하여 지정을 하는 것이고
지정을 하는 방법을 이제 알아보도록 할것입니다.
강의에서 알려주는 내용은 외부css파일을 만들어서 진행할 계획입니다.
우선 선택자의 종류에 대해서 알려드리고자 합니다.
아래의 표를 참고 하시면됩니다.
| 명칭 | 적용 | 종류 | 사용법 |
| 타입 선택자 | 해당하는 모든 요소에 적용 | html, body, p, span, div, li, ul, table 모든 <html>태그 |
p{ font-size : 15px;} div{width: 300px;} |
| id 선택자 | 해당 아이디에 적용 (자식 포함) |
html에서 요소에 id적용 후에 사용가능 #을 붙여 표기한다. |
#name{ font-size : 15px;} |
| class 선택자 | 해당 클래스에 적용 (자식 포함) |
html에서 요소에 class적용 후에 사용가능 .을 붙여 표기한다. |
.age{color : rgb(255,0,0);} |
| 전체 선택자 | 문서의 모든 요소에 적용 | * 하나이다 (초기화 할때 많이 사용한다) |
*{margin : 0; padding : 0;} |
| 자식 선택자 | 직계 자식에게만 적용 | > 를 이용하여 표현한다 | ul > li{display : inline-block;} #name > .age{color : rgb(0,0,255);} |
| 하위 선택자 | 모든 자식에게 적용 | 띄어쓰기를 사용하여 표현한다. |
ul li{display : inline-block;} #name .age{color : rgb(0,255,0);} |
| 인접 선택자 | 해당요소의 바로 뒤에 있는 요소만 적용(일치할 경우) | +를 이용하여 표현한다 | h1 + p{padding: 10px;} h1 바로 뒤에 있는 p에만 적용된다. <h1> <p> <--적용 <h1> <h2> <p> <--적용안됨 |
| 속성 선택자 | 생각보다 유용한 선택자 해당속성을 가진 요소에만 적용한다 |
[ ]를 이용하여 표현한다 | input[type='text']{text-indent : 10px;} h1[class]{color : blue;} |
| 그룹 선택자 | 같은 속성을 줄때 묶어 사용할수 있다 |
,를 이용하여 사용한다. 여러개를 한번에 적용할때 주로 사용한다. |
.eidt, .save{font-size : 12px;} |
| 종속 선택자 | 자주 사용하지는 않지만 이런게 있다 라는것만 알아두자 |
타입선택자와 아이디/클래스 선택자가 결합된 형태 | p#name{text-indent : 10px;} p이면서 아이디가 name녀석에게만 적용 |
| 가상 클래스 선택자 | :hover만 기억하세요 | :link - 링크 된 글자 :visited - 방문했던 링크 :hover - 마우스 올렸을 때 :active - 활성화 되었을 때 :focus - 포커스가 걸렸을 때 |
div:hover{background-color : pink;} 호버만 기억하세요 |
| 가상 선택자 | 요소의 몇번째 요소인지 알고 선택할 때 |
:first-child - 첫번째 요소 :last-child - 마지막 요소 :nth-child(숫자) - 숫자번째 요소 |
li:first-child{color : red;} li:nth-child(2){color : blue;} li:last-child{color : green;} <ul> <li>RED</li> <li>BLUE</li> <li>GREEN</li> </ul> |
| 가상 선택자 | 요소를 추가 하고 싶을때 | ::before - 해당요소 제일 앞에 요소를 추가 ::after - 해당요소 제일 뒤에 요소를 추가 |
div::before{contents : ' '; width : 10px; height : 30px;} |
위의 표처럼 수많은 선택자들이 있습니다.
이런것들이 있구나 하면서 나중에 순차적으로 적용할때 사용해 보시면 좋을것 같습니다.
하나도 몰라도 타입선택자, 클래스선택자, 아이디 선택자만 알아도
간단한 코딩을 하는데 문제가 없을 것입니다.
결론
css에서 선택자가 어떤것인지 알고
해당요소가 어떤 역할을 하는지 알기만 해도 반이상은 한다고 생각합니다.
다음에는 속성과 속성값에 대해서 차근차근 알아볼 생각입니다.
#01에서 자주 사용하는 속성의 종류와 기능에 대해서 알아봤고
초보자 입문 CSS #01
서론 초보자를 위한 간단한 자료를 만들어 보고자 한다. 누군가에게는 도움이 되면 좋을 것 같아 이렇게 만들어서 포스팅 하게 되었다. 주로 웹디자이너 분들이나 퍼블리싱에 관심 있는 분들을
jh91.tistory.com
#02에서는 css를 연결하는 방법에 대해서 알아봤습니다.
초보자 입문 CSS #02
서론 최근 회사의 프로젝트를 진행하다보니 매일 업로드 하지 못했습니다. ㅠㅠ 어느정도 프로젝트가 안정기로 접어들어서 다시 포스팅 하게 되었습니다. 오늘은 문서에 css를 적용하는 3가지
jh91.tistory.com
오늘 선택자에 대해서 알아보았으니 이제 연습을 하면서 css를 적용해 보면된다 생각합니다.
어려움 있으면 언제든 질문해 주시고 자유자재로 커스텀 할 수 있는 그 날이 오셨으면 좋겠습니다.
'웹언어 > CSS' 카테고리의 다른 글
| 초보자 입문 CSS #02 (10) | 2021.07.15 |
|---|---|
| 초보자 입문 CSS #01 (11) | 2021.07.07 |
| [CSS] 그라데이션 설정하기 (7) | 2021.06.28 |
| [CSS] #, . / id와 class (0) | 2021.05.31 |
| [CSS] 요소를 투명하게 만드는 여러가지 방법들 (8) | 2021.05.01 |
