HTML 태그

시맨틱 태그 <body> 세부화

<header> 머리말

<nav> 메뉴

<figure> 다양한 멀티미디어

<main> 중요 콘텐츠

<aside> 본문과 연관성이 적인 부분

<section> 웹 문서의 특정 영역 그룹화

<article> 기사나 개별 콘텐츠

<footer> 웹 문서의 꼬리말


아이콘

  • https://fontawesome.com/
  • 로그인 후, your kits > settings
    • icons: free
  • your kits 클릭하여 아래 코드 확인
    • <script src="계정 key 값" crossorigin="anonymous"></script>


스타일

  • margin: 요소 밖 여백
    • margin-bottom: 40px;
    • margin: 10px 50px;
    • margin: 10px auto;
  • padding: 요소 안 여백

  • 스타일 리셋

      * {
        margin: 0px;
        padding: 0px;
        color: inherit;
        }

      ul, ol{
       list-style: none;
       }

      a{
       text-decoration: none;
       }

  • 스타일 가져오기
    • 먼저 css 폴더를 만든다.
    • style.css 파일을 만든다.
    • 사용할 css 파일을 만든다. (ex: reset.css)
    • style.css 파일에 위 파일을 임포트한다.
      • @import 'reset.css';
    • index.html <head>에 아래 코드를 넣는다.
      • <link rel="stylesheet" href="css/style.css">


폰트관련 서식

  • 축약형
    • font: bold italic 12px/2 'arial', '돋움';
    • font: 12px/2 'arial', '돋움';  
  • font-weight: normal / bold;
  • font-style: normal / italic;
  • font-size: 14px / 1rem / 1vw / 1vh;
    • rem을 사용한다. 1rem = 16px 이다.
    • reset.css에서 1rem의 사이즈를 조절할 수 있다.
      • html {
          font-size: px;  /* rem 사이즈 */
        }
  • line-height: 1.5;
  • letter-spacing: 10; /* 자간조절, -값을 입력하면 글자가 겹쳐 보인다.*/
  • font-family: 'arial', '돋움';
  • color: pink;
  • text-align: justify; 
    • 정렬은 블록 및 인라인블록 요소에만 지정한다.
  • vertical-align: middle; 
    • 정렬은 인라인 및 인라인블록 요소에만 지정한다.
    • line-height 값이 없으면, 정렬되지 않는다. vertical-align을 하지 않고 line-height만 해도 middle이 적용될 수 있다.


VS Code 에서 더미 텍스트 입력

lorem20 입력 후, <tab>


구글폰트 적용

  • <link> 적용 방식
    • html 페이지를 읽을 때 적용 (속도가 약간 빠르다.)

  • @import 적용 방식
    • css 파일을 읽을 때 적용 (css가 좀 늦게 가져온다.)

  • 랜더링 동작 방식
    • html태그를 해석해서 DOM생성 (Documnet Object Model)
    • css를 해석해서 CSS Dom 생성
    • 위의 객체가 생성되기 전까지는 화면랜더링 블록됨

  • 구글 웹폰트를 <link> 방식으로 연결하는 게 좋은 이유
    • DOM생성시 서버에서 폰트를 사전에 미리 다운로드
    • 많은 웹폰트 연결로 인해 화면 렌더링 지연을 최소화 가능
    • layout shifting 방지 가능 (컨텐츠의 재구성으로 높이값이 어긋나 덜컹거리는 현상)
    • link방식은 한번 다운로드 받은 폰트의 캐싱처리로 인해 layout shifting 최소화






댓글 쓰기

다음 이전