상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려받는 것을 의미한다.
상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다.

하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다.
font, color, visibility, opacity, line-height, text-align, white-space 이 상속 가능하다

외부 스타일 링크

<style>
       @import url(myStyle.css);
   </style>
 
 or
 <link rel="stylesheet" href="./myStyle.css">

• 스타일 시트가 중첩되었을 때 순위

• 1순위 : 태그 안의 스타일 시트
• 2순위 :
• 3순위 : 파일 스타일 시트

font-size를 pt로 주기도 하고 em 방식을 사용하기도 한다.
em 방식은 현재 글자 크기에서 몇 배의 크기로 해라 하는 뜻이다.
만일 font-size: 1.4em 라고 하면 1.4배의 크기로 만들어라 하는 뜻이다.

opacity

• 요소에 투명도를 부여할수 있는 속성으로 다음과 같이 표현한다
• opacity: 0.5;
  속성 값은 투명에서 불투명까지를 0 ~ 1로 표현 하므로 0.5는 반투명에 해당된다

• 가상 선택자
  CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다.
  이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있다.
  가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 쓴다.
  하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동한다.

• 가상 요소
  가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면,
  가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.
  가상 요소를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있다.
  HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자이다.

가상 클래스 기법

:first-child 여러 개의 반복되는 태그들중에서 첫 번째 요소
:last-child 여러 개의 반복되는 태그들중에서 마지막 요소
:link 링크의 기본 상태
:active 요소 위에서 마우스가 눌려져 있는 상태
:hover 요소에 마우스가 올라가 있는 상태
:visited 방문했던 경험이 있는 링크
:focus 요소에 포커스가 지정된 상태
:checked 체크박스나 라디오버튼 등이 체크된 상태
:selected 드롭다운에서 선택된 요소

자손, 후손 셀렉터

<style>
h3, li{
          color: red;
      }
      ul strong{
        color: dodgerblue;  
      }/* 후손 셀렉터 : 공백으로 지정. 중간 태그를 건너 띄어도 됨*/
      div > div > strong{
          background-color: yellow;
      }/* 자식 셀렉터 : ">"로 지정. 중간 태그를 건너 띄어도 안됨*/
      .warning{
          color: red;
      }/*클래스일 경우만*/
      body.main{
          background: aliceblue;
      }
      #list{
          background-color: mistyrose;
      }
      #list span{
          color: forestgreen;
      }
      h3::first-letter{
          color: black;
          font-size: 25px;
      }
      li:hover{
          background: yellow;
      } /*마우스를 올리면 생기는 이펙트*/
      ::selection{ /*가상요소 - 마우스로 드래그하면 생기는 이펙트 */
          color: red;
          background: yellow;
      }

• content

• html 문서에 쓰지 않고도 CSS로 내용(텍스트나 이미지)을 생성하는 역할
• :before, :after 가상 요소와 주로 사용된다

	<style>
        h1::before{
            content: "안녕하세요";
        }
        h2:after{
            content: url(../image/img2.png);
        }
    </style>

GNB (Global Navication bar)

어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴를 가리킨다.
최상위 메뉴로 보통 상단에 위치하고 있다.
메인메뉴라고도 부른다.

LNB (Local Navigation Bar)

GNB를 누를 경우 소제목 형식으로 나오는 메뉴를 가리킨다.
네비게이션을 통해 특정 지역으로 가는 네비게이션 바이다

SNB(Side Navigation Bar)

일반적으로 왼쪽에 많이 있기 때문에 LNB(Left Navigation Bar)라고 부르기도 한다.
메인메뉴와 서브메뉴를 제외한 나머지 사이드 메뉴이다.

FNB (Foot Navigation Bar)

하단 메뉴를 가리킨다.