HTML & CSS

[7일차] CSS 기초 + 과제

잼굴 2022. 4. 5. 17:46

1. CSS란 무엇인가?

-> Cascading Style Sheets의 약자  // HTML로 된거 꾸며주는거

 

 

 

 

 

 

2. CSS 우선적용 순위

CSS 우선적용 순위

쉽게 생각하면 태그내에서 가장 가까운걸로 적용됨

 

 

 

 

 

3.  CSS는 2버전 이후로 모듈로 업데이트중

 

 

 

4. CSS의 기본구조

 

 


 

 

4.1 Selector 

 

 

4.2 Property

 

4.3 Value

 

  • 선택자(Selector): 스타일을 적용하고자 하는 HTML 요소를 선택
  • 속성(Property): 스타일 속성 이름
  • 값(Value): 속성에 대응되는 값

 

 

Declaration 

 

선언 블록은 각각 적혀있는 선택자에게만 적용 됨

선언 블록 내부의 한줄한줄 = 선언

선언 끝날때마다 ; (세미콜론) 써야함

 

 

 

 


CSS 적용하기

 

CSS를 적용하는 방식에는 4가지가 있다.  

순서대로 CSS 우선 적용순위가 위이다.

 

1. 인라인 방식

2. 내부 스타일 시트 방식
3. 외부 스타일 시트 방식

4. 다중 스타일 시트 방식

 

 

1. 인라인방식  - 해당 라인에 바로 집어넣기

 

<body style="font-size: 14px;"
 
 
 
 

2. 내부 스타일 시트 방식 - <head>안에 스타일시트 열어서 적용

<head>
    <style>
        body {font-size: 14px;}
    </style>
</head>

 

 

3. 외부 스타일 시트 방식 - 외부 CSS파일 연걸시키기

 

<head>
    <link rel="stylesheet" href="css/foo.css">
</head>
 
 

4. 다중 스타일 시트 방식  - CSS파일에 적용

 

@import "foo.css";
 
 
 

 
 
 
과제
 

 

 

 

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

[8일차] 인라인, 블록요소  (0) 2022.04.06
[8일차] 마진 겹침 현상  (4) 2022.04.06
[7일차] Block 요소 Inline 요소  (0) 2022.04.05
[7일차] Table  (0) 2022.04.05
[4일차] Forms  (0) 2022.04.03