CSS 선택자 기초

소개

CSS 선택자 기초 실습에 오신 것을 환영합니다! Cascading Style Sheets (CSS) 는 HTML 과 같은 마크업 언어로 작성된 문서의 표현 방식을 설명하는 데 사용되는 웹의 핵심 기술입니다.

CSS 선택자는 스타일을 적용하려는 HTML 요소를 선택하고 스타일링하는 데 사용되는 패턴입니다. 선택자를 숙달하는 것은 모든 웹 개발자에게 기본적인 기술입니다. 이 실습에서는 가장 일반적인 유형의 CSS 선택자를 사용하여 간단한 웹 페이지를 스타일링하는 방법을 배우게 됩니다.

다음 내용을 연습하게 됩니다:

• 요소 선택자 (Element Selector): 태그 이름을 사용하여 요소를 타겟팅합니다.
• 클래스 선택자 (Class Selector): 특정 class 속성을 가진 요소를 타겟팅합니다.
• ID 선택자 (ID Selector): 특정 id 속성을 가진 단일 요소를 타겟팅합니다.
• 그룹화 선택자 (Grouping Selector): 여러 선택자에 동일한 스타일을 적용합니다.
• 자손 선택자 (Descendant Selector): 다른 요소의 자손인 요소를 타겟팅합니다.

실습 환경에는 index.html 파일이 미리 구성되어 있습니다. 여러분의 임무는 styles.css 파일에 CSS 코드를 작성하여 페이지를 스타일링하는 것입니다. 인터페이스 왼쪽 상단에 있는 Web 8080 탭으로 전환하여 변경 사항을 실시간으로 미리 볼 수 있습니다.

p 태그에 요소 선택자 사용하기

이 단계에서는 요소 선택자를 사용하여 페이지의 모든 <p> (단락) 요소에 스타일을 적용합니다. 요소 선택자는 가장 기본적인 선택자 유형으로, 태그 이름을 기반으로 HTML 요소를 선택합니다.

먼저, WebIDE 왼쪽의 파일 탐색기에서 styles.css 파일을 찾으십시오. 파일을 클릭하여 편집기에서 엽니다.

이제 styles.css 파일에 다음 CSS 코드를 추가합니다. 이 규칙은 모든 <p> 요소를 선택하고 텍스트 색상을 파란색으로 변경합니다.

p {
  color: blue;
}

코드를 추가한 후 파일을 저장합니다 (Ctrl+S 또는 Cmd+S 사용 가능). 효과를 보려면 Web 8080 탭을 클릭하십시오. 페이지에 있는 세 개의 모든 단락 텍스트가 파란색으로 변경된 것을 볼 수 있습니다.

.classname 을 사용하여 클래스 선택자 적용하기

이 단계에서는 클래스 선택자를 사용하는 방법을 배우게 됩니다. 클래스 선택자는 요소 선택자보다 더 구체적입니다. class 속성의 값을 기반으로 요소를 선택합니다. 클래스 선택자는 점 (.) 뒤에 클래스 이름을 붙여 작성합니다.

index.html 파일에서 단락 중 하나에 class="highlight" 속성이 있습니다. 이 특정 단락을 타겟팅할 것입니다.

styles.css 파일에 다음 CSS 규칙을 추가합니다. 이 규칙은 highlight 클래스를 가진 모든 요소를 선택하고 노란색 배경을 적용합니다.

.highlight {
  background-color: yellow;
}

styles.css 파일을 저장하고 Web 8080 탭으로 전환하여 변경 사항을 확인합니다. "This is a special paragraph with a class"라는 텍스트를 가진 단락만 노란색 배경을 가지게 되고, 다른 단락은 영향을 받지 않는 것을 알 수 있습니다.

#idname 을 사용하여 ID 선택자 구현하기

