Dev-dotoli TIL

inf 3 CSS



CSS

demo2.html



CSS

Cascading Style Sheets

  • style을 이용해 HTML요소가 어떻게 그려지는지 정의
  • contents와 stype을 나눠서 구성할 수 있게 함
    • CSS는 HTML코드안, 혹은 외부의 stylesheet(CSS file)로 구성


CSS 문법

style tag안에 작성

<style>
  body {
    backgound-color: #ffffff;
  }
</style>

두가지 파트로 구성

  • selector (선택자)
    • css 적용하고자 하는 HTML elements


  • declaratives (선언부)
    • 하나 이상 존재 (;구분)
    • 속성명과 값으로 나뉘어 담김
    • 속성은 바꾸고자 하는 style의 종류며 값을 가지고 있음
  h1  {color: blue; font-size: 12px; }
선택자     선언1          선언2


id 속성 / class 속성

특정 요소에 대한 선택자를 적용하는데 있어서 tag명 뿐 아니라 id속성, class속성을 이용해서도 선택자를 구성할 수 있음

  • id 속성

    • unique한 HTML 요소의 style을 변경할 때 씀

      유일한 하나의 element에만 적용
      HTML요소에 id속성과 값을 주고 css에서 #을 이용해
      id값을 적어줘서 HTML 요소의 style을 지정

      #paral {
  text-align: center;
  color: red;
}

      <body>
  <p id="paral">Center, red</p>
  <p>Left, black</p>
</body>

  • class 속성

    • 같은 class를 지니고 있는 모든 element의 속성을 변경

      여러 element를 선택할 때 씀
      class=”center”가 적용된 모든 element에
      동한 style을 정의함

      .center {
  text-align: center;
}

      <body>
    <p class="center">Center</p>
    <h1 class="center">Center2</p>



CSS Selector

demo2.html

선택하고 - 대상에게 효과를 줌


기본적인 selector type

  • tag selector
    교복

  • id selector
    학생 한명

  • calss selector
    교실 전체


심화적인 selector type

고급 selector

  • 조상 자손 selector
    ul 아래의 모든 tag를 선택 적용 ex) ul li
  • 부모 자식 selector
    선택한 것 바로 밑에 있는 선택자만 선택 적용 ex) #lecture>li
  • 동시 selector
    해당하는 두개의 tag를 동시에 선택 적용 ex) ul, ol
ul li {
  color: red;
}
// ul밑 모든 li tag

#lecture > li {
  border: 1px solid red;
}
// #lecture 바로 밑 li만

ul,
ol {
  background-color: powderblue;
}
// ul과 ol을 동시 선택

<body>
  <ul>
    <li>HTML</li>
    <li>css</li>
    <li>JavaScript</li>
  </ul>
  <ol id="lecture">
    <li>HTML</li>
    <li>
      CSS
      <ol>
        <li>selector</li>
        <li>declaration</li>
      </ol>
    </li>
    <li>JavaScript</li>
  </ol>
</body>