Css 레이아웃 구성, Typography 폰트 구성

레이아웃 구성
Header : Logo , Menu ( Gnb , lnb )
        GNb ( Global Navigation Bar)전체메뉴
        lNB ( Local Navigation Bar) 서브페이지메뉴
Main : 주요 컨텐츠
Footer : 사이트정보, 연락처, 저작권,

: 왼쪽정렬X
: 가운데정렬O
    브라우저가로폭 100%
    가로크기설정후 가운데정렬


: block요소
    width 결정 ---> 부모의 width값을 그대로 적용
    height ---> 컨텐츠(자식)

: 배경색 ---w , h + 패딩


HTML  Layout Tag

Header
Main
Footer

nav 

section
article
aside



그룹요소 class name
    wrap
    wrapper
    container

    main-wrap
    inner-wrap
    outer-wrap
    inner-container


// 블록요소 가운데정렬하기

    width값 필수
    margin-left:auto;
    margin-right:auto;
    margin:0;
    margin:0 auto;
    margin:0 auto 0;
    margin:0 auto 0 auto;

// 조합선택자 사용하기

* 기본형
선택자 { 속성:값;}

계층구조를 활용한 선택자 사용시 3-5단계까지만 권장.

하위선택자:
선택자1 선택자2 { 속성:값; }

계증구조에서 선택자1 하위에 있는 모든 선택자2를 선택
    모든선택자( 자식, 손자, 증손자 다포함가능 )


자식선택자:
선택자1 > 선택자2 { 속성:값; }


contents : cont
title : tit
button : btn 


//  선택자 작성시 계층구조 순서대로 작성을 권장..

Typography 

font-family : 글꼴지정  ***********
font-size : 글자크기지정 **********
line-height : 줄간격높이지정 ************
letter-spacing : 자간 *************
text-align : 가로정렬 (인라인요소의 가로정렬)
text-decoration : 글자장식효과 ( 밑줄, 취소선 , 장식없음 )
text-transform : 대/소문자 변환
vertical-align : 인라인 요소의 기준선 정렬 **************



//////  CSS 상속 ( inherit )

계층구조에서
    하위요소가 상위요소의 값을 그대로 적용:상속

폰트속성 : 상속

폰트 : 1가지 ( 한글(영문,한글))
       한글폰트, 영문폰트

html 또는 body에 폰트속성을 설정
    일부요소는 기본값: 상속거부 (강제상속,개별지정)

font-family:'글꼴이름';
font-family:'맑은고딕';
    한글폰트 : 인용부호감싸기
    띄어쓰기 들어간 폰트이름 : 인용부호감싸기
    한글폰트 : 영문이름지정, 한글이름지정 2개다 지정

font-family:'Malgun Gothic','맑은고딕'
font-family:'dotum','돋움'
font-family:1차폰트,대체폰트,대표폰트;
font-family:'맑은고딕','돋움','sans-serif';
font-family:'삼성고딕','맑은고딕','sans-serif';


폰트적용
1) 시스템폰트
    : 컴퓨터에 저장된 폰트를 사용할경우
        window기본폰트를 적용
        돋움, 맑은고딕
2) 웹폰트
    : 서버에 폰트를 등록, 사용자가 접속시 폰트를 다운로드
    : 시스템폰트보다 로딩속도가 느릴수있음.
        Noto Sans KR
        Poppins
        삼성고딕


font-size : 글자크기
    1) 절대크기  px
    2) 상대크기  %, em, rem, vw, vh


    웹브라우저 기본크기 : 16px ====== 100%