문자열 속성 선택자

-속성 선택자는 일반 속성 선택자와 문자열 속성 선택자로 나뉜다.
-문자열 속성 선택자는 속성 값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자.

1) 선택자[속성명 ~= "특정값"] { CSS 코드; }

띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 요소를 선택

/~= : 여러 속성값 중 하나라도 일치하면 선택/

div[name ~="aaa"] {
    background-color: pink;
}

2) 선택자[속성명 |= "특정값"] { CSS 코드; }

속성 값이 특정 값을 단어로 포함하는 요소를 선택

단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다.

/ |= : 대쉬 기호 앞쪽 단어가 일치하는 요소 선택 ( ex. str-3, str-ch)/

div[class|="str"] {
    color : red;
    font-weight: bold;
}

3) 선택자[속성명 ^= "특정값"] { CSS 코드; }

( ^ : 캐럿)

-> 속성 값이 특정값으로 시작하는 요소를 선택 ( ex. class34, class-num)

/^= : 특정 값으로 시작하는 요소 선택 /

div[class^="class"] {
    background-color: black;
    color: white;
}

4) 선택자[속성명 $= "특정값"] { CSS 코드; }

속성 값이 특정 값으로 끝나는 요소를 선택

/$= : 특정값으로 끝나는 요소 선택 ( ex.boy-class2, numclass2)/

div[class$="class2"] {
    font-size: 30px;
}

5) 선택자[속성명 *= "특정값"] { CSS 코드; }

-> 속성 값이 특정 값을 포함하는 요소를 선택

/* =: 특정 값을 포함하는 요소 선택 (ex. num-2, str-2-num)/

div[name*="2"] {
    border:3px solid blue;
}

문자열 속성 선택자를 다중 선택하여 검색할 수 있다.

a[href^='https:'][href$='com'] {
    color: #00a;
}

-> https:로 시작하고 com으로 끝나는 문자열을 검색한다.

일반 구조 선택자

-형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자

-위치를 기준으로 구분함 (중요)

<div id="test1">
    <p>테스트1</p>
    <p>테스트2</p>
    <p>테스트3</p>
    <p>테스트4</p>
    <p>테스트5</p>
    <pre>테스트6</pre>
</div>

:first-child

형제 관계의 요소 중 첫번째 요소를 선택

→첫번째 자식이 p태그면, 선택하라는 뜻

#test1 > p:first-child {
    background-color: pink;
}

:last-child

last-child : 형제관계의 요소 중 마지막 요소

→마지막 자식이 p태그인 경우 선택되는것.

#test1 > p:last-child {
    background-color: orange;
}
/*실제 코드는 pre가 마지막이기 때문에 
적용되지 않는다.*/

:nth-child(수열)

nth-child(수열) : 형제 관계 요소 중 지정된 수열번째 요소를 모두 선택
-순서를 따질 때 1부터 시작함

#test1 > p:nth-child(2){
    /*#test1의 자식 요소 중 2번째 요소를 선택하고나서
    p태그인지 검사한다.*/
    background-color: yellow;
}
/*홀수번째 형제 요소 선택*/
#test1 > p:nth-child(2n-1) {
    font-weight: bold;
    font-size: 30px;
}

:nth-last-child(수열)

형제 관계 요소 중 뒤에서부터 지정된 수열 번째 요소를 모두 선택

#test1 > p:nth-last-child(2) {
    color :hotpink;
}
/*뒤에서 2번째 요소가 p일때 스타일 지정*/

---

형태 구조 선택자

-선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자
(선택된 요소들을 기준으로 구분)

<div id="test2">
    <pre>테스트0</pre>
    <p>테스트1</p>
    <p>테스트2</p>
    <p>테스트3</p>
    <p>테스트4</p>
    <p>테스트5</p>
    <pre>테스트6</pre>
</div>

:first-of-type : 같이 선택된 형제들 중에서 첫번째 요소

#test2 >p:first-of-type {
    background-color: orange;
}

:last-of-type: 같이 선택된 형제들 중에서 마지막 요소

#test2 >p:last-of-type {
    background-color: skyblue;
}

:nth-of-type(수열): 같이 선택된 형제들 중에서 수열번째 모든요소

/*홀수번째 요소에 스타일 지정*/
#test2 >p:nth-of-type(2n-1) {
    font-size: 30px;
}

:nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열번째 모든요소

/*짝수번째 요소에 스타일 지정*/
#test2 >p:nth-last-of-type(2n) {
    background-color: red;
}

---

부정 선택자 ( 선택자1:not(선택자2) )

괄호 내 선택자를 제외한 나머지 요소를 선택

#test3 >li:not(:nth-of-type(3n)) {
    background-color: aqua;
}

/3의 배수를 제외한 요소에만 스타일 지정/

---

기타텍스트 선택자

:only-child

특정 요소의 자식이 하나밖에 없을 때 선택

#test1 >p:only-child {
    background-color: steelblue;
}

:only-of-child

특정 요소의 자식 중 지정된 형태와 같은 자식요소가 하나만 있을 때 선택

<div id="test2">
    <p>자식1</p>
    <pre>자식2</pre>
</div>
-----------------------
#test2 >p:only-of-type{
    background-color: pink;
}

:empty

자식 요소가 없는 요소를 선택하는 것

자식요소의 개념 : 태그, 글자, 띄어쓰기 모두 자식요소라고 함

<div id=test3>
    <p></p>
    <p>123</p>
    <p>            </p>
    <p><strong>안녕</strong></p>
</div>

#test3 >p:empty {
    background-color: greenyellow;
    height:20px; /*알아보기 쉬우라고 표시*/
}

여러 선택자 동시 선택하는 법

같은 스타일을 지정하고 싶으나

요소를 선택하는 선택자가 일치하지 않을 때 사용

선택자1, 선택자2 ,선택자3, .... { CSS 코드; }

#test4-1, #test4-2, .test4-3 {
    background-color: yellow;
}

특정 요소 내부에 있는 특정 클래스만 선택하기

<ul id="test5-1">
        <li class="c5">1</li>
        <li class="c5">2</li>
        <li class="c5">3</li>
        <li>4</li>
        <li>5</li>
</ul>
<ul id="test5-2">
        <li class="c5">6</li>
        <li class="c5">7</li>
        <li class="c5">8</li>
        <li>
            <span class="c5">9</span>
        </li>
        <li>
            <span class="c5">10</span>
        </li>
        <p class="c5">11</p>
        <p class="c5">12</p>
</ul>

                       /*#test5-1의 후손 중 클래스가 c5인 요소를 선택*/
#test5-1 .c5 {
    background-color: aqua;
}                     /*test5-2의 자식 중 클래스가 c5인 li요소만 선택*/
#test5-2 >li.c5 {
}

클래스가 여러개인 요소만 선택

<div class="test6">테스트1</div>
<div class="test6 c6">테스트2</div>
<div class="c6">테스트3</div>

.test6.c6{
    background-color: red;
}            /* 두번째 줄의 문구에 스타일이 적용됨*/

---

CSS 선택자의 우선순위

기본적으로 css 속성은 style태그 또는 css 파일에 작성된 순서대로(위->아래) 해석이 진행되지만,
같은 요소에 여러 css 속성이 설정되는 경우 우선 순위가 적용된다.

* 알아둬야 할 것

1) 동일한 우선 순위로 css 속성이 설정된 경우 제일 마지막에 작성된 css 속성이 반영된다

2) 여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 css 속성이 다르면 모두 반영된다.

1순위 : css속성: 속성값 !important;

2순위 : inline-style 속성 (요소에 직접 작성되는 style속성)

3순위 : 아이디 선택자(#아이디 속성명)

4순위 : 클래스 선택자(.class 속성명)

5순위 : 태그 선택자 (태그명)

<div class="cls1" id="test1" style="background-color: pink;
"<!--2순위 : inline-style 속성-->>우선순위 테스트</div>

/*5순위 : 태그 선택자*/

div {
width:200px;
height:200px;
background-color: red !important; /1순위 : css속성/
}

/*4순위 : 클래스 선택자*/

.cls1{
background-color: green;
}
.cls1{
background-color: yellow;
/동일한 우선순위에선 마지막으로 적용된 설정값이 적용됨/
}

/*3순위 : id 선택자*/

#test1 {
height:100px;
background-color: black;
color:white;
}

/*2순위 : inline-style 속성*/

/html 문서 내에 작성됨/

/*1순위 : css속성*/

/원하는 스타일에 !important 작성 시 1순위 항목이 됨/

---

레이아웃(layout)

