프로필사진
FE_Log
JunO3O
홈
방명록
전체글
검색
카테고리
태그 보기
즐겨찾기
태그 목록
display 속성 자손 선택자 요소 배치 one true 레이아웃 CSS 단위 속성 선택자 유동 속성 위치 속성 목록태그 css 박스 속성 Udemy 그레이디언트 중앙 레이아웃 배경 속성 반응 선택자 html 태그 선택자 상태 선택자 구조 선택자 후손 선택자 수평 레이아웃 아이디 선택자 입력 양식 글자 생략 글자 속성 글자태그 공간 분할 the web developer bootcamp vscode
즐겨찾기
Copyright © Design Maker - vlo.
CSS 선택자
CSS 선택자

2023. 3. 21. 03:11ㆍ비공개

전체 요소 선택자

 

: 기존의 CSS 규칙

selector {                   /*    선택자 {            */
    property : value;        /*       속성 : 값;    */
}                            /*    }                 */

 

ㅁ 전체 선택자 사용법

: 특수 문자 * 은 전체 요소를 선택하여 스타일을 적용할 때 사용합니다.

* {
	속성 : 값;
}
ex)
* {                          
    color : white;              /* 모든 요소의 텍스트 색상을 흰색으로 적용합니다. */
    background-color : black;   /* 모든 요소의 배경색을 검정색으로 적용합니다. */
}

 

ㅁ 요소 선택자 사용법

: h1, button 등 요소를 선택하여 스타일을 적용할 때 사용합니다.

: 쉼표(,)를 이용하여 여러 요소에 같은 스타일을 적용할 수 있습니다.

요소 {
	속성 : 값;
}
ex)
* {                          
    color : white;              /* 모든 요소의 텍스트 색상을 흰색으로 적용합니다. */
    background-color : black;   /* 모든 요소의 배경색을 검정색으로 적용합니다. */
}
ex)
h1, button {
    color : white;              /* h1과 button 요소의 텍스트에 흰색을 적용합니다. */
    background-color : black;   /* h1과 button 요소의 배경에 검정색을 적용합니다. */
}

 

ID 선택자 #

 

: 샾(#)을 이용하여 요소에 지정된 ID에만 스타일을 적용할 수 있습니다.

: ID를 이용하여 다른 스타일을 적용시키는 방법은 최소화하는 것이 좋습니다.

#요소의 ID {          /* 선택자에 지정된 ID에만 스타일을 적용합니다. */
     속성 : 값;
}
ex)
#signup {
     background-color : #a2d2ff;     
     /* signup이라는 id를 가진 요소에만 background-color : #a2d2ff를 적용합니다. */
}

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Forms</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/id_selector.css">
</head>
<body>
    <h1>Forms 연습</h1>
    <form action="/강아지/">
        <p>
            <label for="username"> 아이디를 입력하세요 : </label>
            <input type="text" placeholder="아이디를 입력하세요" id="username" name="username" /><br /><br />
        </p>
        <p>
            <label for="password"> 패스워드를 입력하세요 : </label>
            <input type="password" placeholder="비밀번호를 입력하세요" id="password" name="password" /><br /><br />
        </p>
        <p>
            <label for="color"> 색상을 선택하세요 : </label>
            <input type="color" id="color" name="color" /><br /><br />
        </p>
        <p>
            <label for="number"> 핸드폰 번호를 입력하세요 : </label>
            <input type="number" placeholder="핸드폰 번호를 입력하세요" id="number" name="phonenumber" /><br /><br />
        </p>
        <p>
            <label for="time"> 시간을 입력하세요 : </label>
            <input type="time" id="time" name="time" /><br /><br />
        </p>
        <button id="submit">제출하기</button>   <!-- 서로 다른 id 값을 주어 -->
        <button id="signup">회원가입</button>   <!-- 해당하는 id의 요소에만 스타일을 적용합니다. -->
    </form>
</body>
</html>
#signup {
    background-color : #a2d2ff;     
    /* signup이라는 id를 가진 요소에만 background-color : #a2d2ff를 적용합니다. */
}

'제출하기' 버튼과 '회원가입' 버튼 모두 동일한 <button>으로 만들어졌지만 id 선택자에 의해 배경색이 다르게 적용되었습니다.

 

클래스 선택자  .

 

