셀프 프론트엔드 부트캠프 - 둘째 날

어제까지는 배경지식을 쌓았다면 오늘부터는 본격적으로 책을 읽고 공부에 집중했다. HTML과 CSS의 경우 원래 어느 정도는 알고 있어서 책을 가볍게 훑으며 잊어버렸거나 몰랐던 내용만 한 번 더 파악했다.

오늘 한 것

• <Do it! HTML+CSS+자바스크립트 웹 표준의 정석> HTML, CSS 부분 훑기

오늘 새롭게 배운 것

• HTML

  • <aside> 태그는 사이드 바 영역을 나타냄
  • 경고나 주의 사항처럼 중요한 내용을 강조해야 할 때는 <storng>, 단순히 글자만 굵게 표시할 때는 <b> 태그
  • 이탤릭체로 강조할 때는 <em>, 이탤릭체로 표시할 때는 <i>
  • 위 첨자 <sup>, 아래 첨자 <sub>

  • <ol> 태그의 type은 “1”(숫자, 기본값), “a”(영문 소문자), “A”(영문 대문자), “i”(로마 숫자 소문자), “I”(로마 숫자 대문자)

    • start 속성을 사용해 시작 번호를 바꿀 수 있음
  • <dl>, <dt>(이름),<dd>(값) 태그는 설명 목록을 만들 때 사용

  • <table>

    • 표에 제목을 붙이고 싶다면 <caption> 태그
    • <th> 태그로 제목 행에 셀을 만들어 진하게 표시되고 중앙에 배열

    • <thead>, <tbody>, <tfoot> 태그로 표의 구조를 나누어 표시할 수 있고 구조를 지정하면 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있음

      • <th>와 <thead>는 서로 대체될 수 없음
    • 행이나 열을 합치는 <rowspan>, <colspan>

    • <col>, <colgroup>으로 열을 묶고 스타일 설정할 때 활용

      • 반드시 <caption> 태그 다음에 써야 함
  • <object> 태그는 오디오 파일 뿐 아니라 비디오, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용

  • <form>

    • method 속성: get(256~4,096 byte까지만 서버로 넘김), post(입력한 내용의 길이에 제한 받지 않고, 입력 내용도 드러나지 않음)
    • action 속성: 내용을 처리해 줄 서버 프로그램을 지정
    • <fieldset>, <legend> 태그로 폼 요소를 그룹으로 묶음
    • <label for="">과 <input id="">를 통해 두 태그가 떨어져 있어도 둘 사이를 쉽게 연결 할 수 있음
    • type=“tel”은 전화번호를 나타내는 필드로 모바일 페이지에서 이 값으로 바로 전화를 걸 수 있음
    • 라디오 버튼에서 하나의 버튼만 선택할 수 있게 하려면 name값을 똑같이 지정
    • type=“number”, type=“range”, type=“date”, type=“file”
    • autofocus 속성으로 자동으로 입력 커서를 갖다 놓음

