생활코딩 CSS (1)
🥴 생활코딩 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에 원하는 조건을 넣어주기.
- 검색하는 방법
- a 태그는 검은색으로 만들고 싶다.
- 사용자가 방문한 적이 있는 태그는 회색으로 만들고 싶다.
- 현재 사용자가 머무르는 곳은 빨강색으로 만들고 싶다.
- Class Selector & Id Selector & Tag Selector의 우선 순위
id는 인간으로 치면 주민번호 같은 느낌이라, 한 개의 웹 문서당 한 개의 id값만 사용할 수 있다. 가장 우선 순위가 높다.
😀 정리...
태그 선택자를 이용해서 포괄적으로 전체적인 것들을 설정하고, id를 이용해서 예외를 생성시키자~! 포괄적이면 포괄적일수록, 우선 순위가 낮아질 수밖에 없다.
😀 마무리...
- 웹을 이쁘게 꾸며보자~!
- 쉽게: html에 태그 추가하기. style 태그를 이용하기.
- 어렵게: style 속성을 이용하기. -> css를 이용하기~!
- 선택자 Selector: class, id 등등을 의미한다.
⭐ 포괄성: id ⊂ class ⊂ tag selector==element selector
⭐ 우선 순위: id > class > tag selector == element selector- 속성 Property: 안에서 원하는 조건대로 처리하면 된다.
- Tag == Element <- 같은 의미로 쓰이니 알아두기~!
Author And Source
이 문제에 관하여(생활코딩 CSS (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tino-kim/생활코딩-css저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)