드림코딩 엘리 1강:css기초, selectors 알아보기

2021. 4. 1. 21:54ㆍ혼자하는개발공부/CSS

study date:2021.03.29

css 기초 강의 1편

CSS란?

Cascading style sheet

Author Style→User Style→Browser

selectors에 대해 알아보기

<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<button>Button 1</button>
<button>Button 2</button>
<div class="red"></div>
<div class="blue"></div>
<a href="[naver.com](http://naver.com/)">Naver</a>
<a href="[goglenaver.com](http://goglenaver.com/)">Google</a>
<a>Empty</a>
</body>

1.universal → *, 모든 태그를 선택한다

* {
  color:green;
} <!--모든 것에 green 색상 입혀보기-->

2.type →tag, tag만 변경한다

<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<button>Button 1</button>
<button>Button 2</button>
<div class="red"></div>
<div class="blue"></div>
<a href="[naver.com](http://naver.com/)">Naver</a>
<a href="[goglenaver.com](http://goglenaver.com/)">Google</a>
<a>Empty</a>
</body>

* {
  color:green;
}
li {
  color:blue;
}
<!--구체적으로 설정한 것이 우선순위가 높아진다.따라서 li만 blue 컬러로 보이는 것-->

3.id → #id, 이 아이디를 가진 아이들 모두 변경한다.

<body>
  <ol>
    <li id="special">First</li>
    <li>Second</li>
  </ol>
  <h1 id="special">Hello<h1>
  <button>Button 1</button>
  <button>Button 2</button>
  <div class="red"></div>
  <div class="blue"></div>
  <a href="naver.com">Naver</a>
  <a href="goglenaver.com">Google</a>
  <a>Empty</a>

</body>

*{
  color:green;
}
li{
  color:blue;
}

#special{
  color:pink;
}

=>special이란 아이디를 가진 hello와 first가 변경됐다.

4.class → .class, class 변경

*{
  color:green;
}
li{
  color:blue;
}

#special{
  color:pink;
}

.red{
  width:100px;
  height:100px;
  background:yellow;
}

=>red라는 클래스 이름을 가진 것들이 변경되었다. ->div에 노란 네모가 생겼다.

5.state → : 상태에 따라 변경

*{
  color:green;
}
li{
  color:blue;
}

#special{
  color:pink;
}

.red{
  width:100px;
  height:100px;
  background:yellow;
}
button:hover{
  color:red;
  background:beige;
}

=>!!마우스를 올린 button2만 색상이 변경되었다.

6.attribute → [] 속성값에 따라 스타일링

*{
  color:green;
}
li{
  color:blue;
}

#special{
  color:pink;
}

.red{
  width:100px;
  height:100px;
  background:yellow;
}
button:hover{
  color:red;
  background:beige;
}
a[href="naver.com"]{
  color:purple;
}

속성값에 naver.com이 들어간 a태그만 보라색으로 변경되었다.

div 자세하게 뜯어보기

<body>
  <div class="red"></div>
  <div class="blue"></div>
</body>

.red{
  width:100px;
  height:100px;
  padding:20px 20px 20px 20px;
<!--padding 컨텐츠 안에 들어가는 spacing-->
<!--padding top bottom left right로 각자 설정가능-->
  margin:20px; <!--margin은 컨텐츠 밖에 들어가는 것-->
  background:yellow;
    border-witdh:2px;
  border-style:solid;
  border-color:pink;
<!--border:2px solid pink; 간단하게 한 줄로도 표현가능-->
  background:yellow;
}

CSS reference

CSS reference - CSS: Cascading Style Sheets | MDN

style-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] See the index of selectors, pseudo-classes, and pseudo

developer.mozilla.org

selectors를 더 자세히 알아보고 싶다면 아래문서를 참조하면 좋다

MDN CSS Selectors

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

CSS selectors - CSS: Cascading Style Sheets | MDN

CSS selectors CSS selectors define the elements to which a set of CSS rules apply. Note: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings. Universal selector Selects all elements. Optionally,