독학/css

CSS독학1(CSS 선택자)

나아눙 2022. 8. 18. 16:13

출처:www.pinkcoding.com

아주 유용한 사이트를 찾았다.

이걸 보면서 공부!

 

html문서에 적용하는 방법은 3가지가 있다.

 

1. 외부문서로 저장하여 연결하기

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>외부 CSS 파일 적용</title>
  6. <link rel="stylesheet" type="text/css" href="스타일시트 경로" />
  7. </head>
  8. <body>
  9. <div>
  10. </div>
  11. </body>
  12. </html>

2. 문서 내부에 저장하기

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>스타일 태그에 CSS 코드 작성</title>
  6. <style type="text/css">
  7. div{background:#fff}
  8. </style>
  9. </head>
  10. <body>
  11. <div>
  12. </div>
  13. </body>
  14. </html>

3.태그에 직접 지정하기

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>태그에 직접 CSS코드 작성</title>
  6. </head>
  7. <body>
  8. <div style="background:#fff">
  9. </div>
  10. </body>
  11. </html>

CSS선택자1(tag,class,id)

 

  • 태그명을 선택자로 선택 (tag)

<head>

<style>
  p{color:red}
  </style>

</head>

p태그만 빨간색으로 변했어요

  • 태그에 클래스 속성을 지정하여 선택자 사용(class)

<head>

  <style>
  p{color:red}
  .blue{color:blue}
  </style>

<head>

 

<body>

<p class="blue">header</p>

</body>

 

header만 파랑색으로 변했어요

  • 자식 태그 선택자 사용

<html>
<head>
<meta charset="utf-8" />
<title>자식 태그 선택자 사용</title>
<style>
    li p{color:red}
</style>
</head>
<body>
    <ul>
    <li><p>hello world in list </p></li>
    </ul>
    <p>hello world in h1</p>
</body>
</html>

 

띄어쓰길 자식 요소에 접근하였다.

  • 태그에 아이디 속성을 지정하여 선택자 사용(id)

id는 고유한 값으로 오직 한번만 사용한다.

class는 여러번 가능

<head>

<style>
    #hi{color:red}
</style>
</head>

 

<body>
    <p id=hi>hello world</p>
</body>

 

 

id 속성으로 선택자를 사용해서 빨간색으로 변했어요

CSS 선택자2(*,child)

  • 모든 태그 선택하기(*)

<head>

<style>
    *{color:pink}
</style>
</head>

태그 총집합 두둥!

자식 태그에 CSS적용

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>자식 태그 선택하기</title>
  6. <style>
  7. section h1{color:pink}
  8. </style>
  9. </head>
  10. <body>
  11. <section>
  12. <h1>h1 tag in section tag</h1>
  13. </section>
  14. <aside>
  15. <h1>h1 tag in aside tag</h1>
  16. </aside>
  17. </body>

section h1

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>자식 클래스 선택하기</title>
  6. <style>
  7. section *{color:skyblue}
  8. // .parent2{color:blue} 추가적으로 해봄
  9. .parent2 .hOne{color:blue} //추가적으로 해봄
  10. //aside{color:blue} //추가적으로 해봄
  11. </style>
  12. </head>
  13. <body>
  14. <section class='parent'>
  15. <p>p 태그</p>
  16. <h1>h1 태그</h1>
  17. <h2>h2 태그</h2>
  18. <h3>h3 태그</h3>
  19. <h4>h4 태그</h4>
  20. <h5>h5 태그</h5>
  21. <h6>h6 태그</h6>
  22. <b>b 태그</b>
  23. <span>span 태그</span>
  24. <div>div 태그</div>
  25. <em>em 태그</em>
  26. </section>
  27. <aside class='parent2'>
  28. <h1 class='hOne'>hOne class in parent2 class</h1>
  29. </aside>
  30. </body>
  31. </html>

CSS선택자3(인접 형제 클래스)

 

  1. <head>
  2. <style>
  3. section aside h1 ~ p{color:pink}
  4. </style>
  5. </head>
  6. <body>
  7. <section>
  8. 1 gorup
  9. <b>b 태그</b>
  10. <span>span 태그</span>
  11. <div>div 태그</div>
  12. <em>em 태그</em>
  13. </section>
  14. <section>
  15. 2 group
  16. <h1>h1 태그</h1>
  17. <h2>h2 태그</h2>
  18. <h3>h3 태그</h3>
  19. <h4>h4 태그</h4>
  20. <h5>h5 태그</h5>
  21. <h6>h6 태그</h6>
  22. <aside>
  23. <h1>h1 태그</h1>
  24. <p>p 태그</p>
  25. <p>p 태그</p>
  26. </aside>
  27. </section>
  28. </body>

section aside h1 ~ p {color:pink}

section태그 안에 있는 aside태그 안에 있는 h1태그와 같은 선상에 있는 p태그에 적용

p태그만 색이 변했어요

동일선상에 있는 태그 중 첫번째 태그만 적용(~ 대신 +)

<style>
    section aside h1 + p{color:blue}
</style>

첫번째 p 태그만 색이 변했어요


    section aside h1 ~ p{color:blue} ->
    section aside p ~ h1{color:blue}는 색이 안변하고 원래대로 됨

    section aside h1{color:blue}는 h1태그만 색이 변함

    section aside p{color:blue}는 p태그만 색이 변함

   굳이 h1~p를 사용해야 되나 ...

 

CSS선택자(가상 클래스)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>가상 클래스</title>
<style>
    a:link{color:skyblue}
    a:visited{color:hotpink}
    a:hover{color:orange}
    a:active{color:green}
</style>
</head>
<body>
    <a href='https://www.naver.com' target='_blank'>NAVER</a>
    <a href='https://m.youtube.com' target='_blank'>YOUTUBE</a>
    <a href='https://www.netfilix.com' target='_blank'>NETFILIX</a>
</body>
</html>

 

클릭을 하지 않은 상태 link skyblue

클릭을 이미 한 상태 visited hotpink

마우스를 올린 상태 hover orange

클릭을 하고 있는 순간 active green

 

a:hover{color:orange; text-shadow:4px 4px 10px deeppink} (추가)

naver를 올리는 순간 그림자가 적용 되었다.

 

CSS선택자5(위치 선택자)

  • nth-child
  • nth-last-child
  • first-of-type
  • last-of-type

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>위치 가상 클래스</title>
<style>
    aside p:nth-child(1){color:skyblue} //aside에서 첫 요소
    aside p:nth-last-child(2){color:blue} //aside에서 역순
    section p:first-of-type{color:green} //section에서 처음 오는 요소
    section p:last-of-type{color:orange} //section에서 마지막에 오는 요소
</style>
</head>
<body>
    <section>
        <p>pinkcoding</p>
        <p>pinkcoding</p>
        <p>pinkcoding</p>
    </section>
    <aside>
        <p>tomodevel</p>
        <p>tomodevel</p>
        <p>tomodevel</p>
    </aside>
</body>
</html>

CSS 선택자6(only 선택자)

  • only-child
  • only-of-type
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>only 가상 클래스</title>
  6. <style>
  7. p:only-child{color:skyblue}
  8. </style>
  9. </head>
  10. <body>
  11. <p>pinkcoding</p>
  12. //<b>pinkcoding</b> p태그 외에 다른 태그가 있으면 안됨
  13. </body>
  14. </html>

only-child 는 선택자가 오직 한개 일때 사용

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>위치 가상 클래스</title>
  6. <style>
  7. p:only-of-type{color:skyblue}
  8. </style>
  9. </head>
  10. <body>
  11. <p>pinkcoding</p>
  12. //<p>pinkcoding</p> p태그가 2개이상 있으면 안됨
  13. <b>pinkcoding</b> //존재해도됨
  14. <em>pinkcoding</em> //존재해도됨
  15. </body>
  16. </html>

 

CSS선택자(속성선택자)

src,href,id,class,name,value 는 속성

 

ex1)

  1. <head>
  2. <meta charset="utf-8" />
  3. <title>속성 클래스</title>
  4. <style>
  5. p[id]{color:skyblue}
  6. [class]{color:hotpink}
  7. </style>
  8. </head>
  9. <body>
  10. <p id="myName">pinkcoding</p>
  11. <b class="myName2">pinkcoding</b>
  12. <em class="myName3">pinkcoding</em>
  13. <p class="myName4">pinkcoding</p>
  14. <span class="myName5">pinkcoding</span>
  15. <div >pinkcoding</div>
  16. </body>
  17.  

