CSS 기본

FRONT-END 2023. 4. 8. 21:21

CSS specicificity: 인라인 style1순위, ID 2순위, class 3순위, 요소 4순위 => 1,0,0,0 혹은 1000 형태로 표현됨. 0010 은 class임.

=> p { color:red;] .p1 { color:green; } 이면 p는 0.0.0.2 이고 .p1은 0.0.1.0 이라서 .p1이 힘이 우선 적용된다...

(p가 0.0.0.1이 아니고 0.0.0.2인 이유는 아직 잘 모르겠음) => 암기: Inline + ICA(id,class, attribute)

CSS Selectors:

Universal Selector: * { padding: 10px; }
Element Type Selector: ul {border: solid 1px #ccc;}
ID selector: #myContainer { width: 90px; margin: 0 auto; } => <div id="myClass"/>
Class selector: .box {width: 20px;} => <div class="box">
Descendant 결합: #container .box{ float:left; } => <div id="container"> <div class = "box"> HI </div> </div>
1단계 Child만 결합: #container> .box{ float:left; } 위예제는 모든 자손들 box 다 포함이지만, > 사용시 딱 1단계 child만 적용
동일레벨(sibiling) 결합: h2 ~ p {font-weight: bold;} => <h2> A </h2> <p> B </p> 도 굵게 됨.
#container ~ .box 라고 동일 레벨선상의 두 요소에 전체적으로 적용이 됨.
요소(attribute) selector: input [type="text"] {background-color:#fff;} => <input type="text"> 에 적용됨.

Internal Style Sheet VS. External : (external: <link rel="stylesheet" href="blabla.css"> )

html 안에서 직접 CSS사용하고 싶으면 <style> </style> 테그만 있으면 된다.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: lightblue;
    }
    h1 {
      color: white;
      text-align: center;
    }
    p {
      font-size: 18px;
      color: darkblue;
    }
  </style>
</head>