CSS
먼저 간단하게 말하자면 마크업 언어(HTML)는 몸의 구조(뼈, 근육)를 담당하며
CSS는 옷, 신발과 같이 외적으로 꾸며주는 역할이라고 보면 된다.
1. CSS 소개
HTML(마크업 언어)을 꾸며주는 표현용 언어이다.
HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인.
HTML이 있어야 CSS사용이 가능하다. CSS는 표현을 위한 언어인데 마크업 문서가 없다면 표현할 대상이 없기 때문.
모든 사이트가 비슷한 HTML 태그를 사용해서 만들어졌음에도 불구하고 각각 다양하고 독창적인 디자인으로 표현 가능한 이유는 CSS 덕분이다.
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; front-size:2em;}"
절대 속성명과 속성값 사이에 개행을 해서는 안된다.
올바른예시O
h1
{ color: yellow; font-size:2em; }
h1 {
color: yellow;
font-size:2em;
}잘못된예시X
h1 {
color:
yellow;
}
주석(COMMENT TAGS)
/*내용*/
/* 주석 내용 */
/*
주석은 여러 줄로도
선언 할 수 있습니다.
*/
CSS 적용방식: css와 문서를 연결하는 4가지 방법
| 1. Inline |
<div style="..."> 내용 </div>해당 태그에 스타일을 직접 넣는 방법
단점: 속성마다 찾아서 넣기 번거로움
| 2. Internal |
<style> ... </style><head>태그 내에 <style>태그를 작성한 뒤, CSS코드를 작성하는 방법
단점: 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 함.
| 3. External ✅ |
div {color: red;}CSS 파일을 하나 만들고 스타일 규칙을 선언
문서 간의 연결
<link rel="stylesheet" href="css/style.css">- href: 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel: 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
<head></head>에 넣어줘야 함.
| 4. Import |
@import url('css/style.css');스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식
<style> 내부 상단이나 외부 스타일 시트 파일 상단에 선언.
단점: 성능상 좋지 않음.
Reference
https://www.boostcourse.org/cs120/lecture/92868?isDesc=false
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
https://www.inflearn.com/course/%EC%9E%85%EB%AC%B8%EC%9E%90-css-%EA%B8%B0%EC%B4%88%EA%B0%95%EC%9D%98
[무료] 입문자를 위한 CSS 기초 강의 - 인프런 | 강의
웹 사이트를 예쁘게 꾸미기 위해 반드시 필요한 언어, CSS의 주요 개념과 기본 문법을 소개합니다. 이제 막 HTML로 코딩 걸음마를 떼신 분들도 부담없이 소화하실 수 있습니다., - 강의 소개 | 인프
www.inflearn.com
'CSS' 카테고리의 다른 글
| CSS: 6 float, clear (0) | 2022.03.31 |
|---|---|
| CSS: 5 텍스트 관련 속성 (0) | 2022.03.28 |
| CSS: 4 박스모델(Box-Model) (0) | 2022.03.28 |
| CSS: 3 구체성, 상속, 캐스케이딩 (0) | 2022.03.28 |
| CSS: 2 선택자 (0) | 2022.03.24 |
