프론트엔드 #4 CSS

프론트엔드 #4 CSS - 1

Developer KTU 2020. 7. 31. 20:15

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;
}