: 클래스가 요소를 묶어주기 때문에 몇 개의 그룹을 만들어 비슷한 스타일을 적용할 수 있습니다.

.클래스 이름 {
     속성 : 값;
}
ex)
.tag {
     color : blue;
}

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Forms</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/class_selector.css">
</head>
<body>
    <h1>Forms 연습</h1>
    <form action="/강아지/">
        <p>
            <label for="username"> 아이디를 입력하세요 : </label>
            <input type="text" placeholder="아이디를 입력하세요" id="username" name="username" /><br /><br />
        </p>
        <p>
            <label for="password"> 패스워드를 입력하세요 : </label>
            <input type="password" placeholder="비밀번호를 입력하세요" id="password" name="password" /><br /><br />
        </p>
        <p>
            <label for="color"> 색상을 선택하세요 : </label>
            <input type="color" id="color" name="color" /><br /><br />
        </p>
        <p>
            <label for="number"> 핸드폰 번호를 입력하세요 : </label>
            <input type="number" placeholder="핸드폰 번호를 입력하세요" id="number" name="phonenumber" /><br /><br />
        </p>
        <p>
            <label for="time"> 시간을 입력하세요 : </label>
            <input type="time" id="time" name="time" /><br /><br />
        </p>
        <button class="tag">제출하기</button>  <!-- class를 만들어 클래스 선택자에 의해 -->
        <button class="tag">회원가입</button>  <!-- 스타일이 적용되도록 합니다. -->
    </form>
</body>
</html>
.tag {
    color : blue;
}

 

자손 선택자

 

: 자손 선택자를 이용할 때는 띄어쓰기를 이용합니다. 

: 동일한 요소의 스타일을 바꾸는게 아닌 특정 요소의 스타일만 바꾸기 위해서 사용합니다.

li a {
	color : blue;
}
/* 위와 같이 li 띄고 a 라고 선택자를 적은 경우 li 요소 안에 있는 모든 a 에 스타일을 적용하겠다는 의미입니다. */

ex)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/descendant_selector.css">
</head>

<body>
    <h1> 자손 선택자의 사용법</h1>
    <p>
    <h2> 1번 a 태그 </h2>
    <nav>
        <a href="https://www.google.com/"> 구글</a>
        <a href="https://www.naver.com/"> 네이버</a>
        <a href="https://www.kakaocorp.com/page/"> 카카오</a>
    </nav>
    </p>
    <p>
    <h2> 2번 a 태그</h2>
    <ul>
        <li><a href="https://www.google.com"> 구글</a></li>
        <li><a href="https://www.naver.com/"> 네이버</a></li>
        <li><a href="https://www.kakaocorp.com/page/"> 카카오</a></li>
    </ul>
    </p>
</body>

</html>
a {
    color : #3a0ca3;
}

li a {
    color : #fb5607;
}

1번 a 태그와 2번 a 태그 모두 <a href=""> 를 사용하지만 CSS 파일에서 자손 선택자 li a { }으로 스타일을 적용했기 때문에 다른 색의 스타일이 적용되었습니다.

 

=> 자손 선택자는 아이디 선택자(#)과 클래스 선택자(.)와도 조합하여 사용할 수 있습니다.

#아이디 a {
	color : blue;
}

.클래스 a {
	color : blue;
}

 

인접 선택자 + / 직계 자손 선택자 > 

 

ㅁ 인접 선택자(+)

: 인접 선택자(+)는 결합자라고도 불리며, + 는 전체 선택의 명령을 바꾸는 결합자입니다.

h1 + p {
	color : blue;
}
/* h1과 연결된 p만 스타일을 적용합니다. */

ex)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/Adjacent_sibling_combinator.css">
</head>
<body>
    <h1> 인접 선택자 구분</h1>
    <button> h1과 인접한 button 1</button>
    <button> h1과 인접한 button 2</button>
    <button> h1과 인접한 button 3</button>
    
    <h2> 인접 선택자 구분</h2>
    <button> h2와 인접한 button 1</button>
    <button> h2와 인접한 button 2</button>
    <button> h2와 인접한 button 3</button>
    
    <h2> 인접 선택자 구분</h2>
    <button> h2와 인접한 button A</button>
    <button> h2와 인접한 button B</button>
</body>
</html>
h2 + button {                    /* h2와 붙어있는 button 에만 스타일을 적용합니다. */
    background-color : #e7c6ff;
}