사전적 의미 : 배치, 정리
기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것

화면 배치 방법(형식):display 속성

요소가 화면에 어떻게 보여질지 형식을 지정하는 속성

(ctrl+alt+방향키 → 여러줄 한번에 수정 가능하다)

- block : 화면을 수직 분할(행을 나눔) + width / height 속성 사용 가능

->display:block은 기본값이기 때문에 따로 지정해 주지 않아도 됩니다~

block element의 예시 : div, p, h1

<span class="area1 block">1번 영역</span>

.block {
    display:block;
    width:150px;
    height:150px;
}

- inline : 화면을 수평 분할 + width / height 속성 사용 불가능

(해당 태그가 마크업 하고 있는 컨텐츠의 크기만큼만 공간을 차지하도록 하고 있다.)
+) margin과 padding도 좌우로만 정할 수 있다.

inline element의 예시 : span, a, em 등

<div class="area1 inline">1번 영역</div>

.inline {
    display:inline;
}

- inline-block : inline의 수평분할 + block 크기 조정

inline 엘리먼트처럼 수평으로 요소들이 늘어설 수 있지만, block처럼 width, height, margin, padding을 정할 수 있는 hybrid 요소이다.

inline-block element의 예시 : input, button, select 태그 등

inline-block 확인하기

<span class="area1 block inline-block">1번 영역</span>

.inline-block {
    display:inline-block;
}

- none : 화면에 요소가 표시되지는 않으나 존재하고 있는 상태

none 확인하기

<span class="area1 block none">1번 영역</span>

.none {
    display:none;
}

- flex : 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리하는 형식

→후술할 예정

---

화면(영역)분할

- 상하 2분할

준비물
-감싸는 영역 요소
-내부의 영역을 분할할 요소
-display: block
-크기 단위 (고정(px), 가변(%))

->display:block은 기본값이기 때문에 따로 지정해 주지 않아도 됩니다~

<div id="container-1">
    <!--내부에 영역을 분할할 요소-->
    <div class="div-1"></div>
    <div class="div-1"></div>
</div>
<div id="ct1">
    <!-- 내부에 영역을 분할할 요소-->
    <div class="dv1"></div>
    <div class="dv1"></div>
</div>

/*감싸는 영역 요소*/
#container-1 {
    border:3px solid black;
    width:323px;
    height:472px;
}
/*내부에 영역을 분할할 요소*/
.div-1 {
    height:50%;
    width:100%;
    border:1px dashed hotpink;
}
#ct1 {
    border:3px solid black;
    width:323px;
    height:472px;
}
#ct1 > .dv1:first-of-type{
    height: 30%;
    width:100%;
    background-color: red;
}
#ct1 > .dv1:last-of-type {
    height:70%;
    width:100%;
    background-color: blue;
}

-**상하3분할

-감싸는 영역 요소 : id="container-2"
-화면 분할 내부 요소 : class="div-2"
-분할 비율 ->20:30:50
-배경색 자유롭게
->display:block은 기본값이기 때문에 따로 지정해 주지 않아도 됩니다~

<div id="container-1">
    <!--내부에 영역을 분할할 요소-->
    <div class="div-1"></div>
    <div class="div-1"></div>
</div>
<div id="ct1">
    <!-- 내부에 영역을 분할할 요소-->
    <div class="dv1"></div>
    <div class="dv1"></div>
</div>

/*상하3분할*/
#container-2 {
    border:3px solid black;
    width:323px;
    height:471px;
}
#container-2 >.div-2:first-of-type{
    height: 20%;
    width:100%;
    background-color: green;
}
#container-2 >.div-2:nth-of-type(2){
    height: 30%;
    width:100%;
    background-color: tomato;
}
#container-2 >.div-2:last-of-type{
    height: 50%;
    width:100%;
    background-color: skyblue;
}

- 좌우2분할

-감싸는 영역 요소
-내부 분할 요소
-크기 단위
-display : inline-block(약간 문제점 있음)
→ div 사이에 엔터가 존재하기 때문에 정상 출력하기 위해서는 사이에 공백을 없애야 한다.

<div id="container-3">
    <div class="div-3"></div><div class="div-3"></div>
    <!--내부의 두 요소 사이에 엔터==한칸-->
</div>

