🥴 생활코딩 CSS (1)

💛 CSS Property Vs Css Selector

📌 CSS 소개하기.

• HTML: 정적인 웹 문서를 만들 수 있다.
• CSS: 꾸미는 요소이다. 웹을 아름답게 만들어줄 수 있다.
• Tag == Element

📌 CSS가 등장하기 전 상황

사람들이 웹을 아름답게 꾸미고 싶어했음..
📌 웹을 꾸미는 쉬운 방법 - html에 tag를 추가하는 방법

• 쉬운 방법: html에 태그를 추가하기. html tag는 정보를 담고 있다. 하지만, 태그를 추가하면 정보가 아닌 것들이 들어오기 때문에 정보의 농도가 낮아질 수 밖에 없다..

📌 CSS 등장

📌 웹을 꾸미는 쉬운 방법 Vs 웹을 꾸미는 어려운 방법

• 쉬운 방법: html에 태그를 추가하기. html tag는 정보를 담고 있다. 하지만, 태그를 추가하면 정보가 아닌 것들이 들어오기 때문에 정보의 농도가 낮아질 수 밖에 없다..
• 어려운 방법: html이 아니라 css 문법에 따라 해석되어야 함을 보여줘야한다. > style을 이용하자~! css를 이용하면 손쉽게 수정이 가능해진다.

⭐ css의 장점 ⭐
1. 손쉽게 수정이 가능해진다. html에 태그를 추가하면 1억개의 수정사항이 생기면 1억개 모두 수정해야되지만 css를 이용하면 1번만 수정하면 된다. -> 결국에는 유지, 보수가 편리해진다~!
2. 가독성을 높여줄 수 있다.

⭐ 중복의 제거를 잘하는 것이 코딩을 잘하는 것이다~!

😀 정리...

• html에는 많은 정보를 담고 있다. 그 정보를 잘 생각해서 필요한 상황에 맞게 이용하기.
• css는 유지, 보수가 편리하고 가독성을 높여줄 수 있다.

📌 혁명적인 변화

⭐ HTML의 속성 Property
각각의 것들을 원하는 방향으로 적용할 수 있다. css의 효과가 드러난다~!

• 선택자: Selector
• 선언: Declaration
• 속성: Property
  

📌 웹을 꾸미는 쉬운 방법 Vs 웹을 꾸미는 어려운 방법

• 쉬운 방법: style 태그를 사용한다.
• 어려운 방법: html의 속성을 통해서 각각의 것들이 원하는 방향으로 적용될 수 있도록 만들어준다. > 즉, style 속성을 사용한다.

⭐ 반드시 세미 콜론을 붙여줘야된다. 구분을 해주기 위해서~!

• 검색하는 방법
  밑줄을 없애고 싶어졌을 경우, 검색하는 방법이다.
  Css remove underline

css remove underline property

📌 CSS 속성을 스스로 알아내는 방법

• 검색하는 방법
  css로 폰트 사이즈 변경과 위치를 변경하고 싶은 경우, 검색하는 방법이다.

css text size property
css text center property

📌 CSS 선택자를 스스로 알아내는 방법

⭐ W3Schools Css Selectors

이 경우에는 class 설정해두었으니, style 속성을 이용해서 class에 원하는 조건을 넣어주기.

• 검색하는 방법

1. a 태그는 검은색으로 만들고 싶다.
2. 사용자가 방문한 적이 있는 태그는 회색으로 만들고 싶다.
3. 현재 사용자가 머무르는 곳은 빨강색으로 만들고 싶다.

• Class Selector & Id Selector & Tag Selector의 우선 순위
  
  id는 인간으로 치면 주민번호 같은 느낌이라, 한 개의 웹 문서당 한 개의 id값만 사용할 수 있다. 가장 우선 순위가 높다.

😀 정리...
태그 선택자를 이용해서 포괄적으로 전체적인 것들을 설정하고, id를 이용해서 예외를 생성시키자~! 포괄적이면 포괄적일수록, 우선 순위가 낮아질 수밖에 없다.

😀 마무리...

• 웹을 이쁘게 꾸며보자~!

1. 쉽게: html에 태그 추가하기. style 태그를 이용하기.
2. 어렵게: style 속성을 이용하기. -> css를 이용하기~!
3. 선택자 Selector: class, id 등등을 의미한다.
   ⭐ 포괄성: id ⊂ class ⊂ tag selector==element selector
   ⭐ 우선 순위: id > class > tag selector == element selector
4. 속성 Property: 안에서 원하는 조건대로 처리하면 된다.
5. Tag == Element <- 같은 의미로 쓰이니 알아두기~!