회고록 블로그
[공부 필기] 생활코딩 CSS 수업 필기_20210304 본문
※ 절대 잊지 말아야 할 핵심
HTML의 핵심은 '정보'
'어떻게 정보를 잘 표현할 수 있을까'를 고민해야한다. HTML은 '정보'에 전념하도록 해야한다.
CSS의 핵심은 '디자인'
HTML에서 표현한 그 정보를 어떻게 잘, 예쁘게, 만족스럽게 꾸밀 수 있을까
=> 정보와 디자인을 분리한다
* CSS가 탄생한 역사(?)는 생활코딩 CSS 수업을 들어보면 알 수 있다. (재밌음)
HTML과 CSS
- 아래 샘플 코드에서 HTML 문법과 CSS 문법을 구분해보기
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color:blue
}
</style>
</head>
<body>
<h1 style="color:red">Hello world</h1>
<h2>Hello World</h2>
</body>
</html>
1) <h1 style="color:red">Hello world</h1>
=> 파란색 문자열을 제외한 나머지는 HTML 문법이고, color:red 만 CSS 문법이다.
2) <style> ~!@#$%^&쏼라쏼라 </style>
=> 파란색 부분은 CSS 문법이고, <style>과 </style>은 HTML 문법이다.
[외전] HTML style 속성과 CSS가 함께 적용되면?
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue
}
</style>
</head>
<body>
<h1 style="color:red">Hello world</h1>
</body>
</html>
=> 결과: "Hello world"는 빨간색(red)으로 출력된다.
=> Why?
그 이유는 아래의 능력자님 글에서 확인할 수 있다. (html에서 style 속성으로 지정하는 것이 더 우선순위가 높기 때문)
[CSS] 선택자 우선순위
CSS 선택자 우선순위 특정 태그에 스타일 속성이 중복될 경우, 어떤 속성이 적용될까? CSS 선택자 우선순위에 대해 알아보자. - 1순위. 속성 값 뒤에 !important를 붙인 속성 - 2순위. HTML에서 style을 지
jess2.tistory.com
선택자(selector)와 선언(declaration)
- 샘플
<html>
<head>
<style>
li {
color:skyblue;
text-decoration:underline;
/* 속성은 세미콜론(;)을 이용해서 구분해줌 */
}
</style>
......- 여기에서 li는 선택자(selector)이고,
- color:skyblue와 text-decoration:underline가 선언자(declaration)
=> 선언자는 속성(property)과 값(value)으로 이루어져 있다
선택자의 종류
- id선택자 : #id명 으로 CSS에서 사용한다
* HTML에서 id는 HTML 문서에서 딱 한번만 사용할 수 있다.
- class선택자 : .class명 으로 CSS에서 사용한다
* class는 어떠한 대상을 그룹핑해서 관리할 때 사용한다.
- 태그선택자 : 태그명 으로 CSS에서 사용한다
<!DOCTYPE html>
<html>
<head>
<style>
#select{
color:red;
text-decoration: underline;
}
.deactive{
text-decoration: line-through;
}
</style>
</head>
<body>
<ul>
<li class="deactive">HTML</li>
<li id="select">CSS</li>
<li class="deactive">JavaScript</li>
</ul>
</body>
</html>
부모 자식 선택자
- 직계 자손에게만 CSS를 적용하고자 한다면? 꺽쇄 사용 e.g.) ol > li
- 예시 1.
- 예시2
- 예시3
- 예시4.
선택자 공부
- 선택자에 대해서 수련(?)하고 싶다면... flukeout.github.io/
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
(=> 귀엽뽀짝하게 움직이는 재료들만을 선택할 수 있도록 선택자를 이용하면 된다.)
- 치트시트(cheat sheet)를 잘 사용하면 도움이 된다 (선택자가 되었든 그 무엇이 되었든..)
* 구글에 원하는 내용과 함께 Cheat Sheet를 입력한다 e.g.) Cheat Sheet CSS Selector 등..
Pseudo Class Selector
- Class 선택자처럼 동작하지만 Class 선택자는 아닌 선택자..(?)
- 각각의 요소(element)의 상태에 따라 적절하게 그때그때 요소를 선택하는 선택자...(?)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* 마우스 좌클릭을 하고 있으면 green색으로 변함 */
a:active{
color:green;
}
/* 내용에 마우스를 가져다대고 있기만 해도 tomato 색으로 변함 */
a:hover{
color:tomato;
}
/* 이때 active와 hover가 동시에 적용되기 때문에 green 색은 나타나지 않음 */
/* 뒤쪽에 있는 CSS (a:hover 선택자)가 마지막으로 적용되었기 때문에 */
/* hover 코드를 가장 위쪽으로 올리면 우선순위가 바뀜 */
</style>
</head>
<body>
<a href="https://opentutorials.org">방문함</a>
<a href="https://a.a">방문안함</a>
</body>
</html>
※ 우선순위를 유의할 것 (위에서 아래로 순차적으로 적용된다는 점을 잊지말 것)
- visited는 여러 보안적인 이유로 사용할 수 있는 속성이 제한적이다
...
<style>
/* 방문하지 않은 곳의 컬러는 black */
a:link{
color: black;
}
/* 방문한 곳의 컬러는 skyblue */
a:visited{
color:skyblue;
}
</style>
...
- focus는 <style> 태그 안에서 가장 마지막에 넣는 것을 권장한다
속성(property) 공부하기
- 속성 사용 빈도수 통계자료가 있는데, 그 정보를 기반으로 속성을 공부하고(=많이 등장하는 속성 공부)
- 중요하지 않은 것들은 나중에 필요 시 검색해서 사용하기로 하자.
font-size
- px, em, rem 등등
CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch
CSS Unit (CSS 7가지 단위) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단할 수 있지만 새로운 문제에 봉착하게 되면 해결하기 어려울 수 있습니다. 웹은 항상 성장,변화하고 있고 새로운
webclub.tistory.com
- rem은 사용자가 페이지 폰트를 가변적으로 변경할 수 있도록 할 때 사용하고 오늘날은 rem을 좀 사용하는 편
(사용자가 브라우저의 글꼴 크기 키우거나 줄였을 때 그게 반영되는 것이 rem / px는 변경되지 않음)
'2. 프로그래밍 언어 공부 > HTML+CSS' 카테고리의 다른 글
| HTML 공부: img 태그로 사이즈를 조절하고 CSS로도 이미지의 사이즈를 조절하면 어떻게 될까 (0) | 2021.03.04 |
|---|---|
| CSS 공부: 선택자에 따라 스타일을 적용하는 순서가 있을까 (0) | 2021.03.04 |
| [공부 필기] 생활코딩 HTML 수업 필기_20210303 (0) | 2021.03.03 |
| HTML method: get 방식 vs post 방식 (0) | 2021.03.03 |
| [공부 필기] 생활코딩 HTML 수업 필기_ table ~ form (0) | 2021.03.02 |