• CSS

  • 전체 선택자로는 별표(*)를 사용하고 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용
  • 클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자와 달리 id 선택자는 문서에서 한 번만 적용할 수 있다는 것

  • 캐스케이딩 스타일 시트

    • 사용자 스타일 → 제작자 스타일 → 브라우저 기본 스타일

    • 중요도가 가다면 스타일 적용 범위가 좁을 수록 우선순위가 높아짐

      • !important → 인라인 스타일 → id 스타일 → 클래스 스타일 → 타입 스타일
    • 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀

  • 상대 크기(1em은 16px, 12pt와 같음)

    • em: 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
    • rem: 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정

  • 16진수 색상 표현

    • #0000ff처럼 두 자리씩 중복될 경우 #00f로 줄여서 표기할 수 있음

  • 텍스트 표현

    • text-align: justify 양쪽 정렬해서 오른쪽에 여백이 생기지 않음
    • 보통 줄간격(line-height)은 글자 크기의 1.5~2배면 적당
    • letter-spacing, word-spacing
    • list-style-type: “disc”, “decimal-leading-zero”, …

  • 표

    • border 속성 사용하면 셀과 셀 사이 여백이 생기며 두 줄 표시(seperate)가 기본인데 border-collapse: collapse;로 테두리를 합쳐 하나로 표시

  • 박스 모델

    • 박스 모델은 콘텐츠 영역, 패딩(padding), 테두리(border), 여백(margin) 등의 요소로 구성

    • box-sizing에서 콘텐츠 영역만 너빗값 지정(content-box)이 기본값이나 border-box로 테두리까지 포함 가능

      • 웹 문서 레이아웃을 만들 때 요소의 크기를 쉽게 계산하기 위해 border-box로 지정해 놓는 것이 좋음
    • 이미지 요소의 너비와 높이를 똑같이 만든 후 border-radius의 반지름값을 너비나 높이의 50%로 지정하면 원이 됨
    • 마진 중첩 현상: 요소를 세로로 배치하는 경우 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹체지는 문제
    • positon: absolute라고 한 후 위칫값을 지정하면 요소 중 position: relative를 사용한 요소를 기준으로 위치를 결정

  • 배경

    • background-clip 속성으로 배경 적용 범위 지정
    • background-origin으로 배경 이미지 적용 범위 지정, background-attachment 속성으로 배겨잉미지 고정
    • background 속성 하나로 줄여서 여러 속성 묶어서 쓸 수 있음

    • linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, …]);

      • repeating-liniear-gradient, repeating-radial-gradient

  • 고급 선택자

    • 상위요소 하위요소 { … }

    • 자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용

      • 부모요소 > 자식요소 { … }
      • 하위 선택자에서는 자식요소뿐만 아니라 자식의 자식까지 적용되지만 자식 선택자에서는 단 한 단계 아래의 요소에만 스타일이 적용됨

    • 형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자

      • 요소1 + 요소2 { … }

    • 모든 형제 요소에 적용되는 것이 혀제 선택자

      • 요소1 ~ 요소2 { … }

    • 속성값에 따라 원하는 요소를 선택할 때 사용하는 것이 [속성] 선택자

      • [속성 = 속성값] 선택자
      • [속성 ~= 값] 선택자: 여러 속성값 중 해당 속성값이 포함된 요소를 선택
      • [속성 |= 값] 선택자: 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈으로 연결된 단어도 선택
      • [속성 ^= 값] 선택자: 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾을 때
      • [속성 $= 값] 선택자: 지정한 속성값으로 끝나는 요소를 선택
      • [속성 *= 값] 선택자: 어느 위치에 있든지 지정한 속성값이 포함되어 있을 때

    • 가상 클래스와 가상 요소

      • :link, :visited, :hover, :active, :focus

        • LoVe HAte 순서로 정의
      • :target 가상 클래스 선택자로 앵커로 연결된 부분의 스타일을 쉽게 적용할 수 있음
      • :enabled, :disaled
      • :checked
      • :not

    • 구조 가장 클래스

      • 특정 위치의 자식 요소

        • :only-child, :first-chid, :last-child, :nth-child(n), …

          • :nth-child(odd), :nth-child(even)

    • 가상 요소

      • 가상 클래스와 구별하도록 콜론 2개를 붙여서 표시
      • ::first-line, ::first-letter
      • ::before, ::after

    • 트랜지션과 애니메이션

      • translate(), scale(), rotate(), skew()

      • transition-timing-function

        • “ease”(천천-점점 빨라지다가-천천), “linear”(처음부터 끝까지 같은 속도), “ease-in”(느리게 시작), “ease-out”(느리게 끝냄), “ease-in-out”, “cubic-bezir(n, n, n, n)“(베지에 함수를 정의해서 사용)
      • @keyframes <이름>의 이름을 animation-name으로 설정해 애니메이션을 구별

    • 반응형 웹과 미디어 쿼리

      • 뷰포트의 속성

        • “user-scalable”(확대 축소 가능 여부, yes or no), “initial-scale”(초기 확대축소 값, 1~10)

      • 뷰포트의 단위

        • “vw”(1vw는 뷰포트 너비의 1%), “vh”(1vh는 뷰포트 높이의 1%), “vmin”(뷰포트 너비와 높이 중 작은 값의 1%), “vmax”

      • 미디어 쿼리

        • @media [only | not] 미디어 유형 [and 조건] * [and 조건]
        • 미디어 유형의 종류: “all”, “print”, “sceen”, “tv”, “aural”(음성 합성 장치), “braille”(점자 표시 장치), “handheld”, “projection”, “tty”(디스플레이 기능이 제한된 장치), “embossed”(점자 프린터)
        • device-width, device-height
        • orientation: portrait, landscape

        • 중단점: 화면 크기에 따라 서로 다른 CSS를 적용할 분기점

          • 모바일 퍼스트 기법: 모바일을 먼저 고려하여 미디어 쿼리 작성

            • 스마트폰: 모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 CSS로 작성. 스마트폰의 방향까지 고려해서 제작한다면 min-width의 세로와 가로를 각각 portrait 320px, landscape 480px로 지정
            • 태블릿: 세로 크기가 768px 이상이면 태블릿으로 지정. 가로 크기는 데스크톱과 똑같이 1024px 이상으로 지정
            • 데스크톱: 화면 크기가 1024px 이상이면 데스크톱으로 설정

        • <link> 태그와 @import 문은 모두 외부에서 CSS 파일을 가져와 사용하는 방법

          • IE의 경우 @import 문과 자바스크립트가 함께 있을 경우 자바스크립트를 먼저 내려받은 후에 @import 문에 있는 CSS를 다운로드하기 때문에 CSS 파일이 많고 규모가 큰 사이트를 개발한다면 @import 문 보다 <link> 태그를 주로 사용

      • 그리드 레이아웃

        • 웹 사이트의 레이아웃을 정할 때 사이트 전체 디자인이나 일관성을 유지하기 위해 그리드 레이아웃 사용

          • 그리드 레이아웃이란 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것

        • 플렉스 박스: 수평 방향이나 수직 방향 중에 한쪽을 주축으로 정하고 박스를 배치

          • 플렉스 컨테이너(부모 박스), 플렉스 항목(자식 박스), 주축(기본적으로 왼쪽에서 오른쪽이며 수평 방향), 교차축(주추고가 교차하는 방향으로 기본적으로 위애서 아래)
          • “justify-content”(주축 방향의 정렬 방법), “align-items”(교차축 방향의 정렬 방법), “align-self”(교차축에 있는 개별 항목의 정렬 방법), “align-content”(교차축에서 여러 줄로 표시된 항목의 정렬 방법)
          • dispaly: flex, inline-flex
          • flex-direction: row, row-reverse, column, column-reverse
          • flex wrap: 플렉스 컨테이너의 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부 지정
          • 주 축에서 줄 바꿈이 생겨 여러 줄로 표시할 때 align-content 속성 사용, 한 줄일때는 align-items 속성

        • CSS 그리드 레이아웃: 수평과 수직 어느 방향이든 배치할 수 있음

          • 소스를 최대한 간단하게 유지하면서 대부분의 기기에 대응할 수 있는 기법
          • display: grid, inline-grid
          • grid-template-columns 속성과 grid-template-rows 속성을 이용해 칼럼과 줄의 크기와 개수 지정

          • 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr(fraction) 단위를 사용

            • 1fr 1fr 1fr; → repeat(3, 1fr);
          • minmax() 함수로 최솟값과 최댓값을 지정
          • auto-fit, auto-fill
          • grid-column-gap, grid-row-gap, grid-gap
          • grid-area

• JavaScript