CSS 기본 및 선택자

소개

CSS 에 오신 것을 환영합니다!

이 랩에서는 새로운 애완동물 서비스를 위한 매력적이고 스타일리시한 웹사이트를 제작하는 신진 웹 개발자 Alex 의 입장이 되어보겠습니다. 목표는 제공되는 서비스를 소개하고, 팀을 소개하며, 잠재 고객이 쉽게 연락할 수 있는 방법을 제공하는 것입니다. 배경은 애완동물 소유가 증가하고 양질의 애완동물 관리 서비스에 대한 수요가 급증하는 번화한 도시입니다. Alex 의 임무는 기본적인 CSS 기술과 선택자를 사용하여 시각적으로 매력적이고 사용자 친화적인 경험을 만들어 경쟁 시장에서 돋보이는 웹사이트를 디자인하는 것입니다.

다음으로 "Pet's House"의 CSS 를 완성하기 위해 5 개의 랩을 진행할 것입니다.

CSS 선택자

웹 페이지를 열고, 키보드에서 F12를 눌러 개발자 도구를 열면, Elements 와 Styles 의 두 부분을 볼 수 있습니다.

HTML 을 공부했다면, Elements 는 페이지 레이아웃에 사용되는 다양한 HTML 태그이고, Styles 는 페이지의 CSS 라는 것을 알고 있을 것입니다.

CSS 를 사용하여 HTML 요소의 색상, 크기, 모양 등을 변경하고 애니메이션을 적용할 수 있습니다.

CSS 의 유용성을 알았으니, 이제 한 가지 문제에 대해 생각해 볼 필요가 있습니다. 페이지에 요소가 너무 많은데, 어떻게 특정 스타일을 요소의 지정된 위치에 추가할 수 있을까요?

CSS 선택자를 사용하여 스타일을 지정하려는 요소를 선택한 다음, CSS 속성을 사용하여 적용하려는 스타일을 지정할 수 있습니다.

가장 기본적인 CSS 선택자부터 시작해 보겠습니다.

CSS 선택자는 CSS 규칙의 첫 번째 부분입니다. 이는 브라우저에게 CSS 규칙 내의 CSS 속성 값을 적용해야 하는 HTML 요소를 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소는 선택자의 주체라고 합니다.

CSS 선택자에는 여러 유형이 있으며, 가장 기본적인 유형은 다음과 같습니다.

• 타입 선택자 (Type selectors)
• 클래스 선택자 (Class selectors)
• ID 선택자 (ID selectors)
• 자손 선택자 (Descendant Selector)
• 유니버설 선택자 (Universal Selector)

타입 선택자 (Type selectors)

페이지에서 특정 유형의 태그에 통일된 스타일을 설정해야 하는 경우, 태그 선택자를 사용해야 합니다. 여기서 태그 선택자의 키워드는 태그의 이름을 따서 명명됩니다.

예를 들어, 페이지의 모든 <p> 태그의 글꼴 색상을 빨간색으로 설정하려면 다음 CSS 규칙을 사용합니다.

클래스 선택자 (Class selectors)

클래스 선택자를 정의할 때는 마침표와 클래스 이름으로 정의해야 하며, 해당 클래스 선택자를 사용할 때는 해당 클래스 선택자를 사용하는 요소의 태그에 class="class-name" 속성 (마침표 없이) 을 추가하여 해당 태그가 지정된 클래스 선택자를 사용함을 나타내야 합니다.

예를 들어, class="text-paragraph"를 가진 HTML 요소의 글꼴 크기를 50 픽셀로 설정하려면 다음 CSS 규칙을 사용합니다.

ID 선택자 (ID selectors)

ID 선택자는 특정 ID 로 표시된 HTML 요소에 특정 스타일을 지정합니다.

ID 선택자를 정의할 때는 "#" 기호와 ID 이름으로 선택자를 정의해야 하며, ID 선택자를 사용할 때는 HTML 태그 요소에 id="id name" 속성 ( "#" 기호 없이) 을 추가하여 해당 HTML 요소의 ID 를 지정해야 합니다. 이 ID 는 HTML 문서 내에서 고유해야 합니다.

예를 들어, id="list-option"을 가진 HTML 요소의 글꼴 색상을 파란색으로 설정하려면 다음 CSS 규칙을 사용합니다.

자손 선택자 (Descendant Selector)

자손 선택자는 태그 내의 모든 태그 요소를 선택하며, 자식과 다른 자손을 포함합니다.

자손 선택자를 사용할 때는 부모 태그의 이름과 자손 태그의 이름을 공백으로 구분하여 태그 내의 자손 요소를 식별해야 합니다.

예를 들어, <div> 요소의 자식인 <span>에 대해 텍스트 색상을 아쿠아로 설정합니다.

유니버설 선택자 (Universal Selector)

유니버설 선택자는 HTML 문서의 모든 요소를 선택합니다. 유니버설 선택자를 사용할 때는 "*" 기호를 사용해야 합니다.

예를 들어, 모든 요소의 텍스트 크기를 50 픽셀로 설정해 보겠습니다.

이제 선택자를 사용하는 방법을 알았으니, 다양한 스타일 속성을 사용하는 방법을 배워보겠습니다.

