2021.09.14 - 생활코딩 WEB2 / CSS 기본개념,문법,선택자

1. CSS 기본개념, 문법

* a태그 전체 폰트 색상을 빨강색으로 하고싶을때 CSS 코드입력 방법 (아래코드)

<style>
a {
color:red;
}
</style>

** 해석
<style>, </style> (CSS태그)
a (a코드 전체 지정) : 선택자 selector
color:red; (해당글씨 red 지정) : 효과/선언 declaration
-> color : 속성 property
red : 속성의 값 property value

* HTML과 CSS의 폰트 색상변경 차이점
HTML : <font color="(색상)> 1억개의 코드가 있다면 1억개를 모두 색상 코드변경 해줘야함.
CSS : color:(색상) 괄호안의 색상만 바꿔주면 됨.

* HTML이 정보에 전념하게 하기 위해서 디자인에 대한 기능을 뺏어온 것이 'CSS' 이다.
CSS를 통해 디자인하는것이 훨씬 효율적이기때문에 CSS라는 언어를 도입하게 되었다.

* HTML과 CSS는 완전히 다른 언어이기때문에 웹브라우저로 하여금 어디서부터 어디까지가 CSS인지 CSS태그로 구분해야한다.

* 웹페이지 안에 CSS를 삽입하는 방법
1) <style>태그를 쓴다.
2) style 속성을 쓴다.

* CSS안에서의 (;세미콜론) 의 역할 : 디스크립션이 시작되고 끝나는 것을 구분하기 위해서 사용함.
(효과를 지정한 다음에는 꼭 (;)을 사용해야함)

2. CSS 속성

* h1 텍스트의 크기를 키우는 방법 : font-size: ()px;

h1 {
font-size:45px;
}


* h1 텍스트를 가운데 정렬 하는 방법 : text-align: (center,left..);

h1 {
font-size:45px;
text-align: center;
}

3. CSS 선택자의 기본

* 선택자 : 선택을 해주는 요소, 특정 요소들을 선택하여 스타일을 적용할 수 있음.
* 모든링크 ->검정색
모든 a태그 컬러 블랙으로 지정 (color:black;)

* 사용자가 사용한 적 있는 페이지 ->회색
해당 텍스트를 그룹으로 묶고, (class="saw")
그 그룹을 회색으로 설정 (.saw {
color:gray;
}

* 현재 페이지는 ->빨강색
현재 접속중인 페이지 (class="saw active")
그 페이지 이름을 빨강색으로 설정 (.active {
color:red;
}

* class 라는 속성의 값은 여러개일수도 있고, 띄어쓰기로 구분한다.
하나의 태그에는 여러개의 속성이 들어올 수 있고 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.

* id 선택자와 class 선택자가 붙으면 id 선택자가 우선이 된다.
* id 선택자는 한번만 나와야한다. (중복되면 안됨.)
* 우선순위 : id > class > tag selector