인접 선택자(+)는 <h2>와 붙어있는 <button>에만 스타일을 적용합니다.

 

ㅁ 직계 자손 선택자(>)

: 직계 자손 선택자(>)는 단계를 거쳐 연결되어 있는 요소가 아닌 바로 아래 직계에 있는 요소만 선택하는 선택자를 말합니다.

div > h1 {
	background-color : blue;
}

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/child_combinator.css">
</head>
<body>
    <h1> 직계 자손 선택자</h1>
    <h2> 직계 자손 선택자는 후손 선택자라고도 합니다. </h2>
    <ul>
        <li>
            <a href="https://www.google.com">구글</a> <!-- a는 body의 후손이다. -->
        </li>
        <li>
            <a href="https://www.naver.com">네이버</a>
        </li>
        <li>
            <a href="https://www.https://www.kakaocorp.com/page/">카카오</a>
        </li>
    </ul>
    <a href="https://www.google.com">구글</a> <!-- a는 body의 자손이다. -->
    <a href="https://www.naver.com">네이버</a>
    <a href="https://www.https://www.kakaocorp.com/page/">카카오</a>
</body>
</html>
a {                  /* 모든 a 태그의 텍스트 색상을 검정색으로 바꾼다. */
    color : black;
}

body > a {           /* body 안에 바로 a 태그가 나오는 경우만 텍스트 색상을 빨간색으로 바꾼다. */
    color : red;
}

body > ul > li > a {  /* body 안에 ul 안에 li 안에 a 태그가 나오는 경우만 텍스트 색상을 초록색으로 바꾼다. */
    color : green;
}

HTML 파일에서 <ul> 안의 <li> 안의 <a> 는 <body>를 기준으로 후손이며, 밑의 <a> 는 바로 <body> 아래에 있기 때문에 자손입니다.

 

ㅁ 자손 ? 후손 ? 

: 자손은 자신의 바로 아래 있는 대상을 말하며, 후손은 자손 뿐만 아니라 자손의 자손까지 포함하는 대상을 말합니다.

1을 기준으로 2,3,4는 자손이라 말하며, 2,3,4,5,6,7은 후손이라 말합니다.

 

속성 선택자

 

: 속성 선택자란 특정 속성을 가진 요소를 선택할 수 있는 선택자를 말합니다.

: 예를 들어, <input> 요소에 있는 text, password, radio 중 text에만 스타일을 적용하고 싶은 경우 속성 선택자를 이용하여 <input type="text">에만 스타일을 적용할 수 있습니다. 

요소[속성="이름"] {
	속성 : 값;
}
ex)
input[type="text"] {         /* type="text"와 일치하는 <input>요소 */
	color : blue;
}

 

ㅁ *=

: = 대신 *= 을 사용하여 "___"를 포함하고 있는 요소에만 스타일을 적용할 수 있습니다.

요소[속성 *= "___"] {
	속성 : 값;
}
ex)
a[href*="example"] {     /* "example"을 포함하는 href가 있는 <a> 요소에만 스타일을 적용합니다. */
	font-size: 2em;
}

 

ㅁ $=

: = 대신 $= 을 사용하여 "___"으로 끝나는 요소에만 스타일을 적용할 수 있습니다.

요소[속성$="___"] {
	속성 : 값;
}
ex)
input[href$=".com"] {   /* ".com"으로 끝나는 href가 있는 <a> 요소에만 스타일을 적용합니다. */
	color : blue;
}

 

가상 클래스 :

 

: 가상 클래스는 선택자 끝에 붙여 상태를 특정하는 키워드를 말합니다. 

: 가상 클래스를 사용한다는 것을 알리기 위해 콜론( : )을 입력해야 합니다.

 

ㅁ : hover

: hover는 커서를 올려 두었을 때 특정한 반응이나 다른 시각적 효과를 통해 상호작용할 수 있음을 알려주기 위해 사용합니다.

요소:hover {
	속성 : 값;
}
ex)
button:hover {		/* 버튼에 마우스를 올렸을 때 배경색은 검정색, 글자색은 하얀색으로 변합니다. */
    background-color : black;
    color : white;
}

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/hover.css">
</head>
<body>
    <button> hover 사용법</button>
</body>
</html>
button:hover {
    background-color: black;
    color : white;
}

