HTML/CSS의 핵심내용정리 1

전역속성

• 전역속성(global atttribue)란, 모든 엘리먼트를 대상으로 사용을 할 수 있는 속성을 말합니다.
• HTML에서 자주 사용되는 전역속성에는 tilte, class, id , tabindex , data-, style 등이 있습니다.

선택자

선택자는 뒤에서 부터 읽는 습관을 들이는 것이 좋습니다. 뒤에서부터 해석을 해야하는 이유를 잘 알 수 있는 적합한 예시로는 :nth-child가 있습니다.

만약 div > div:nth-child(3)과 같은 선택자가 있는 경우 1. 세 번째 자식요소 중에서 2. 그 세번째 자식요소가 div태그이면서 3. 그 세번째 자식요소가 div태그가 div의 자식 요소인 녀석을 찾는 것입니다.

<div>
  <h1>1</h1>
  <span>2</span>
  <p>3</p>
  <div>4</div>
  <div>5</div>
  <div>6</deiv>
</div>

위 html의 구조에서는 세번째 자식 요소가 div이기 때문에 스타일이 적용될 수 있는 대상이 없는 것입니다.

상속자 우선순위(명시도)

  <div 
    id="heropy"
    class="heropy"
    style="color:red;">
    123
  </div>

<style>
    #heropy {
      color: blue;
    }

    .heropy {
      color: green;
    }
</style>

위 코드를 적용한다면 123이라는 글자는 어떤 색으로 화면에 출력이 될까요? 이렇게 어떤 스타일이 적용될지를 구분지을 수 있는 것이 바로 상속자 우선순위(명시도) 입니다.

명시도는 아래와 같습니다.

상속자 우선순위

• 인라인방식: 1000점, 따라서 안쓰는 것이 좋습니다.
• 아이디선택자(#) 100점
• 클래스선택자(.) 10점
• 태그 선택자 : 1점
• !important : 무한대
• *: 0점
• 상속으로 받아온 스타일은 점수가 없습니다. 즉, 점수계산자체를 하지 않습니다.

따라서 123이라는 글자에는 인라인 방식으로 명시된 빨강 색상이 적용되게 됩니다.

참고로 인라인 방식의 경우 1000점으로, 아이디선택자와 클래스선택자를 아무리 여러개 써도 스타일을 덮어쓸수가 없기 때문에, 인라인 방식으로 스타일을 적용하는 것은 권장하지 않습니다.

스타일 적용방법 4가지

1. 링크방식

• index-html의 head내부에 링크태그를 이용해 작성합니다. 직렬방식
• <link rel="stylesheet" href="./mian.css">

2. 임베디드 방식(=내장방식)

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>

<style>
  ul > li:nth-child(5) {
    background-color: red;
  }
</style>

3. 인라인 방식

• <div style="color:red;"></div>
• 선택자 우선순위가 1000점이므로 사용을 권장하지 않습니다.

4. @import방식(at-sign)

• html에 연결된 css파일 내부에 @import: url()을 이용해 병렬방식으로 삽입합니다.
• @import url('./style.css');