TIL-3 CSS는 뭘까? 🎨

PRB·2021년 6월 27일

목록 보기

1/5

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

선택자 {속성:값;
}
선택자 {속성:값;
} /* 주석은 이렇게 작성한다. */

CSS 적용 3가지 방법

1.css 파일에 작성

html 파일과 분리하여 css파일에 따로 작성하는 방법이다.
html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로, 링크를 해주는 태그를 추가해야 한다.
방법은 head 태그 안에 link 태그를 이용하여 연결시켜준다.

<head>
    <title>자기소개</title>
    <link rel="stylesheet" type="text/css" href="파일이름.css">
</head>

link link태그로 사용할 css파일을 링크해준다.
href href 속성에 css 파일 경로를 작성한다.
type link태그로 연결되는 파일이 어떤 것인지 알려준다. 여기서 css file을 연결하므로 type값은 항상 "text/css"
rel rel은 HTML file과 CSS file과의 관계를 설명하는 속성이다. css파일을 링크할 때는 항상 "stylesheet"값을 대입 !

2. style 태그

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

<head>
    <title>자기소개</title>
    <style>
    선택자 {속성:값;
  	}
    선택자 {속성:값;
	}
    </style>
</head>

html 파일에 HTML 코드도 작성하고, CSS도 작성하니 편하고 빠른 방법

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

HTML을 수정하려면 html 파일을 확인하고, 디자인을 수정하려면 css파일을 확인하는 것이 개발하기 좋다.

3.인라인 스타일

태그 style 속성에 직접 작성할 수 있다.

<a herf="1.html" style="속성:값;">

빠르고 편하다.

적용해야할 스타일이 많아지면 코드 가독성이 떨어진다.

html 태그와 style코드가 혼재되어 있어 유지보수에도 좋지 않다.

PRB

사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

다음 포스트

TIL-3 CSS는 뭘까? 🎨

CSS

CSS 적용 3가지 방법

1.css 파일에 작성

2. style 태그

3.인라인 스타일

TIL-4 CSS 선택자& 단위

0개의 댓글