마우스를 올리기 전 기본 배경색은 회색이며 글자색은 검정색입니다.
:hover 속성을 적용한 뒤 <button>에 마우스를 올렸을 때, 배경색은 검쟁색 그리고 글자색은 하얀색으로 바뀌게 됩니다.

 

ㅁ :active

: active는 사용자가 활성화하는 요소를 나타냅니다.

: 버튼을 클릭한 상태일 때 색상이 변하도록 하기 위해 자주 사용합니다.

요소:active { 
	속성 : 값;
}
ex)
button:active {    /* 버튼을 클릭하였을 때 배경색이 초록색으로 적용합니다. */
	background-color : green;
}

ex)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/active.css">
</head>
<body>
    <button> active 사용법</button>
</body>
</html>
button:active {
    background-color: aquamarine;
    color : green;
}

active는 마우스를 버튼 위에 올려놓아도 변화가 없습니다.
마우스를 클릭했을 때만 동작을 합니다.

 

ㅁ :nth-of-type()

: nth-of-type() 은 형제 그룹 내 위치에 따라 선택할 수 있게 합니다. 

: 괄호() 안에 숫자를 적어 몇번째에 스타일을 적용할 것인지 정합니다.

: 3n과 같이 숫자 뒤에 n을 적게 되면 3번째마다 스타일을 적용할 수 있습니다.

요소:nth-of-type() {
	속성 : 값;
}
ex)
p:nth-of-type() {
	background-color : black;
}

 

ex) nth-of-type(3)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/nth_of_type.css">
</head>
<body>
    <button class="nth"> nth-of-type 연습 1 </button>
    <button class="nth"> nth-of-type 연습 2 </button>
    <button class="nth"> nth-of-type 연습 3 </button>
    <button class="nth"> nth-of-type 연습 4 </button>
    <button class="nth"> nth-of-type 연습 5 </button>
    <button class="nth"> nth-of-type 연습 6 </button>
    <button class="nth"> nth-of-type 연습 7 </button>
    <button class="nth"> nth-of-type 연습 8 </button>
    <button class="nth"> nth-of-type 연습 9 </button>
    <button class="nth"> nth-of-type 연습 10 </button>
    <button class="nth"> nth-of-type 연습 11 </button>
    <button class="nth"> nth-of-type 연습 12 </button>
</body>
</html>
.nth:nth-of-type(3){          /* 클래스 nth에 nth-of-type()를 적용하되 3번째에만 적용합니다. */
    background-color: yellow;
}

nth-of-type(3)이라고 적용했기 때문에 3번째 버튼에만 스타일이 적용됩니다.

 

ex) nth-of-type(3n)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/nth_of_type.css">
</head>
<body>
    <button class="nth"> nth-of-type 연습 1 </button>
    <button class="nth"> nth-of-type 연습 2 </button>
    <button class="nth"> nth-of-type 연습 3 </button>
    <button class="nth"> nth-of-type 연습 4 </button>
    <button class="nth"> nth-of-type 연습 5 </button>
    <button class="nth"> nth-of-type 연습 6 </button>
    <button class="nth"> nth-of-type 연습 7 </button>
    <button class="nth"> nth-of-type 연습 8 </button>
    <button class="nth"> nth-of-type 연습 9 </button>
    <button class="nth"> nth-of-type 연습 10 </button>
    <button class="nth"> nth-of-type 연습 11 </button>
    <button class="nth"> nth-of-type 연습 12 </button>
</body>
</html>
.nth:nth-of-type(3n){         /* (3n)이라고 적었기 때문에 3번째마다 스타일이 적용됩니다. */
    background-color: yellow;
}

nth-of-type(3n)이라고 적용했기 때문에 3번째 버튼마다 스타일이 적용됩니다.

 

가상 요소 ::

 

: 가상 요소는 선택된 요소의 특정 부분만 선택하여 스타일을 적용합니다. 

: 콜론(:)을 두번 사용하여 가상 요소( :: )임을 나타냅니다.

 

ㅁ first-letter

: first-letter은 특정 선택에서 첫 글자를 선택하는 방법입니다. 

: 즉, 모든 단락이나 모든 span의 첫 글자를 선택할 수 있습니다.

