CSS-2

12 Jan 2021

** Naming 표기 방식
-  Naming을 하는 경우 하나의 이름에 여러 단어를 사용해서 정의해야 한다.

 Ex) 간단한 단어를 사용하는 경우
     - title, heading, paragraph ...
     : 이러한 경우 Naming이 중복될 여지가 많다.

     여러단어를 조합해서 사용하는 경우
     - contents-title, list-title ...
     : 이러한 경우 Naming이 중복될 여지가 적다.
     : 이름이 길어진다.

 => Naming을 여러단어로 조합해서 사용하는 경우 단어별로 구분되도록 해야한다.
    Naming은 공백을 허용하지 않는다.

   Ex) contentstitle => contents title (x)
      contentstitle => contents-title (o)


 ** 여러 단어를 조함해서 Naming을 하는 경우 : 단어와 단어를 쉽게 구분할 수 있도록 해주는 것 : Naming 표기 방식

  1. contents-title : kebab case
  2. contents_title : snake case
  3. contentsTitle : camel case
  4. ContentsTitle : Pascal case

  ** F.E (개별 기준 - 각각의 상황에 맞도록 표기법을 구분해서 사용하는 방식)
      HTML : id, class(attribute) -> kebab case
      CSS : id, class(선택자) -> kebab case
      JavaScript : 변수,함수 -> camel case
      ES6 이후 버전 : Class(객체) -> Pascal Case
      파일, 폴더 이름 : snake case

      Ex)
      HTML
      : <h1 class="contents-title">제목</h1>
      : <img src="/imges/contents_title.jpg" alt=""/>

      CSS : .contents-title{color:red}

      JS(JQ)
      : $('.contents-title').on('click',function(){
      setTimeout(function(),{});
      });

      : class ContentsTitle{
        ...
      }

      => contents-title : id, class
         contents_title : file, folder
         cintentsTitle : 변수, 함수
         ContentsTitle : ES6 이후 버전에서 사용하는 Class

   ** Programing Language
      Java , C, C++, C#
      - 변수, 함수 : camel case
      - Class(객체) : Pascal case

      Python
      - 변수, 함수, class : snake case

** 컬러 표시 방식
    1. CMYK : 인쇄
    2. RGB : 화면 표시

   컬러 코드 표기
    1. 10진수 => rgb(255,255,255) => 0 ~ 9 사용
    2. 16진수 => #ffffff => 0 ~ 9,A ~ F 사용
    * 8 bite = > 1 byte = 0 ~ 255
    * UTF-8 = 2 byte => 한글1개
              1 byte => 영문1개

** 색 표시(인코딩) 원리
    - R, G ,B 각 1byte로 색을 표시 : 각 256가지 색을 표현할 수 있다.

** 투명(불투명도)
    - opacity, transparent/transparency, alpha
    - css 투명 표시
      1. css property
         : opacity - 0~1범위으 소숫점 사용한다(0:투명,1:불투명)
         : HTML Element의 속성을 조정한다.(★)
         Ex) { opacity:0.5 } => 반투명
      2. color function : rgba()
         : rgba(255,255,255,[0]) - 0~1범위으 소숫점 사용한다(0:투명,1:불투명)
         : 표현되는 색을 조정한다.(★)
         Ex) { background-color:rgba(100,59,186,0.5) } =>반투명  
      3. css property의 value
         : transparent 키워드 사용한다.
         Ex) { background-color:transparent }