로그인 회원가입

1.2 선택자와 속성

약 6분

본문 듣기
읽기 설정

글자 크기

줄 간격

글꼴

1.2 선택자와 속성

이 챕터에서는 CSS에서 가장 기본적인 개념인 선택자와 속성에 대해 배웁니다. CSS란 웹 페이지의 스타일을 정하는 언어로, 선택자는 우리가 스타일을 적용하고자 하는 HTML 요소를 지정하는 방법입니다. 이와 함께 선택자로 지목한 요소에 적용할 수 있는 다양한 속성들에 대해서도 알아보겠습니다.

선택자란?

선택자는 특정 HTML 요소를 선택해서 그 요소에 스타일을 적용하기 위한 규칙입니다. 예를 들어, h1 태그에 스타일을 주고 싶다면, CSS에서 선택자를 h1로 지정합니다.

속성이란?

속성은 선택한 요소에 적용할 스타일의 속성을 의미합니다. 예를 들어 색상, 글꼴 크기, 여백 등이 속성에 해당합니다. 각각의 속성은 특정 값을 가질 수 있으며, 이 조합을 통해 다양한 스타일을 만들 수 있습니다.

예제 - 기본 선택자 사용하기

다음은 간단한 HTML 문서와 CSS 스타일을 활용하여 h1 태그에 스타일을 적용하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자 예제</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>안녕하세요, CSS 선택자!</h1>
</body>
</html>

/* h1 태그에 대한 스타일 정의 */
h1 {
    color: blue;  /* 글자 색상 */
    font-size: 2em; /* 글자 크기 */
    text-align: center; /* 텍스트 정렬 */
}

위의 HTML 문서에서는 h1 태그에 "안녕하세요, CSS 선택자!"라는 텍스트가 있습니다. 그리고 CSS에서는 이 h1 태그에 대해 글자 색상을 파란색으로 설정하고, 크기를 두 배로 확대하며, 중앙 정렬을 적용했습니다.

실습 - 나만의 웹페이지 만들기

이제 최초의 웹페이지에 자신만의 스타일을 추가해보세요. 기본 형태의 HTML 문서를 만들고, 여러 개의 요소(h1, p, div)를 포함하여 각기 다른 속성을 사용하여 스타일을 적용해보세요. 아래의 과제를 참고하여 진행해 보십시오.

  1. 새로운 HTML 파일을 만들고 기본적인 문서 구조를 설정합니다.
  2. h1 태그, p 태그, div 태그를 사용하여 내용물을 추가합니다.
  3. 각 태그에 대해 선택자를 사용하여 다양한 스타일을 추가합니다. 예를 들어, 다른 색상, 글꼴 크기, 여백 등을 설정합니다.

자주 발생하는 오류 및 해결 방법

  • 선택자가 제대로 적용되지 않음: 선택자 이름이 HTML 태그 이름과 일치하는지 확인하세요. 만약 클래스를 사용하고 있다면, .클래스명 형태로 지정해야 합니다.
  • 스타일이 다른 스타일에 덮어씌워짐: CSS 파일에서 특정 스타일이 다른 스타일보다 아래에 있거나 더 구체적인 선택자가 우선할 수 있기 때문에, 우선순위를 고려해 수정해야 할 필요가 있습니다.

실습 결과 화면

개인 웹사이트의 얼개가 완성되면, 다양한 스타일이 적용된 텍스트가 서로 다른 색상과 크기로 표시될 것입니다. h1 태그는 두 배 크기로, p 태그는 기본 크기로, div 태그는 배경색이 다르게 나타나게 됩니다. 각 요소의 스타일이 잘 적용되었다면, CSS의 선택자를 이해하고 잘 활용할 수 있다는 것입니다.

정리

본 챕터에서는 CSS의 기본 선택자와 속성에 대해 배웠습니다. CSS를 통해 궁극적으로 웹 페이지의 모양과 느낌을 조정할 수 있으며, 적절한 선택자 사용이 매우 중요합니다. 다음 챕터에서는 더 다양한 선택자에 대해 알아보겠습니다.

코드 html 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자 예제</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>안녕하세요, CSS 선택자!</h1>
</body>
</html>
코드 css 
/* h1 태그에 대한 스타일 정의 */
h1 {
    color: blue;  /* 글자 색상 */
    font-size: 2em; /* 글자 크기 */
    text-align: center; /* 텍스트 정렬 */
}
좋아요 0

댓글 0

댓글을 남기려면 로그인하세요.

아직 댓글이 없습니다. 첫 댓글을 남겨보세요.