ex2)

  1. <head>
  2. <meta charset="utf-8" />
  3. <title>속성 클래스</title>
  4. <style>
  5. [id]{color:skyblue}
  6. [class]{color:hotpink}
  7. </style>
  8. </head>
  9. <body>
  10. <p id="myName" class="myName2">pinkcoding</p>
  11. </body>

나중에 선언된 핑크색이 적용

 

  1. <head>
  2. <meta charset="utf-8" />
  3. <title>속성 클래스</title>
  4. <style>
  5. [class]{color:hotpink}
  6. [id]{color:skyblue}
  7. </style>
  8. </head>
  9. <body>
  10. <p id="myName" class="myName2">pinkcoding</p>
  11. </body>

나중에 선언된 하늘색이 적용

  1. <head>
  2. <meta charset="utf-8" />
  3. <title>속성 클래스</title>
  4. <style>
  5. p[class]{color:hotpink} //먼저 적용
  6. [id]{color:skyblue}
  7. </style>
  8. </head>
  9. <body>
  10. <p id="myName" class="myName2">pinkcoding</p>
  11. </body>

먼저 선언했더라도 속성과 함께 태그까지 지정하면 hotpink가 된다.

 

선택자[속성 = "값"]{CSS속성:값}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    a[href="https://www.naver.com"]{color:hotpink; text-decoration:none}

                                                                              //text-decoration:none을 없애면 밑줄이 생긴다.

</style>
</head>
<body>
    <a href="https://www.naver.com" target='_blank'>NAVER</p>
    <a href="https://www.m.youtube.com" target='_blank'>YOUTUBE</p>
</body>
</html>

속성 선택차 값 체크 

  • ^=
  • $=
  • *=

^=  특정문구로 시작

  1. <style>
  2. a[href^="https://"]{color:hotpink;text-decoration:none}
  3. </style>

$= 특정문구로 끝남

  1. <style>
  2. a[href$=".com"]{color:hotpink;text-decoration:none}
  3. </style>

*= 특정문구로 포함

  1. <style>
  2. a[href*="naver"]{color:hotpink;text-decoration:none}
  3. </style>
  1. <style>
  2. a[href*="http"]{color:hotpink;text-decoration:none}
  3. </style>