[CSS]CSS Basic

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard

[코드캠프] 강력한 CSS 강의 - 인프런

---

📖CSS Basic

🔍웹 브라우저란?

인터넷 통신을 할 수 있는 프로그램을 통틀어서 “웹 브라우저”라고 한다. 이때, 웹 브라우저가 읽을 수 있는 언어는 HTML, CSS, JS 세가지뿐이다. HTML이 문서의 기본구조(뼈대), JS(JavaScript)가 동적 활동을 담당한다면 CSS는 스타일을 담당한다.

 

✔️CSS(=Cascading Style Sheet)이란?

웹 페이지의 스타일 & 레이아웃을 담당하는 문서

 

기본문법

div{
	background: red;
}

• div: 선택자(Selector)
• background: 속성(Property)
• red: 속성 값(Property value)
• 속성+속성값: 선언(Declaration)

 

🔍적용방식

인라인(in-line) 방식

: 가독성이 떨어지고 유지보수가 힘들어진다.

<style> 태그 방식

: 반드시 같은 파일에 위치해야하는 경우가 아니라면 주로 사용되는 방식은 아니다.

분리된 CSS 파일 연결

: 실무에서 가장 많이 활용하는 방식으로 유지보수가 편리하고 소스코드를 관리하기 좋다.

 

*<link>태그

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

rel: 관계(relation) 지정

href: 연결할 파일의 경로를 지정

 

🔍선택자

태그 선택자

div{
	background-color: #fgfgfg;
}
h1{
	font-size: 28px;
	color: red;
}
p{
	color: blue;
}

해당 파일의 모든 tag가 선택된다.

 

id 선택자

#id{
	property: value
}

 

class 선택자

.class{
	property: value
}

id와 달리 여러개의 요소의 중복 선택이 가능하다.

 

.box1 .title{
	color: yellow;
}

.box2 .text1{
	color: green
}

⇒자손관계의 선택자 사이에는 반드시 한 칸을 띄어야 한다. 공백 없이 붙이면 다중 선택자로서 그 조건을 만족하는 모든 요소가 선택된다.