본문 바로가기
HTML & CSS

[211018] CSS 적용, CSS 선택자

감자탈출기 2021. 10. 18. 23:40

▶ CSS 적용

 

내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"><!--외부,내부는 아래에 선언하는 것이 우선순위가 높다. 덮어쓰기처럼-->
    <title>CSS 1</title><!--외부 스타일, 범용성 가장 높음, 모듈화-->
    <link type="text/css" rel="stylesheet" href="/static/css/ch03_1.css">
    <style>
        /*내부 스타일*/
        h1{
            color: brown;
        }
        h2{
            color: blue;
        }
    </style>
</head>
<body>
    <h1 style="color: red;">인라인 스타일</h1><!--범용성은 낮으나 우선순위 가장 높다-->
    <h2>내부 스타일</h2>
    <h3>외부 스타일</h3>
    <hr>
    <h1>새로운 태그 작성 1</h1>
    <h2>새로운 태그 작성 2</h2>
    <h3>새로운 태그 작성 3</h3>
</body>
</html>
<ch03_1.css 파일>

h1{
    color: lightcoral;
}
h2{
    color: lightseagreen;
}
h3{
    color: lightblue;
}

example1

 

 

 

▶ CSS 선택자

 

전체 선택자 *
태그 선택자 태그(h1, p, li 등)
아이디 선택자 #아이디명
클래스 선택자 .클래스명
후손 선택자 선택자 선택자
자손 선택자 선택자 > 선택자
속성 선택자 선택자[속성=값] / 선택자[속성~=값]
선택자[속성|=값] / 선택자[속성^=값]
선택자[속성$=값] / 선택자[속성*=값]
동위 선택자 선택자 + 선택자 / 선택자 ~ 선택자

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>CSS 1</title>
    <link type="text/css" rel="stylesheet" href="/static/css/ch03_2.css">

</head>
<body>
    <h1 id="double-line">제목 1</h1>
    <h2 id="double-line">제목 2</h2>
    <h3>제목 3</h3>
    <h4>제목 4</h4>
    <h5>제목 5</h5>
    <h6>제목 6</h6>
    <p class="color-blue">문단</p>
    <ul>
        <li class="color-red">목록 1</li>
        <li class="color-blue">목록 2</li>
        <li class="color-green">목록 3</li>
    </ul>
    <ol>
        <li>목록 1</li>
        <li>목록 2</li>
        <li>목록 3</li>
    </ol>
</body>
</html>
<ch03_2.css 파일>

/*전체 선택자*/
* {
    color: gray;
}

 /*동일한 속성 적용의 경우 여러개의 태그 한번에 선택*/
h1,h2,h3,h4 {
    text-decoration: underline;
}

/*클래스 선택자*/
.color-red {
    color: maroon;
}
.color-blue {
    color: blue;
}
.color-green {
    color: green;
}

/*아이디 선택자*/
#double-line {
    /*
        아이디 선택자는 동일한 ID가 있어도 스타일 적용에는 문제 없지만
        id 속성 자체가 html 문서에서 유일한 값을 가지는 것으로 기대되므로
        다른 곳에서는 문제 발생할 수 있다.
    */
    text-decoration-style: double;
}

example2

 

▶ CSS 선택자 2

 

구조 선택자 선택자:first-child / 선택자:last-child
선택자:nth-child(수열) / 선택자:nth-last-child(수열)
선택자:first-of-type / 선택자:last-of-type
선택자:nth-of-type(수열) / 선택자:nth-last-of-type(수열)
반응 선택자  선택자:active / 선택자:hover
상태 선택자 :checked / :focus
:enabled / :disabled
링크 선택자 :link / visited
문자 선택자 ::first-letter / ::first-line
::after / ::before / ::selection
부정 선택자 선택자:not(선택자)

 

 

▶ CSS 선택자
▷ 기본 속성 선택자

지금 선택자와 함께 사용하는 선택자로 선택자 뒤에 []를 사용하여 속성과 속성 값을 사용

선택자[속성]{설정내용;}
선택자[속성=속성값]{설정내용;}

기본 속성 선택자 예시

[type] {
    background-color: gray;
}

[type=text] {
    color: white;
}

[type=password] {
    color: #8affff;
}

[type=number] {
    color: #ffaed9;
}

[type=date] {
    color: #d0ff9a;
}

 

 

▷ 문자열 속성 선택자
특정 문자열을 확인하여 스타일을 적용하는 방식으로 특별한 경우에만 사용

선택자[속성~=값] 속성값이 특정 값을 단어로 포함하는 태그 선택
띄어쓰기로 구분
 또는 클래스를 여러개 지정한 경우 하나의 클래스가 apple이고 그걸 선택하고 싶을 때
[class~=apple]
선택자[속성|=값]  속성값이 특정 값을 단어로 포함하는 태그 선택
“-”으로 구분 – 앞의 내용이 값 동일해야 함
선택자[속성^=값] 속성값이 특정 값으로 시작하는 태그 선택
선택자[속성$=값]  속성값이 특정 값으로 끝나는 태그 선택
선택자[속성*=값] 속성값이 특정 값으로 포함하는 태그 선택

 문자열 속성 선택자 예시

