[CSS]1.CSS기본 (속성, 선택자, class, id, 중복/자손/자식/일반/인접 선택자)

@@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@

 

@@@@@@@@2강@@@@@ CSS가 등장하기 전의 상황

[1]HTML로 꾸미기 시작

<font> 태그 등  <font color=”red”>내용</font>

>>>html은 정보전달인데 디자인이 들어가면서 일관성이 없음, 또한 몇만개의 태그를 모두 바꿔야한다면 너무 노가다..아니 불가한 작업이됨…

>>>그래서 지금은 디자인할 때 html안쓰고 새롭게 CSS언어 만들어서 꾸밈

 

@@@@@@@@3~7강@@@@@ CSS등장, 기본문법, 혁명적변화,속성,선택자,class,id

[2]기본문법

1. CSS 사용방법 2가지

(1)<style> </style> 따로 태그생성

>>>여러 태그에 디자인 줄 때

(2)html의 속성으로 활용

<a href=”링크” style=”color: red; text-decoration: none”>내용</a>

>>>1개 html태그에만 디자인 줄 때

 

2. 선택자와 속성

<style> 선택자{속성:속성값; } </style>

예시)

<style>

a {

color: red;

text-decoration: none;

}

</style>

>>> a태그에 대해 모두 색상빨간색, 밑줄 없음으로 줘라

 

3. CSS 속성을 스스로 검색하고 알아내는 방법

(1)검색

-CSS TEXT SIZE PROPERTY 검색해보기

1)font-size

선택자{ font-size:45px; }

2)font-size

선택자{ text-align:center; }

 

4. CSS 선택자의 기본

(1)class 선택자 (.클래스명)

 

 

>>>>근데 이건 좋은 방법은 아님. 만약 순서를 바꾸면 가장 최근의 명령어를 듣게됨. >>> id를 사용하면 됨

 

(2)id 선택자 (#id)

Id 선택자가 클래스 선택자를 이긴다. 클래스 선택자가 태그 선택자를 이긴다

 

 

 

(3)기타 선택자

1)중복 선택자 (입력한 선택자 모두에게)

선택자1, 선택자2

 

2)자손 선택자 (모든 자식들에게)

선택자 선택자

 

3)자식 선택자 (바로 밑에 자식에게만)

선택자 > 선택자

 

4)인접 형제 선택자 (바로 아래 형제에게만)

선택자 + 선택자

 

5)일반 형제 선택자  (모든 형제)

선택자 ~ 선택자