HTML에 대한 내용과 주요 태그들에 대해 알아보았다. 현직 프론트에드 개발자 분들도 HTML의 모든 태그들을 완전히 다 외우진 않고, MDN 요소 참고 사이트에서 검색해보고, 속성들을 참고하여 사용한다고 한다. 이제 HTML에 대해 알아봤으니, HTML하면 빠지지 않는 친구 CSS에 대해 알아보겠다.
1. CSS란?
Cascading Style Sheet의 약자
잘 만들어둔 HTML 페이지를 스타일리쉬하게 꾸며주는 역할을 한다.
※ 웹사이트를 꾸밀 때 총 3가지로 나누어 생각해볼 수 있다!
1) Author style : css파일
2) User style : 사용자가 지정하는 스타일
3) Brower : 브라우저에서 기본적으로 제공하는 스타일
-> 여기서 Cascading은 '폭포처럼 떨어지는' Author style -> User style -> brower 순으로 떨어지듯이 진행된다
※ Cascading의 연결고리를 끊어내는 유일한 녀석
! Important => 위와 같은 연결고리를 무시하고 우선순위를 다르게 적용할 수 있다.
==> ! Important는 HTML 구성단계에서 잘못 만들어졌거나 나쁜 아키텍쳐가 되었을때 사용된다. 그러므로 되도록이면 쓰이지 않게 하는것이 좋다.
2. 선택자
HTML의 어떤 태그들을 고를것인지 정의하는 문법
① * (Universal) : 모든 태그들을 고른다는 뜻
② Tag이름 (type) : 해당 태그를 고른다는 뜻
③ #id (ID) : 해당 id에 해당하는 태그를 고른다는 뜻
④ .class (class) : 클래스에 포함된 태그들을 고른다는 뜻
⑤ : (state) : 태그옆에 :를 달 수 있다.
⑥ [] (attribute) : 해당하는 속성값들만 모아서 작성할 수 있다.]
⑦ + : 다음 엘레먼트
⑧ Tag : nth-child(n) : n번째 태그 스타일링 (2n+3같은 형식도 가능)
⑨ Tag : nth-of-type(odd/even) : 홀수번째 / 짝수번째 태그 스타일링
⑩ Tag : last-of-type : 같은 태그 중 가장 마지막에 위치한 태그
⑪ Tag1, Tag2 : 태그1, 태그2 같이 스타일링
⑫ Tag:empty : 태그 중 비어있는 태그만 스타일링
⑬ Tag:not(~) : not안에 있는 조건이 없는 태그만 스타일링
CSS 미적용 EX)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<button>Button 1</button>
<button>Button 2</button>
<div class="red"></div>
<div clas="blue"></div>
<a href="naver.com">Naver</a>
<a href="googlenaver.com">Google</a>
<a>Empty</a>
</body>
</html>
결과는?
HTML에 CSS 적용 EX)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css" /> <!-- HTML에 CSS 적용-->
<title>JS Bin</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<button>Button 1</button>
<button>Button 2</button>
<div class="red"></div>
<div clas="blue"></div>
<a href="naver.com">Naver</a>
<a href="googlenaver.com">Google</a>
<a>Empty</a>
</body>
</html>
/*selector{
property: value;
} */
* {
color: green;
}
li{
color: blue;
}
li#special {
color: pink;
}
.red {
width: 100px;
height: 100px;
padding: 20px 20px 20px 20px;
margin: 20px 20px 20px 20px;
border: 4px dashed red;
background: yellow;
}
button:hover {
color: red;
background: beige;
}
a[href="naver.com"] {
color: purple;
}
결과는?
※ 기본적으로 태그 가까이에 있는 문법들이 우선순위가 더 높다
예를 들어 우선순위 : * < 태그이름
※ 같은 아이디로 태그를 하나 더 만들어도 똑같은 스타일이 적용된다.
예를 들어 <h1 id = "special">Hello</h1>, <li id="special">First</li>는 같은
스타일이 적용됨
※ div 태그안이 비어있으면 스타일이 적용되지 않는다. 하지만 만약 div 태그안에 button 태그가 추가되면 그때 div의 스타일이 적용된다. (div가 비어있어도 높이와 너비, 배경색 등을 지정해주면 보인다.)
※ 기본적으로 div는 보여지지 않지만 CSS를 통해서 보여지게 할 수도 있다.
※ 같은 버튼이라도 button: hover (버튼위에 마우스가 올려진 상태)에서도 스타일링이 가능함
※ padding은 컨텐츠안에 들어가는 공간 (즉 노란색 박스의 크기가 바뀜)
※ margin은 컨텐츠 밖에 들어가는 공간 (즉, 노란색 박스 바깥의 공간의 크기가 바뀜)
※ border은 외곽선 개념인것 같음
CSS의 속성값을 확인하는 사이트!!
MDN CSS reference : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
선택자를 쉽게 익힐 수 있는 게임 사이트!!!
'웹 개발 공부 : Front-end' 카테고리의 다른 글
| 프론트엔드 #6 CSS - 3 (0) | 2020.08.13 |
|---|---|
| 프론트엔드 #5 CSS - 2 (0) | 2020.08.04 |
| 프론트엔드 #3 HTML 주요 태그들 (0) | 2020.07.25 |
| 프론트엔드 #2 자주 사용하는 웹페이지 분석해보기 (0) | 2020.07.23 |
| 프론트엔드 #1 HTML에 대해서 (0) | 2020.07.22 |