#container-3 {
border:5px solid red;
width:400px;
height:200px;
}
.div-3 {
width:50%;
height: 100%;
display:inline-block;
}
#container-3 >.div-3:first-child{
background-color: pink;
}
#container-3 >.div-3:last-child{
background-color: blue;
}

:display 속성

- display: none

요소는 존재하지만 화면에는 보이지 않음(투명x)(화면에 아예 존재x)

visibility : hidden;
요소가 존재하지만 그 자리에 아무것도 안보이는것 (투명)

요소의 영역(여백) 관련 속성

HTML 요소는 총 4가지의 영역으로 구성되어 있다.

1. content 영역

-요소의 내용이 작성되는 영역

(시작태그와 종료태그 사이에 작성되는 내용을 생각하면 됨)

2. padding 영역

-content 영역과 border 영역 사이

.padding-test {
    padding-top:20px;
    padding-left: 30px;
    padding-bottom: 50px;
    padding-right: 100px;
}
/*padding 속성 : 
    작성법에 따라서 padding 특정 방향에 
    크기를 지정할 수 있다.
*/
/*값 1개 : 상하좌우 적용
   padding:50px;
  값 2개 : 상하,좌우 적용
   padding:50px 100px;
  값 3개 : 상, 좌우, 하 적용
   padding:10px 50px 100px;
  값 4개 : 상, 우, 하, 좌(시계방향으로) 적용
   padding:10px 20px 30px 40px;
*/

3. border 영역

• 요소의 테두리가 지정되는 영역

• content보다 바깥쪽에서 content를 감싸고 있음

.border-test{
    border-top:3px solid black;
    border-bottom: 5px dashed magenta;
    border-left: 10px dotted blue;
    border-right:10px double orange;
}
/*border 속성은 상하좌우 방향을 별도로 지정할 수 없음*/

4. margin 영역

• 다른 요소와의 간격을 나타내는 영역

-서로 다른 요소의 margin이 겹칠 경우, 더 큰 margin을 가진 요소의 값을 따른다

-margin:autuo; 기능

/*margin에서는 padding과 같이 상하좌우 방향이 적용 가능함*/
.margin-auto {
    margin-top:100px;
    margin:auto;
    /*좌우요소간의 간격을 자동으로 지정하여 가운데 정렬하는 역할
    ->margin 속성은 상하좌우를 동시에 지정하기 때문에 
    상(top)부분에도 auto가 지정되어, 적용됐던 100px이 덮어쓰기 되었음.
    ->상하에 값을 부과하고 싶다면 auto보다 아래에 적어 덮어 씌운다.
    */
}

box-sizing

border, padding이 content 안에 겹치도록 하여 전체 크기를 알기 쉽게 해준다.

#box-sizing {
    /*테두리 10px. 패딩20px, 내용 나머지 
    전체 요소 크기가 가로/세로 각각 300px인
    정사각형 만들기
    */
    border: 10px solid black;
    padding:20px;
    width:300px;
    height:300px;
    box-sizing: border-box;
}

모든 요소들을 box-sizing 해두고 시작하면 편하다.

*{
	box-sizing:border-box;
}

---

배치 관련 스타일(position)

position은 요소의 위치를 지정하는 속성

- position : relative; (상대적인)

• 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성.

• 해당 요소가 원래 있어야 하는 자리에서 top, bottom, left, right 속성을 사용하여 위치를 조정할 수 있음

- position : absolute; (절대적인)

• 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함.

• 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다.

• absolute를 선언할 시, HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 됨

→DOM 트리를 따라 올라가다가  position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정된다. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 body 태그가 배치 기준이 됩니다.

position:absolute;를 사용하여 요소를 영역 정가운데에 배치하기

<div class="container-2">
    <div id="center"></div>
</div>

#center {
    width:50px;
    height:50px;
    background-color: pink;
    position:absolute;   /* absolute 속성 부여*/
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

- position : fixed; (고정된)

• 항상 고정된 위치에 요소를 배치함. (화면이 움직이든 말든 항상 같은 위치)

<div class="fixed-area">
    <a href="body-top">위쪽으로 이동</a>
</div>

.fixed-area {
    width: 120px;
    position:fixed;
    bottom:50px;
    right:50px;
}
#우측 하단에 항상 고정된 상태로 존재하게 됨(스크롤 시에도 고정)

->우측 하단의 위쪽으로 이동 버튼이 생겼다.