/*띄어쓰기로 bold가 구분되는 단어*/
[class~=bold] {
    font-weight: bold;
}

/* - 앞의 bold가 구분되는 단어(- 없어도 됨)*/
[class|=bold] {
    font-weight: bold;
}

/*띄어쓰기 관계없이 포함하기만 하면*/
[class*=bold] {
    color: red;
}

/*무조건 underline으로 시작하기만 하면 (띄어쓰기도 없어야)*/
[class^=underline] {
    text-decoration: underline;
}

/*무조건 s24로 끝나기만 하면(띄어쓰기도 없어야)*/
[class$=s24] {
    font-size: 24px;
}

 

 

▶ CSS 선택자
▷ 후손 선택자
선택자 후손선택자{설정내용;}
▷ 자손 선택자
선택자>자손선택자{설정내용;}
* 여러 개 자손 선택 가능(선택자>자손>자손>자손…)

후손/자손

    <ol>
        <li>목록 1</li>
        <li>목록 2</li>
        <li>목록 3
            <ol>
                <li>목록 A</li>
                <li>목록 B</li>
                <li>목록 C</li>
            </ol>
        </li>
    </ol>
 /*후손선택자*/
ol ol {
    list-style-type: upper-alpha; /*리스트 마커를 알파벳으로 설정*/
}
 /*자손선택자*/
li > ol > li {
    color: #222222;
}

example2

 

 

▶ CSS 선택자
▷ 동위 선택자
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용

<div>
          <h1></h1>  동위 관계
          <p></p>
          <p></p>
          <p></p>
</div>
선택자a+선택자b 동위 선택자a의 바로 뒤에 있는 한 개의 선택자만 선택
선택자a~선택자b  동위 선택자a의 뒤에 있는 선택자b 모두 선택

 

동위 선택자 예시

    <dl> <!--정의 목록-->
        <dt>동위 선택자</dt> <!--정의 용어-->
        <dd>동위 관계에서 뒤에 위치한 태그 선택할 때 사용</dd> <!--정의 설명-->
        <dt>선택자A+선택자B</dt>
        <dd>선택자A 바로 뒤에 있는 선택자B 요소 하나를 선택</dd>
        <dd>dd 태그는 여러개를 나열하여 작성할 수 있다.</dd>
        <dt>선택자A~선택자B</dt>
        <dd>선택자A 바로 뒤에 있는 선택자B 요소 전부를 선택</dd>
    </dl>
<ch03_2.css 파일>

dt+dd {
    background-color: antiquewhite;
}

dt~dd {
    color: red;
}

example2

 

 

▶ CSS 선택자
▷ 반응 선택자

사용자의 움직임에 따라 달라지는 선택자
선택자:active{설정내용;}
선택자:hover{설정내용;}
선택자:active 사용자가 클릭한 태그 선택
선택자:hover 사용자의 마우스가 올라가 있는 태그 선택

반응 선택자 예시

<ch03_2.css 파일>

/*마우스를 요소에 올렸을 때, 전체 문서에 적용*/
:hover {
    border: 1px solid black;
}

/*마우스를 클릭하고 있는 상태, 선택자 - body 하위의 것에만 적용*/
body :active {
    background-color: black;
    color: white;
}

 

 

▶ CSS 선택자
▷ 상태 선택자
입력 양식의 상태에 따라 선택되는 선택자

input태그:checked  체크 상태의 input태그 선택
input태그:focus 초점이 맞추어진 input태그 선택
input태그:enabled 사용 가능한 input태그 선택
input태그:disabled 사용 불가능한 input태그 선택

상대 선택자 예시

<example2.html 파일>

line 31

<input type="date" disabled>
 
로 수정하고
<ch03_2.css 파일>


:checked {
    box-shadow: 2px 2px 2px black;
}

/*입력 양식이 활성화 된 상태*/
:enabled {
    background-color: white;
    color: black;
}

/*입력 양식이 비활성화 된 상태*/
:disabled {
    background-color: gray;
}

/*입력 양식에 커서가 이동하여 활성화 된 상태*/
:focus {
    background-color: azure;
    color: #00005f;
}

 

example2

 

cf. 추가

<example2.html 파일>

line 29

<input type="password" required>
 
로 수정하고
/*필수 입력 양식인 경우*/
:required {
    border-style: solid;
    border-color: crimson;
}

/*옵션 입력 양식인 경우*/
:optional {
    border-style: solid;
    border-color: forestgreen;
}

example2

 

 

▶ CSS 선택자
▷ 일반 구조 선택자
특정한 위치에 있는 태그 선택(위치로만 구분)

<div>
         <p></p>         형제관계
         <p></p>
         <p></p>
</div>

 

:first-child 형제 관계 태그 중 첫 번째 태그 선택
:last-child 형제 관계 태그 중 마지막 태그 선택
:nth-child(수열) 형제 관계 태그 중 앞에서 수열 번째 태그 선택
:nth-last-child(수열) 형제 관계 태그 중 뒤에서 수열 번째 태그 선택

