<p><span style="color: #ee2323;"><b>CSS는 어려워 보여도 조금만 자세히 살펴 보면...</b></span></p><p><span style="color: #ee2323;"><b>그리 어려운 분야가 아니다......</b></span></p><p> </p><p>좋아요! CSS에서 **선택자(selector)**는 HTML 요소를 선택해서 스타일을 적용할 때 쓰는 규칙이에요. 각각 <b>태그 선택자</b>, <b>아이디 선택자</b>, <b>클래스 선택자</b> 예제를 보여드릴게요.</p><hr data-ke-style="style1"><p>1️⃣ 태그 선택자 (Tag Selector)</p><ul style="list-style-type: disc;" data-ke-list-type="disc"><li><p><b>설명:</b> HTML 태그 이름으로 선택. 같은 태그 전체에 스타일 적용.</p></li><li><p><b>문법:</b> 태그이름 { 속성: 값; }</p></li><li><p><b>예제:</b></p></li></ul><p><!DOCTYPE html></p><p><html></p><p><head></p><p><style></p><p>p { color: blue; font-size: 16px; }</p><p></style></p><p></head></p><p><body> <p>첫 번째 문단입니다.</p> <p>두 번째 문단입니다.</p> </body> </html></p><p>✅ 결과: 모든 <p> 태그 글자가 파란색이 되고 글자 크기는 16px.</p><hr data-ke-style="style1"><p>2️⃣ 아이디 선택자 (ID Selector)</p><ul style="list-style-type: disc;" data-ke-list-type="disc"><li><p><b>설명:</b> HTML 요소에 지정한 id 하나만 선택. 페이지 내에서 유일해야 함.</p></li><li><p><b>문법:</b> #아이디명 { 속성: 값; }</p></li><li><p><b>예제:</b></p></li></ul><p><!DOCTYPE html></p><p><html></p><p><head></p><p><style></p><p>#main-title { color: red; font-size: 24px; }</p><p></style></p><p></head></p><p><body></p><p><h1 id="main-title">아이디 선택자 예제</h1></p><p><h1>다른 제목</h1></p><p></body></p><p></html></p><p>✅ 결과: id="main-title"인 <h1> 글자만 빨간색 24px로 표시.</p><hr data-ke-style="style1"><p>3️⃣ 클래스 선택자 (Class Selector)</p><ul style="list-style-type: disc;" data-ke-list-type="disc"><li><p><b>설명:</b> HTML 요소에 지정한 class를 선택. 여러 요소에 적용 가능.</p></li><li><p><b>문법:</b> .클래스명 { 속성: 값; }</p></li><li><p><b>예제:</b></p></li></ul><p><!DOCTYPE html></p><p><html></p><p><head></p><p><style></p><p>.highlight { background-color: yellow; font-weight: bold; }</p><p></style></p><p></head></p><p><body></p><p><p class="highlight">이 문단은 강조되어 있습니다.</p></p><p><p>이 문단은 일반 문단입니다.</p></p><p><p class="highlight">이 문단도 강조되어 있습니다.</p><p></p></p><p></body></p><p></html></p><p>✅ 결과: class="highlight"인 <p> 태그만 배경이 노랗고 글자가 굵게 표시.</p><hr data-ke-style="style1"><p>💡 <b>정리:</b></p><p>선택자기호적용 범위</p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td>태그 선택자</td><td>p, h1 등</td><td>해당 태그 전체</td></tr><tr><td>아이디 선택자</td><td>#id명</td><td>해당 id 하나</td></tr><tr><td>클래스 선택자</td><td>.class명</td><td>같은 class를 가진 모든 요소</td></tr></tbody></table></div><hr data-ke-style="style1"><p>원하면 제가 <b>3가지를 동시에 쓰는 예제</b>도 만들어서 한 화면에서 비교해 보여드릴 수도 있어요.<br>그거 만들어 드릴까요?</p><p> </p><p>좋아요! 이번에는 <b>태그 선택자, 아이디 선택자, 클래스 선택자</b>를 <b>한 페이지에서 동시에 사용</b>해서 스타일이 어떻게 적용되는지 보여드릴게요.</p><p><!DOCTYPE html> <br><html> <br><head> <br><style> <br>  /* 1️⃣ 태그 선택자: 모든 <p>에 적용 */ <br>  p { <br>    color: blue; <br>    font-size: 16px; <br>  } <br><br>  /* 2️⃣ 아이디 선택자: id="unique"인 요소에 적용 */ <br>  #unique { <br>    color: red; <br>    font-size: 24px; <br>    font-weight: bold; <br>  } <br><br>  /* 3️⃣ 클래스 선택자: class="highlight"인 요소에 적용 */ <br>  .highlight { <br>    background-color: yellow; <br>    font-style: italic; <br>  } <br></style> <br></head> <br><body> <br><br><p>태그 선택자만 적용된 문단 (파란색, 16px)</p> <br><br><p id="unique">아이디 선택자가 적용된 문단 (빨강, 24px, 굵게)</p> <br><br><p class="highlight">클래스 선택자가 적용된 문단 (파란색 + 노랑 배경 + 이탤릭)</p> <br><br><p id="unique" class="highlight"> <br>  아이디와 클래스가 동시에 적용된 문단<br> <br>  → 아이디 선택자가 우선권을 가지므로 빨간색, 24px, 굵게 + 노랑 배경 + 이탤릭 <br></p> <br><br></body> <br></html></p><hr data-ke-style="style1"><p>🔹 결과 요약</p><ol style="list-style-type: decimal;" data-ke-list-type="decimal"><li><p><b>태그 선택자(p)</b> → 모든 <p> 글자를 파란색, 16px.</p></li><li><p><b>아이디 선택자(#unique)</b> → id가 있는 요소에 스타일 적용 (우선권 최고).</p></li><li><p><b>클래스 선택자(.highlight)</b> → 같은 클래스를 가진 요소에 스타일 적용.</p></li><li><p><b>충돌 규칙:</b></p><ul style="list-style-type: disc;" data-ke-list-type="disc"><li><p>아이디 선택자가 클래스나 태그 선택자보다 우선순위가 높아요.</p></li><li><p>그래서 id="unique"와 class="highlight"가 동시에 있을 때 <b>아이디 색상, 글자크기, 굵기</b>가 적용되고, 클래스 배경색과 글자 스타일은 같이 적용됨.</p></li></ul></li></ol><hr data-ke-style="style1"><p>원하면 제가 이걸 <b>색깔별로 시각화</b>해서 한눈에 우선순위를 보여주는 그림으로 만들어 드릴 수도 있어요.<br>그거 해드릴까요?</p>
<!-- -->
