[CSS] CSS 1강 - CSS 시작하기

이번 시간에는 CSS를 사용하는 방법을 알아보는

시간을 가져보도록 하겠습니다.

HTML로 CSS 시작하기

CSS를 시작하기 위해서는 먼저 HTML 문서를

작성후 그안에 CSS 요소를 작성해야 합니다.

자신의 컴퓨터에서 작업할 경우 아래 코드를

입력후 index.html 파일로 저장해줍니다.

<!DOCTYPE html>
<html lang="ko-KR">

<head>
    <meta charset="UTF-8">
    <title>1-1.CSS-start</title>
</head>

<body>
    <h1>CSS 시작점</h1>

    <p>단락 부분 본문에는 <span>span 요소</span>와 <a href="http://example.com">
            링크</a>가 포함됨</p>

    <ul>
        <li>항목 하나</li>
        <li>항목 둘</li>
        <li>항목 <em>셋</em></li>
    </ul>
</body>

</html>

문서에 CSS 추가하기

문서에 CSS를 추가하기 위해 가장 먼저

해야될 것은 HTML 문서에 사용하려는

CSS 규칙이 있다는 것을 알리는 것 입니다.

CSS를 HTML 문서에 적용하는 방법은

세 가지가 있는데, 지금은 문서의 head에서

연결하는 가장 일반적이고 유용한 방법이

있습니다.

style.css 파일을 index.html에 링크하려면

HTML 문서의 <head> 태그 안에 다음 행을

추가해 줍니다.

 <link rel="stylesheet" href="./css/index.css">

이 <link> 요소는 rel 속성을 사용하는

스타일 시트와 해당 스타일 시트의

위치를 href 속성의 값으로 브라우저에게

알려줍니다. style.css 에 규칙을 추가하여

CSS 가 작동하는지 테스트 할 수 있습니다.

코드 편집기를 사용해 CSS파일에 다음과

같이 추가해줍니다.

h1 {
   color: purple;
}

HTML 및 CSS 파일을 저장하고 웹 브라우저

에서 페이지를 다시 리로드 해줍니다.

문서 상단의 레벨 1 제목은 purple이어야 합니다.

HTML 요소 스타일링

제목을 보라색으로 해 HTML 요소를 대상으로

스타일링을 지정해 주었습니다.

이 작업은 요소 선택자를 대상을 수행됩니다.

문서의 모든 단락을 대상으로 하려면

선택자 p태그를 사용합니다.

모든 단락을 녹색으로 바꾸려면

다음 코드를 입력해 줍니다.

p {
  color: green;
}

선택자를 쉼표로 구분해 여러 선택자를

한 번에 대상으로 지정할 수 있습니다.

모든 단락과 모든 목록 항목을 녹생으로

만드려면 규칙은 다음과 같습니다.

p,li {
  color: green;
}

요소 (elements)의 기본 동작 변경

예제와 같이 간단한 HTML 문서를 살펴보면

기본 스타일을 추가해 브라우저가 HTML을

읽을 수 있게 만드는 방법을 알 수 있습니다.

제목은 크고 대담하며 목록에는 글머리

기호가 있습니다.

이는 브라우저에서 기본 스타일을

포함하는 내부 스타일 시트가 있기 때문에

기본적으로 모든 페이지에 적용됩니다.

종종 브라우저에서 선택한 것 이외의

것을 원하고, 변경하려는 HTML 요소를

선택하고 CSS 규칙을 사용하여

모양을 변경하시면 됩니다.

CSS 규칙을 사용해 모양을 변경하는

예로 ul 태그가 있습니다.

만약 ul 태그 글머리 기호를 없애려면

다음과 같이 제거할 수 있습니다.

li {
  list-style: none;
}

class 추가하기

지금까지 HTML 요소 이름을 기반으로

요소의 스타일을 지정했습니다.

그런데 대부분의 경우에 이렇게 태그로

스타일할 경우 모든 태그 요소들이

스타일링되서 만약 원하는 태그만

스타일링 하려다 모든 태그가 전체

스타일링이 이뤄지는 현상이 발생합니다.

이를 방지하기 위해서는 태그를 사용하지 않고

바로 class요소를 사용해서 css 스타일링을

하시면 되겠습니다.