일반 구조 선택자 예시

    <ul class="parent1">
        <li>첫번째자식</li>
        <li>두번째 자식</li>
        <li>세번째 자식</li>
        <li>마지막 자식</li>
    </ul>
    <ul class="parent2">
        <li>첫번째자식</li>
        <li>두번째 자식</li>
        <li>세번째 자식</li>
        <li>마지막 자식</li>
    </ul>
/* 첫번째 자식에 해당하는 요소의 경우*/
ul.parent1 :first-child {
    color: red;
}

/* 마지막 자식에 해당하는 요소의 경우*/
ul.parent1 :last-child {
    color: blue;
}

/* 2n: 짝수번째에 해당하는 요소 */
ul.parent2 :nth-child(2n) {    /* 그냥 2, 3 쓰면 2번째 3번째 가능*/
    color: green;
}

/* 2n-1: 홀수번째에 해당하는 요소 */
ul.parent2 :nth-child(2n-1) {
    color: gold;
}

/* 뒤에서부터 */
ul.parent2 :nth-last-child(2n) {
    background-color: green;
}

/* 뒤에서부터 */
ul.parent2 :nth-last-child(2n-1) {
    background-color: gold;
}

example2

 

 

▶ CSS 선택자
▷ 형태 구조 선택자

특정한 위치에 있는 태그 선택(태그 별로 구분)

<div>
         <p></p>         형제관계
         <p></p>
         <p></p>
</div>

 

:first-of-type 형제 관계 태그 중 첫 번째 태그 선택
:last-of-type  형제 관계 태그 중 마지막 태그 선택
:nth-of-type(수열) 형제 관계 태그 중 앞에서 수열 번째 태그 선택
:nth-last-of-type(수열) 형제 관계 태그 중 뒤에서 수열 번째 태그 선택

형태 구조 선택자 예시

    <div class="parent3">
        <h1>제목1</h1> <!--h1 처음이자 마지막-->
        <p>내용1</p> <!-- p 처음-->
        <p>내용2</p> <!-- 2번째 p -->
        <p>내용3</p>
        <h2>제목2</h2> <!--h2 처음이자 마지막-->
        <p>내용1</p> <!-- 4번째 p -->
        <p>내용2</p> <!-- p 마지막-->
    </div>
/* 첫번째 자식에 해당하는 요소의 경우*/
div.parent3 :first-of-type {
    color: red;
}

/*마지막 자식에 해당하는 요소의 경우*/
div.parent3 :last-of-type {
    background-color: lightyellow;
}

div.parent3 :nth-of-type(2n) { /*2,4,6... 짝수번째*/
    background-color: navajowhite;
}

/* div.parent3 :nth-of-type(2n-1) {
    background-color: plum;
} */

 

example2

 

 

▶ CSS 선택자
▷ 문자 선택자
태그 내부에서 특정 조건의 문자를 선택하는 선택자

선택자::first-letter 첫 번째 글자를 선택
선택자::first-line 첫 번째 줄을 선택
선택자::after  태그 뒤에 위치하는 공간을 선택
선택자::before 태그 앞에 위치하는 공간을 선택
선택자::selection 사용자가 드래그한 글자 선택

 

문자 선택자 예시

    <div>
        <span class="af">Hello</span>
    </div>
    <div>
        <span class="bf">Hello</span>
    </div>
/* pseudo elements : 의사요소 */
.af::after{            /*af 클래스 뒤에 " :"가 텍스트 아닌 스타일로 적용*/
    content: " :";
    color: red;
    font-weight: bold;
}

.bf::before{           /*bf 클래스 앞에 ": "가 텍스트 아닌 스타일로 적용*/
    content: ": ";
    color: red;
    font-weight: bold;
}

::first-letter {         /* :: 앞에 아무것도 지정 안 했기 때문에 모든 요소에 적용된다.*/
    color: black;
}

::first-line { 
    text-decoration: underline;
}

/*드래그 색상*/
::selection {
    background-color: deepskyblue;
}

example2

 

 

▶ CSS 선택자
▷ 부정 선택자
지금까지의 선택자에 대해 반대로 적용하는 선택자
선택자에는 다른 부정 선택자나 가상 요소를 넣을 수 없음

요소:not(선택자)  선택자를 반대로 적용하여 선택

부정 선택자 예시

<div class="not-selector">
        <span>부정 선택자</span>
        <labal>부정 선택자</labal>
        <code>부정 선택자</code>
    </div>
.not-selector :not(span) {  /*span이 아닌 요소들 : labal, code*/
    color: red;
}

example2

 

'HTML & CSS' 카테고리의 다른 글

[211020] CSS 실습  (0) 2021.10.20
[211019~20] CSS 텍스트 & 색상 & 레이아웃 스타일  (0) 2021.10.19
[211015] 폼 관련 태그 (Input)  (0) 2021.10.15
[211014] 표 & 영역 & 멀티미디어 & 하이퍼링크 태그  (0) 2021.10.14
[211013] HEAD & 글자 태그, 목록 태그  (0) 2021.10.13

'HTML & CSS' Related Articles

티스토리툴바