CSS - 4. Introduction to CSS

1. CSS(Cascading Style Sheets)

HTML만으로도 사이트를 만들 수 있지만, 화려한 웹사이트를 만들려면 HTML과  CSS가 필요하다.

CSS란 HTML 태그들에 디자인을 입혀주는 것이다. HTML이 헤더, 문단, 테이블 등으로 정보를 조직화하는 구조를 제공한다면, CSS는 HTML이 아름다워 보이도록 스타일을 입히는 것이다.

 

---

2. CSS 적용

css를 작성한 후 html에 적용되도록 반영하는 방법은 3가지가 있다.

인라인 스타일 : 태그 style 속성에 직접 작성할 수 있다. (예. <h1 style="color: red;"> Hello </h1>) 이 방법은 빠르고 편리하다. 하지만, h1태그에 글씨 색상뿐만 아니라, 적용해야 할 스타일이 10개가 넘어간다면 코드 가독성이 떨어진다는 단점이 있다. 또한 html 태그와 style 코드가 혼재되어 있어 유지보수에도 좋지 않다. 


style 태그 : html 파일 내에 css를 작성할 수 있는 방법이다.  <style> 사이에 css 문법을 사용하여 스타일을 작성한다.

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

이 방법 또한 html 파일에 html 코드도 작성하고, css도 작성하니 편하고 빠른방법이지만, 기능적으로(html 구조와 디자인) 분리되지 않았기 때문에 유지보수에 적합하지 않다. html을 수정하려면 html 파일을 확인하고, 디자인을 수정하려면 css파일을 확인하는 것이 개발하기 좋다.

 

 

css 파일에 작성 : 1, 2번은 html 파일에 직접 디자인을 했다면, 3번의 방법은 html 파일과 분리하여 css파일에 따로 작성하는 방법이다. html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로, 링크를 해주는 태그를 추가해야 한다.

(예.) <link href="index.css" rel="stylesheet" type="text/css" /> 

1. link - link태그로 사용할 css파일을 링크해준다.

2. href - href 속성에 css 파일 경로를 작성한다.

3. type - link태그로 연결되는 파일이 어떤 것인지 알려준다. 여기서 css file을 연결하므로 type값은 항상 "text/css"이다.

4. rel - rel은 html file과 css file과의 관계를 설명하는 속성이다. css파일을 링크할 때는 항상 "stylesheet" 값을 대입해준다.

 

---

3. CSS  작성법

디자인을 적용할 선택자(selector) 를 지정하고, 어떤 디자인을 적용할지 작성한다.

 

css 작성법

위의 그림은 p라는 태그의 내용(텍스트)의 색깔을 빨간색으로 바꾼다는 뜻이다. 콜론(:)을 기준으로 왼쪽의 color는 property(속성)이라고 하며, 오른쪽의 red는 속성 값이다. selector(선택자)는 여러 종류가 올 수 있다. 태그 이름도 올 수 있고, class, id이름도 올 수 있다.

 

tag: 태그이름 

p {
  font-size: 12px;
}

이러한 css가 적용되면, 모든 p태그의 글씨 크기가 12픽셀로 적용된다.

 

class:. 클래스 이름

.className{
  /*디자인*/
}
/*예*/
.profile-detail {
  font-weight: bold;
  }

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

 

id:#아이디 이름

#idName{
/*디자인*/
}
/*예*/
#profile {
  border-width: 1px;
  border-color: black;
  border-style: solid;
  text-align: center;
}

profile이라는 아이디를 가진 태그에 위와 설정한 것처럼 디자인이 변하게 된다.