<ul>
    <li class="special">항목 하나</li>
    <li>항목 둘</li>
    <li>항목 <em>셋</em></li>
</ul>

.special {
  color: rgb(255, 91, 236);
  font-weight: bold;
}

저장 후 새로고침해 결과를 확인해봅니다.

이 목록 항목과 동일한 모양을 원하는

페이지의 모든 요소에 special class를

적용할 수 있습니다.

예를 들어, 단락의 도 주황색과

굵게 표시할 수 있습니다.

special class를 추가한 다음, 페이지를

새로 고침하여 어떻게 되는지 봅시다.

li,
.special {
  color: rgb(255, 91, 236);
  font-weight: bold;
}

이 코드는 spacial class를 가진 모든 li 요소를

대상으로 하는 코드입니다.

이 작업을 수행하려면, 단순히 class를

추가하기만 하면 더이상 calss를 또는

다른 요소에 적용할 수 없습니다.

해당 요소를 선택자 목록에 추가합니다.

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

문서 위치에 따라 스타일 지정하기

문서에서의 위치에 따라 무언가

다르게 보일 때가 있습니다.

이 문서에는 두 개의 요소가

있습니다. 하나는 단락 안에

또 하나는 목록 항목 안에 있습니다.

<li> 요소 안에 중첩된 태그만

선택하려면 descendant combinator라는

선택자를 사용하면 됩니다.

스타일 시트안에 다음과 같은 규칙을

추가해 줍니다.

li em {
  color: royalblue;
}

이 선택자는 <li>의 하위 요소인

요소를 선택합니다.

따라서 예제 문서에서 세 번째

목록 항목의 은 파란색 이지만

단락 안의 항목은 변경되지 않았음을

알 수 있습니다.

HTML의 동일한 계층 구조 수준에서

제목 바로 다음에 오는 단락의 스타일을

지정해 볼 수 있습니다.

이렇게 하려면 선택자 안에 + 를

추가해 주면 됩니다.

h1 + p {
  font-size: 100%;
}

상태에 따른 스타일링

이제 스타일링의 마지막 유형은

상태에 따라서 스타일을 지정할 수

있는 기능입니다.

이에 대한 간단한 예제로 링크 스타일

인데 링크의 스타일을 지정할 떄는

<a> 요소를 대상으로 해야합니다.

링크에 방문했는지 현재 방문 중인지

마우스가 오버 상태인지, 키보드를 통해

포커스 또는 클릭(활성화) 여부에 따라서

각각 상태가 다릅니다.

a:link {
  color: pink;
}

a:visited {
  color: green;
}

사용자가 링크위에 마우스를 올릴때

모양을 변경할 수 있습니다

a:hover {
  text-decoration: none;
}

선택자와 결합자를 결합

여러 선택자와 결합자를 함께 결합할 수

있습니다. 예를 들면 다음과 같습니다.

/* <article> 내부의 <p> 안에 있는 모든 <span> 을 선택합니다  */
article p span { ... }

/* <h1> 바로 뒤에 오는 <ul> 바로 뒤의 모든 <p> 를 선택합니다  */
h1 + ul + p { ... }

여러 유형을 함께 결합 할 수도 있습니다.

코드에 다음과 같이 추가해 줍니다.

body h1 + p .special {
  color: plum;
  background-color: cyan;
  padding: 5px;
}

이것은 <body> 태그 안에 있는

<h1> 바로 뒤에 오는 안에 있는

special 클래스를 가진 요소를

스타일링 해주는 코드입니다.

우리가 제공한 원본 HTML 에서

스타일이 지정된 유일한 요소는

span 태그안에 class 로 선언해준

special 요소입니다.

참고 문서

CSS 로 시작하기 | MDN

이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.

developer.mozilla.org

GitHub - CSS-STR/css-blog-tutorial

Contribute to CSS-STR/css-blog-tutorial development by creating an account on GitHub.

github.com

'프론트 엔드 > CSS' 카테고리의 다른 글

[CSS] CSS 2강 - CSS의 구조를 알아보자 (0)	2023.02.20
[CSS] CSS 란 무엇인가? - CSS3의 등장 (0)	2023.02.17
[CSS,JS] CSS 노트 원고지 만들기 (0)	2022.02.27

참고 문서

'프론트 엔드 > CSS' 카테고리의 다른 글

티스토리툴바