배경색 및 텍스트 색상

보시다시피, 페이지의 서로 다른 부분은 서로 다른 배경색을 가지고 있습니다. CSS 에서 background-color를 사용하여 요소의 배경색을 설정할 수 있습니다.

Pet 웹사이트에서 헤더, 소개 섹션, 연락처 섹션, 푸터의 배경색은 rgb(233, 174, 87) 및 rgb(239, 206, 157)이고, 소개 섹션, 연락처 섹션, 푸터의 글꼴 색상은 #fff이므로, 아래와 같이 배경색과 글꼴 색상을 설정해야 합니다.

• background-color는 배경색을 설정하는 데 사용됩니다.

• color는 글꼴 색상을 설정하는 데 사용됩니다.

header {
  background-color: rgb(233, 174, 87);
}
.story-sect {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
.contact-section {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
}

높이 및 너비

이제 로고와 같이 일부 요소가 너무 크다는 것을 알 수 있습니다. height를 사용하여 요소의 높이를 설정하고 width를 사용하여 요소의 너비를 설정합니다.

.logo-section {
  width: 10%;
}
.logo {
  max-width: 60%;
}

.box-feature {
  width: 60%;
  max-height: auto;
}

.box-feature img {
  width: 100%;
}
.service {
  width: 100%;
  color: black;
}
.service img {
  max-width: 100%;
  max-height: auto;
}

max-width CSS 속성은 요소의 최대 너비를 설정합니다. 이는 width 속성의 사용된 값이 max-width에 의해 지정된 값보다 커지는 것을 방지합니다.

max-height CSS 속성은 요소의 최대 높이를 설정합니다. 이는 height 속성의 사용된 값이 max-height에 대해 지정된 값보다 커지는 것을 방지합니다.

리스트 스타일

순서가 없는 목록의 기본 스타일은 각 목록 항목에 점이 있는 것입니다. list-type 속성을 사용하여 목록 항목 앞에 있는 점을 제거합니다.

ul {
  list-style: none;
}

텍스트 속성

텍스트 장식 (Text Decoration)

a 요소는 기본적으로 밑줄이 쳐져 있습니다. text-decoration 속성을 사용하여 밑줄을 제거합니다.

a {
  color: grey;
  text-decoration: none;
}

텍스트 변환 (Text Transform)

애완동물 페이지의 nav, footer 및 각 영역의 제목은 모두 대문자로 표시됩니다. text-transform 속성을 사용하여 텍스트의 대소문자를 변경합니다.

text-transform CSS 속성은 요소의 텍스트를 어떻게 대문자화할지 지정합니다. 모든 대문자 또는 모든 소문자로 표시하거나 각 단어의 첫 글자를 대문자로 표시하는 데 사용할 수 있습니다.

h2 {
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  text-transform: uppercase;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
  text-transform: uppercase;
}

텍스트 크기 (Text Size)

font-size를 사용하여 텍스트의 크기를 변경합니다. 텍스트의 크기가 애완동물 페이지의 크기와 다르다는 것을 알 수 있습니다.

body {
  font-size: 1.2vw;
}
h1 {
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  text-transform: uppercase;
}

글꼴 크기를 설정할 때 다양한 단위를 사용합니다. 일반적으로 다음과 같은 다섯 가지 유형의 단위가 있습니다.

텍스트 정렬 (Text Align)

애완동물 페이지에서 제목 텍스트를 가운데 정렬하려면 text-align 속성을 사용하여 텍스트 표시 위치를 설정할 수 있습니다.

h1 {
  text-align: center;
  font-size: 4em;
}
section h2 {
  text-align: center;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
}
.section-text h2 {
  text-align: center;
}
.samples {
  text-align: center;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
}
footer span {
  text-align: center;
}

텍스트 굵기 (Text Weight)

font-weight 속성은 텍스트의 굵기를 설정하는 데 사용됩니다.

body {
  font-weight: 400;
  font-size: 1.2vw;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
}

문자 간격 (Letter Spacing)

애완동물 페이지에서 문자 사이에 일정량의 간격이 있는 것을 관찰할 수 있습니다. letter-spacing 속성을 사용하여 텍스트 문자 사이의 간격을 설정할 수 있습니다.

letter-spacing CSS 속성은 텍스트 문자 사이의 수평 간격 동작을 설정합니다. 이 값은 텍스트를 렌더링하는 동안 문자의 자연 간격에 추가됩니다.

body {
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2vw;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
}

요약

이 랩에서는 Alex 와 함께 "Pet's House" 웹사이트를 만드는 여정을 시작했습니다. 프로젝트 작업 공간을 설정하고 기본적인 CSS 스타일을 적용했으며, 웹사이트의 탐색 기능을 향상시키기 위해 다양한 CSS 선택자를 실험했습니다. 이러한 단계를 통해 CSS 기본 사항과 선택자에 대한 실질적인 경험을 얻었으며, 이는 모든 웹 개발 지망생에게 중요한 기술입니다. 이 랩은 향후 프로젝트에서 탐구할 더 진보된 웹 개발 개념과 기술의 기반을 마련했습니다.