[CSS] ① CSS 작성방법

티스토리 뷰

프론트엔드/CSS

[CSS] ① CSS 작성방법

doeunnkimm 2022. 7. 6. 12:15

▶ CSS란?

CSS는 Cascading Style Sheets의 약자로 문서를 표시하는 방법(스타일이나 레이아웃)을 지정합니다.

CSS를 사용해 사이트를 레이아웃을 만들고 텍스트의 색상을 변경하며 애니메이션을 넣어 시각적으로 아름답게 표현합니다.

당분간 CSS 작성 방법과 작성 시에 주의할 점, flex를 사용한 레이아웃 작성법 등 기본적인 내용을 살펴봅시다.

CSS에서 반드시 알아야 할 작성 방법과 특징, 레이아웃 작성법 등에 대해서 알아봅시다 :)

▶작성 방법

스타일링을 작성하는 방법은 매우 간단합니다.

'"A"의 "B"를 "C"로 하겠다.' 이 문장에 맞춰 스타일을 작성합니다.

여기서 A는 대상을 가리키는 선택자 그리고 B는 그 대상의 프로퍼티를 의미하며 C는 그 프로퍼티를 어떻게 바꿀지를 의미하는 값입니다.

이 A, B, C를 그대로 사용해 CSS 구문에 맞춰 작성해 보면 다음과 같습니다.

선택자(A) {
	프로퍼티(B): 값(C);
}

▷제목의 크기를 키두는 예제

A, B, C의 위치에 맞춰 문장을 만들어 보면 '페이지의 "모든 <h1> 태그(A)"의 "폰트 크기(B)"를 "14px(C)"로 한다.'를 의미합니다.

A, B, C 위치에 맞게 선택자와 프로퍼티, 값에 적절한 이름과 값을 작성해 보면 다음과 같습니다.

h1 {
	font-size: 14px;
}

▷한 선택자에 여러 개의 프로퍼티 부여

한 선택자에 여러 개의 프로퍼티를 부여하고 싶다면,

중괄호 안에 여러 개를 작성합니다. 이때 각 값의 끝에 ';'을 사용하여 값을 구분합니다.

셀렉터: {
	프로퍼티1: 값;
    프로퍼티2: 값;
}

▷외부 CSS 파일에 작성된 스타일을 HTML 페이지에 연결

외부 CSS 파일에 작성된 스타일을 HTML 페이지에 연결할 때는 link태그를 이용합니다.

href 속성을 통해 CSS 파일의 위치를 지정하고 rel로 관계를 표현합니다. CSS는 stylesheet로 값을 넣습니다.

<!DOCTYPE html>
<html lang="ko">
	<head>
    	<!-- 외부 파일에 정의된 CSS 연결하기 -->
    	<link rel="stylesheet" href="./main.css" type="text/css"/>
    </head>
    <body>...</body>
</html>

CSS 프로퍼티는 항상 .css 확장자를 가진 파일에서만 작성해야 하는 것은 아닙니다.

HTML 파일 내의 <style> 태그 안에 작성하거나 HTML 요소에 바로 작성할 수 있습니다.

<head>
	<!-- head 내에 style 태그를 열어 스타일을 지정하기 -->\
    <style>
    	h1 {
        	color: blue;
        }
    </style>
</head>

여러 프로퍼티를 지정할 때는 동일하게 ';'로 구분합니다.

🌟🌟🌟<h2 style="color: skyblue; font-size: 14px;">Hello</h2>

여기까지 HTML 작성 방법에 대해 알아보았습니다 :)

728x90

LIST

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

[CSS] ⑥ 반응형 웹을 위한 미디어 쿼리 (0)	2022.07.13
[CSS] ⑤ flex를 이용한 레이아웃 만들어 보기 (0)	2022.07.13
[CSS] ④ 박스 모델과 여백 상쇄 (0)	2022.07.13
[CSS] ③ CSS 우선순위와 명시도(Specificity) (0)	2022.07.06
[CSS] ② CSS 상속 & 선택자 (0)	2022.07.06

250x250

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					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

글 보관함

doeunn.log

티스토리 뷰