이 단계에서는 ID 선택자를 사용합니다. ID 선택자는 클래스 선택자보다 훨씬 더 구체적입니다. 특정 id 속성을 가진 고유한 요소를 하나 선택하는 데 사용됩니다. ID 선택자는 해시 문자 (#) 뒤에 요소의 ID 를 붙여 작성합니다. ID 는 단일 HTML 페이지 내에서 고유해야 한다는 점을 기억하십시오.

index.html 파일의 <h1> 요소에는 id="main-title"가 있습니다. 이 요소를 스타일링해 보겠습니다.

styles.css 파일에 다음 CSS 규칙을 추가합니다. 이 규칙은 메인 제목의 글꼴 크기를 늘리고 그 아래에 실선 검은색 테두리를 추가합니다.

#main-title {
  font-size: 32px;
  border-bottom: 2px solid black;
}

파일을 저장하고 Web 8080 탭을 확인합니다. 메인 제목 "Welcome to Our Page"가 더 커지고 그 아래에 선이 생긴 것을 볼 수 있습니다. 이 스타일은 main-title ID 를 가진 요소에만 적용됩니다.

쉼표를 사용하여 선택자 그룹화하기

이 단계에서는 코드를 반복하지 않고 여러 선택자에 동일한 스타일을 적용하는 방법을 배우게 됩니다. 그룹화 선택자를 사용하면 각 선택자를 쉼표로 구분하여 이 작업을 수행할 수 있습니다.

페이지의 <h1> 및 <h2> 요소 모두에 동일한 글꼴을 적용한다고 가정해 보겠습니다. 두 개의 별도 규칙을 작성하는 대신 그룹화할 수 있습니다.

styles.css 파일에 다음 CSS 규칙을 추가합니다.

h1,
h2 {
  font-family: Arial, sans-serif;
}

이 규칙은 브라우저에 지정된 font-family를 모든 <h1> 요소와 모든 <h2> 요소에 적용하도록 지시합니다.

파일을 저장하고 Web 8080 탭을 새로고침합니다. "Welcome to Our Page"와 "About CSS" 모두의 글꼴이 어떻게 변경되었는지 관찰합니다.

div p 와 같은 자손 선택자 추가하기

이 단계에서는 자손 선택자를 사용합니다. 이 선택자는 지정된 요소의 자손인 모든 요소를 일치시킵니다. 자손 선택자는 공백으로 구분된 두 개 이상의 선택자를 나열하여 생성됩니다.

저희 index.html에는 <div> 안에 <p> 요소가 있습니다. 페이지의 다른 단락이 아닌 이 특정 단락만 스타일링하고 싶습니다.

styles.css 파일에 다음 CSS 규칙을 추가합니다. div p 선택자는 <div> 요소 내부에 어디에 있든 모든 <p> 요소를 선택합니다.

div p {
  font-style: italic;
}

파일을 저장한 후 Web 8080 탭으로 이동합니다. "This paragraph is inside a div..." 단락만 이제 이탤릭체로 표시되는 것을 볼 수 있습니다. 다른 두 단락은 <div>의 자손이 아니므로 변경되지 않은 상태로 유지됩니다.

요약

실습을 완료하신 것을 축하드립니다! 웹 페이지를 스타일링하기 위한 기본적인 CSS 선택자를 성공적으로 학습하고 적용했습니다.

이번 실습에서는 다음을 연습했습니다.

• 요소 선택자 (p): 특정 유형의 모든 요소를 스타일링합니다.
• 클래스 선택자 (.highlight): 클래스를 공유하는 특정 요소를 스타일링합니다.
• ID 선택자 (#main-title): 단일하고 고유한 요소를 스타일링합니다.
• 그룹화 선택자 (h1, h2): 여러 요소에 동일한 스타일을 효율적으로 적용합니다.
• 자손 선택자 (div p): 다른 요소 내에서의 위치에 따라 요소를 스타일링합니다.

이러한 선택자들은 복잡하고 아름다운 웹 페이지 레이아웃을 만드는 데 필수적인 요소입니다. 이제 이를 사용하여 HTML 문서의 모양을 정확하게 제어할 수 있습니다.