HTML,CSS

5. CSS(Cascading Style Sheets)

빈코더 2021. 1. 11. 20:03
728x90

1. CSS(Cascading Style Sheets)

뜬금 없이 왠 CSS냐고 하실 수 도 있는데

 

html과 css는 뗄 수 없는 관계기 때문에 한번만 보고 가도록 하겠습니다.

 

CSS란 HTML 요소들에 디자인을 입혀주는 것 입니다. 

 

HTML이 헤더, 문단, 테이블 등으로 정보를 조직화하는 구조를 제공한다면,

 

CSS는 HTML이 아름다워 보이도록 스타일을 입히는 것입니다.

2 . CSS 적용

css를 작성 후 HTML에 적용하는 방법은 3가지가 있습니다.

  1. 인라인 스타일
  2. style 태그
  3. css 파일에 작성

차례 대로 알아보도록 하겠습니다.

2 - 1. 인라인 스타일

태그 style 속성에 직접 작성하는 방법입니다.

<h1 style="color: red;">FRONTEND 101</h1>

h1 tag에 style속성을 주고 color을 red로 지정해주니 위와 같이 빨간색 frontend 101이 출력되었습니다.

 

이 방법은 간단해 보이지만 적용해야할 스타일이 많아진다면 코드 가독성이 떨어집니다.

 

그리고 html tag와 style code가 혼재되어 있어 유지보수에도 좋지 않습니다.

2 - 2. style tag

html 파일 내에 css를 작성할 수 있는 방법입니다.

<style>
 h2 {
  color: #408090;
 }
</style>

이 방법 또한 html파일에 html 코드도 작성하고 css도 작성하니 편하고 빠른 방법입니다.

 

하지만 이 또한 기능적으로 (HTML구조와 디자인) 분리되지 않았기 때문에 유지보수에 적합하지 않습니다.

 

html을 수정하려면 html파일을 확인하고,

디자인을 수정하려면 css파일을 확인하는 것이 개발하기 좋습니다.

2 - 3. css파일 작성

위 두가지 방법은 html파일에 직접 작성을 했다면,

 

이 방법은 css 파일을 하나 만들어서 작성하는 방법입니다.

 

사용 방법은 간단합니다. 

 

1. <head>에 css 파일을 가리키는 link 태그로 css파일을 지정해주고,

 

2. href 속성에 css 파일 경로를 작성합니다.

 

3. type로 link태그로 연결되는 파일이 무엇인지 알려줍니다. css 파일을 연결하므로 type값은 항상 "text/css"입니다.

 

4. rel은 HTML 파일과 CSS 파일과의 관계를 설명하는 속성입니다. css파일을 링크할땐 항상 "stylesheet"값을 줍니다.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

3. css 파일 작성법

css 파일 작성법을 배워봅시다.

 

디자인을 적용할 선택자를 지정하고, 어떤 디자인을 적용할지 작성합니다.

<h1 style="color: red;">FRONTEND 101</h1>

위 코드를 다시한번 살펴보면 

 

FRONTEND 101을 빨간색으로 변환하는 코드입니다.

 

콜론 (:)을 기준으로 왼쪽 color은 property(속성)이라고 하며, 오른쪽 red는 속성 값입니다.

 

선택자는 여러 종류가 올수 있으며 class, id 이름도 올수 있습니다.

p {
  font-size: 12px;
}

위 와 같이 css파일에 작성하면 모든 p tag의 글씨가 12 size로 변경이 됩니다.

4. class: .클래스 이름

selector가 태그였을 때는 단순히 태그이름만 적어주었습니다.


그런데 클래스에 디자인을 적용하고 싶을 때는 selector에 .(dot)이 필요합니다.


아래와 같이 .(dot)클래스이름 이라고 selector를 작성해주어야 합니다.

.profile-detail {
  font-weight: bold;
}

"profile-detail" 이라는 클래스가 적용된 태그에는 모두 글씨 두께가 두꺼워 집니다.

<p class="profile-detail">이것도 두꺼워 지고</p>
<span class="profile-detail">이것도</span>
<div class="profile-detail">그리고 이것도..</div>

id: #아이디이름


이번에는 id이름입니다.

 

해당 id의 요소만 스타일이 적용됩니다.

#profile {
  border-width: 1px;
  border-color: black;
  border-style: solid;
  text-align: center;
}
728x90

'HTML,CSS' 카테고리의 다른 글

7. 문구 스타일  (0) 2021.01.11
6. Font Style  (0) 2021.01.11
4. HTML Attribute(속성)  (0) 2021.01.11
3. 여러 tag를 알아보자 1장 (h1 ~ h6, span, p, a, div)  (0) 2021.01.11
2. HTML 파일의 구조  (0) 2021.01.11