[카카오톡 클론코딩] # 3.1-3.2 What Does Cascading Mean

Gata·2023년 8월 9일

카카오톡 클론코딩

🟨카카오톡 클론코딩

목록 보기

16/78

CSS

Cascading(물은 위에서 아래로 흐른다) Style Sheets

<브라우저가 css를 읽는 방법>
Cascading Style Sheets의 의미는 브라우저가 css코드를 읽을 때 위에 있는 코드부터 차례차례로 읽는다는 뜻.
<CSS와 HTML을 섞는 방법>
앞 게시글에서 CSS는 근육과 피부이고 HTML은 뼈이기 때문에 HTML 없이는 CSS도 있을 수 없다고 했다. 어떻게 CSS와 HTML을 섞어서 코드를 작성 할 수 있을까?

여기에는 2가지 방법이 있다.

방법1)

한 .HTML 파일 안에 HTML코드와 CSS 코드를 함께 작성하는 방법, <style></style> 태그 이용. style 태그는 head부분에 위치한다.

방법2) ⭐추천

CSS와 HTML을 서로 다른 파일에 분리하는 방법.
style.css파일을 만들어서 이 안에 CSS 코드를 작성한다.

왜 추천?
분리된 CSS 파일이 있으면 이 파일을 다른 많은 html에서 사용할 수 있기 때문이다.

Selector

css가 하는 일은 html태그를 가리키는 것이다.
ex) "이 태그는" 초록색이다.

가리킴을 당하는 대상을 selector라고 한다.
selector를 먼저 입력한 후에 지우고, 가리키고자하는 단어를 쓰면 그 단어가 selector가 된다. 여기서는 h1태그가 selector가 된다.

selector인 h1태그에 해당하는 컨텐츠 색깔은 파란색, 글씨 크기 25px, 글씨체는 고딕체라고 지정해보자.
색깔은 파란색,글씨 크기 25px, 글씨체들을 속성(property)이라고 한다. 이처럼 selector는 많은 속성을 가질 수 있다.

CSS를 작성하기 위한 4가지 규칙

<style>
tag{
	속성이름:속성값;
	font-size: 50px;
}
 </style>

1. 가리키고자 하는 태그명을 적을 것

2. 속성이름은 띄어쓰기, 언더바(_). 슬래시(/) 모두 불가능하고 오로지 '-'로만 단어를 연결해준다. ex) font-size

3. 각 속성값 뒤엔 세미콜론을 써준다.

4. 속성들은 중괄호 {} 로 묶어준다.

inline, external CSS

<style>
  h1{
  	color:yellowgreen;
  }
</style>

style 태그 안에 속성을 써주는 것을 inline CSS라고 한다.

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

CSS 파일을 include 하는 것을 external CSS라고 한다.

코드의 순서는 결과에 영향을 미친다.

만약 inline CSS와 external CSS가 가리키는 태그가 같다면 둘 중 어느 것이 우선순위가 될까?

CSS의 C는 Cascading을 의미 : 즉, 폭포의 물은 위에서 아래로 흐른다.

코드가 위에서 부터 아래로 차례대로 실행되기 때문에 가장 마지막에 온 코드가 최종적으로 사용자한테 보여진다.

html 코드

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>The Gata Times</title>
  
    <link rel="stylesheet" href="styles.css"/> <!--external CSS-->

    <!--inline CSS-->
    <style> 
        h1{
            color: yellowgreen; 
        }
    </style>
</head>