CSS 란, CSS과 HTML 연결하기, css 기본 문법

📌Language/HTML & CSS

CSS 란, CSS과 HTML 연결하기, css 기본 문법

hellohailie 2022. 4. 16. 23:12

css란

Cascading Style Sheets(CSS)

웹 페이지를 사람에 비유해보자면, 마크업 언어(HTML)는 몸의 구조(뼈, 근육)를 담당하고

CSS는 옷과 신발과 같이 외적으로 꾸며주는 역할을 한다고 생각하면 이해하기 쉽습니다.

CSS와 HTML

CSS는 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어입니다.

HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인합니다.

CSS는 분명히 HTML과는 독립된 다른 언어지만 마크업 문서 자체가 존재하지 않으면

CSS는 무용지물이나 마찬가지입니다.

왜냐하면, CSS는 표현을 위한 언어인데 마크업 문서가 없다면 표현할 대상이 없기 때문입니다.

그래서 CSS는 보통 마크업 언어인 HTML과 같이 묶어서 이야기합니다.

http://www.csszengarden.com

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

www.csszengarden.com

⬆️위 사이트는 내용은 같지만 (같은 HTML) css를 다르고 사용해서 완전히 다른 웹페이지를 구현했습니다. ⬆️

CSS 문법

h1 { color: yellow; font-size:2em; }

선택자(selector) - "h1"
속성(property) - "color"
값(value) - "yellow"
선언(declaration) - "color: yellow", "font-size: 2em"
선언부(declaration block) - "{ color: yellow; font-size:2em; }"
규칙(rule set) - "h1 { color: yellow; font-size:2em; }"

CSS 파일은 여러 개의 규칙으로 이루어져 있습니다.

선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없습니다.

하지만 속성이름과 속성값 사이에는 개행을 하면 안 됩니다.

correct

h1
{ color: yellow; font-size:2em; }

h1 {
    color: yellow;
    font-size:2em;
}

wrong

h1 {
    color:
    yellow;
}

CSS의 속성(Property)과 HTML의 속성(Attribute)

HTML에도 속성이 있고, CSS에도 속성이 있습니다. 두 가지는 전혀 다른 것입니다.

HTML의 속성은 영어로 attribute이고, CSS의 속성은 property입니다.

둘 다 한국어로 번역할 때 "속성"이라고 하므로 잘 구분하셔야 합니다.

CSS 주석

/* 주석 내용 */

CSS의 적용

CSS와 문서를 연결하는 방법은 4가지가 있습니다.

1. Inline

Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법입니다.

해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 됩니다.

Inline 스타일 방식이라고 부릅니다.

<div style="color:red;"> 내용 </div>

Inline 스타일 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않습니다.

2. Internal

Internal은 문서에 <style>을 활용한 방법입니다.

<style>은 <head>내부에 들어가며 <style>안에 스타일 규칙이 들어갑니다.

<head>
<style> div {color: red;} </style>
</head>

위의 코드로 모든 <div>에 같은 스타일을 줄 수 있습니다.

하지만 이것도 한계가 있습니다.

많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 합니다.

페이지가 많고 스타일 규칙 내용이 많아지면 결코 쉬운 일은 아닙니다.

3. External

External은 외부 스타일 시트 파일을 이용한 방법입니다.

외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식입니다.

외부 파일은 확장자가 .css가 되며 css 파일이라고 부릅니다.

div {color: red;}

1! 우선 CSS 파일을 하나 만들고 스타일 규칙을 선언합니다.

2! 그다음 <link>을 이용해서 CSS 파일을 연결하면 됩니다.

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

=> 파일 이름을 style. 그리고 확장자를 CSS로 갖는 파일 불러온거다.

같은 경로에 있으면 ./style.css로 적기

<head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적습니다.

rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 합니다.

외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있습니다.

또한, 수정이 필요할 때도 CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있습니다.

외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법입니다.

4. Import

Import는 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식입니다.

@import url("css/style.css");

이에 본 강의에서는 다루지 않습니다.

👇더 자세한 예시를 참고하세요👇

https://shinystarforever.tistory.com/26

html 에 css 추가하기

CSS는 Cascading Style Sheets의 약자로 웹페이지의 레이아웃, 폰트, 색상 등을 지정하는 데 사용됩니다. HTML에 CSS를 적용하는 방법은 3가지가 있습니다. 1. inline 2. internal 3. external 1. inlne HTML 태그..

shinystarforever.tistory.com

저작자표시 비영리 변경금지

'📌Language > HTML & CSS' 카테고리의 다른 글

css class 와 id 차이점 (0)	2022.04.17
CSS 기본 문법, CSS 요소 선택자 전체 선택자, 그룹화 (0)	2022.04.16
검색 엔진 최적화 방법, 시멘틱 마크업 하는 방법, HTML5에서 새로 생긴 Sematic 요소 (0)	2022.04.16
HTML5 콘텐츠 모델 분류, 블록 레벨, 인라인 레벨 (0)	2022.04.16
html 폼 요소의 종류 <label>, <fieldset>, <legend>, <form> 예시 (0)	2022.04.16

현재글CSS 란, CSS과 HTML 연결하기, css 기본 문법

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Today Hailie Learned