UMC 2주차 워크북(1)


CSS

web structure

html이 뼈대 역할을 했다면, css는 살(외관)의 역할이라고 할 수 있다. Cascading Style Sheets의 줄임말로, 사용자에게 문서를 표시하는 방법을 지정하는 언어이다. 기본 텍스트 문서를 꾸며주는 역할을 한다.

html에서 외부 요소와 연결하는 link를 사용하여 css를 외부 파일로 만든 후에 html과 연결할 수 있다. 

<link rel=’연결하고자 하는 파일과의 관계’ href=’파일 위치’>
<link rel=’stylesheet’ href=’./style.css’>



CSS 선택자

CSS의 문법은 다음과 같다. 선택자는 html 요소 선택하는 역할을 한다. 

/* css 문법 */
선택자 { css속성 : value; }

  • 태그 : 태그 전체를 선택한다.

    <div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
    div {
  background-color: pink;
}

    tag

  • 클래스 : 태그와 상관없이 동일한 스타일을 여러 요소에 주고 싶을 때 사용한다. 하나의 요소에 여러 개의 클래스를 사용할 수 있고(공백으로 구분), 중복일 경우 위에서 순차적으로 실행되기 때문에 마지막에 실행되는 코드로 적용된다. [ 예시: 영희 = 학생, 알바생, 안경 쓴 사람 ]

    <div class="orange lightblue">3</div>
<div class="lightblue">4</div>
    .lightblue {
  background-color: lightblue;
}
.orange {
  background-color: orange; /* 순차적으로 실행 */
}

    class

  • id : 클래스는 동일한 클래스 이름을 여러 요소에 사용할 수 있었지만, id는 동일한 id 값을 가진 id가 있으면 안 되고 하나의 요소에만 사용해야 한다. 하나의 요소가 여러 id를 가질 수 없다. [ 예시: 영희 = 주민번호(다른 사람과 같지 않은 고유한 값이며 여러 개일 수 없다.) ]

    <!-- 동일한 id 값 - X -->
<div id="green">1</div>
<div id="green">2</div>
<!-- 하나의 요소 여러 id 값 - X -->
<div id="red blue">6</div>
    <div id="yellow">5</div>
    #yellow {
  background-color: yellow;
}

    id

  • 가상 선택자 : 일반 선택자로 사용할 수 없을 때 사용한다. 주로 특정 상태를 선택 할 때 사용한다.

    • nth-child(n) : tag의 n번째 자식 선택
    • active : 마우스로 누르고 있는 상태
    • focus : 클릭을 했을 때 포커스가 유지되는 상태

    • hover : 마우스를 올린 상태

      div:hover {
  background-color: grey;
}

      hover

❗️주의사항
모든 태그 선택은 *이며, 선택자가 중복될 경우에는 범위가 좁은 것이 우선순위가 높다.

important > id > class = 가상 선택자 > tag 

<div >1</div>
<div >2</div>
<div class="orange lightblue">3</div> 
<div class="lightblue">4</div>
<div id="yellow">5</div> 
<div >6</div>
/* 중복되는 다른 선택자의 background-color를 다른 색으로 설정해도,
  important로 인해 덮어쓰이기 때문에 주의해서 사용해야 한다. */
div {
  background-color: pink !important; /*우선순위가 가장 높은 important*/
  }
.lightblue {
  background-color: lightblue;
}
.orange {
  background-color: orange; 
}
#yellow {
  background-color: yellow;
}
div:hover {
  background-color: grey;
}

important