요소::first-letter {
	속성 : 값;
}
ex)
h1::first-letter {    /* h1의 첫번째 글자의 색을 초록색으로 합니다. */
	color : green;
}

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/::_css.css">
</head>
<body>
    <h1> 가상 요소 사용법</h1>
    <p>
        first-letter은 요소의 첫번째 글자를 선택하여 스타일을 적용합니다.
    </p>
</body>
</html>
p::first-letter {      /* p 요소의 첫번째 글자에 #f72585 색상을 적용합니다. */
    color : #f72585;
}

 

ㅁ first-line

: first-line은 첫번째 줄을 선택하여 스타일을 적용합니다.

p::first-line {
    color : #f72585;
}

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/::_css.css">
</head>
<body>
    <h1> 가상 요소 사용법</h1>
    <p>
        first-letter은 요소의 첫번째 글자를 선택하여 스타일을 적용합니다.<br>
        first-letter은 요소의 첫번째 글자를 선택하여 스타일을 적용합니다.<br>
        first-line은 요소의 첫번째 줄을 선택하여 스타일을 적용합니다.<br>
        first-line은 요소의 첫번째 줄을 선택하여 스타일을 적용합니다.<br>
        first-line은 요소의 첫번째 줄을 선택하여 스타일을 적용합니다.<br>
    </p>
</body>
</html>
p::first-letter {      /* fisrt-letter은 요소의 첫번째 글자에 스타일을 적용합니다. */
    color : #f72585;
}

p::first-line {        /* first-line은 요소의 첫번째 줄에 스타일을 적용합니다. */
    color : #7209b7;
}

 

ㅁ selection

: selection은 마우스로 선택한 부분에 스타일이 적용됩니다.

요소::selection {
	속성 : 값;
}
ex)
p::selection {
	background-color : blue;
}

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/::_css.css">
</head>
<body>
    <h1> 가상 요소 사용법</h1>
    <p>
        first-letter은 요소의 첫번째 글자를 선택하여 스타일을 적용합니다.<br>
        first-letter은 요소의 첫번째 글자를 선택하여 스타일을 적용합니다.<br>
        first-line은 요소의 첫번째 줄을 선택하여 스타일을 적용합니다.<br>
        first-line은 요소의 첫번째 줄을 선택하여 스타일을 적용합니다.<br>
        first-line은 요소의 첫번째 줄을 선택하여 스타일을 적용합니다.<br>
    </p>
</body>
</html>
p::first-letter {
    color : #f72585;
}

p::first-line {
    color : #7209b7;
}

p::selection {
    background-color: #a8dadc;
}

selection은 직접 선택한 부분에 스타일을 적용합니다.

 

CSS 우선순위

 

: 하나 이상의 스타일이 동일한 요소에 적용되거나 적용될 수 있는 경우에는 충돌이 발생하게 됩니다.

: 이를 방지하기 위해서 CSS에서는 우선순위에 따라 스타일이 적용됩니다. 

: 브라우저는 우선순위를 계산하기 위해 주어진 선택자가 얼마나 구체적인지 측정한 뒤 더 구체적인 선택자를 우선적으로 적용합니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/test.css">
</head>
<body>
    <section>
        <p> 우선순위 테스트 </p>
    </section>
</body>
</html>
p {
    color: blue;
}

section p {
    color: red;
}

구체적인 선택자를 우선적으로 적용하기 때문에 section p { } 를 적용합니다.

 

ㅁ ID > CLASS > ELEMENT

: 가장 구체적인 것은 ID 선택자로 클래스 선택자보다 우선순위에 있습니다.

: 또한, CLASS 선택자는 요소 선택자보다 우선순위에 있습니다.

 

중요도 !important

 

: !important 는 특이도와 상관없이 브라우저가 가장 명시적인 지시로 인식하게 합니다.

: 강제성을 갖고 있기 때문에 자주 사용하는 것은 좋지 않습니다.

선택자 {
	속성 : 값;
}
ex) 
button {
	color : blue !important;
}

 

 

'비공개' 카테고리의 다른 글

유용한 CSS 속성들  (0) 2023.03.21
CSS 박스 모델  (1) 2023.03.21
CSS : 기초  (1) 2023.03.21
HTML : 폼, 테이블  (0) 2023.03.21
HTML : 시맨틱(Semantics)  (0) 2023.03.21

관련글

댓글 1

티스토리툴바