HTML/CSS 9일차

개발 log·2021년 8월 26일
TILhtmlcss
0

TIL

목록 보기
17/21

21.08.19 노트정리


Aside 태그

문서의 주요내용과 간접적으로만 연관된 부분을 나타냄
주로 사이드바 혹은 콜아웃 박스로 표현함

  • 가능한 부모 요소

    • <aside>요소는 <address>의 후손이 될 수 없음

  • 암시적 aria

    • complementary

  • 가능한 aria

    • feed, none, note, presentation, region, search

모바일 퍼스트 vs 데스크탑 퍼스트

모바일 퍼스트 디자인

  • 웹 어플리케이션을 구축하는 단계에서부터 모바일 중심으로 구축하는 것

  • 모바일은 먼저 구축한 후 데스크톱이나 타 기기를 위해서는 그에 맞는 반응형/적응형 웹을 제공하는 방식

  • 왜 모바일 퍼스트 디자인인가?

    • 모바일 앱을 데스크톱으로 확장하는 것은 쉽지만 데스크톱 앱을 모바일로 간추리는 것은 어렵다

데스크탑 퍼스트 디자인

  • 데스크탑 화면이 중요하거나 기존에 개발되어 있던 데스크탑 화면의 CSS에 모바일 화면에 대한 추가개발을 할 경우 많이 사용함

    • 가장 작은 디바이스 : 576px이하
    • 모바일 디바이스 : 576px보다 큰 경우의 모바일 디바이스에 대한 CSS작성
    • 태블릿 디바이스 : 768px보다 큰 경우의 태블릿 디바이스에 대한 CSS작성
    • 데스크탑 : 992px보다 큰 경우의 데스크탑에 대한 CSS작성
    • 큰화면의 데스크탑 : 1200px보다 큰 경우의 데스크탑에 대한 cSS작성

Layout

FlowLayout

  • 가운데 중심으로 배치
  • 프레임이 작으면 아래로 흘러 넘치는 모양

BorderLayout

  • 가운데를 중심으로 동서남북으로 배치

GridLayout

  • (행, 열) -0을 기입하면 auto
  • GridLayout(0,2)로 만들면 2열이 넘어가는 데이터가 3열로 오면 자동으로 다음행 1열로 간다

BoxLayout

  • 한칸(행)에 하나씩 차지하도록 하는 배치

미디어 쿼리

@media screen and (max-width: 480px) {
    body {
        font-size: 12px;
    }
}

미디어 타입 판별

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

해상도(DPI)기준으로 적용하기

해상도 기준 타겟팅은 min-resolution, max-resolution
해상도가 300dpi 이상일 때의 규칙

@media only screen and (min-resolution: 300dpi) {
}

가로모드 적용하기

@media only screen and (min-width: 480px), (orientation: landscape) {
}

중단점(breakpoint)

케바케이지만 일단 대표격 중단점

  • Mobile - <= 480px
  • Tablet - <= 768px
  • Tablet Landscape - <= 1024px
  • Laptop - <= 1600px
  • Desktop - > 1600px

Width vs Max-Width

Width

  • Width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지

Max-Width

  • Max-Width 속성은 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않음

width: 100%로 지정한 경우

  • 창의 크기를 줄이거나 늘리면 창의 너비에 맞춰 크기가 충실히 증감

가로너비값을 아무것도 지정하지 않은 경우

  • 창의 크기를 줄여도 이미지크기에 아무런 변화도 없음

max-width:100%로 지정한 경우

  • 본래의 너비보다 창의 크기를 줄이면 줄인만큼 충실히 줄어듬
  • 하지만 크기를 키울때는 본래의 너비를 유지함

<picture>태그

<picture>태그는 <img>요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용함
viewport의 너비에 다라 커지거나 작아지는 하나의 이미지를 사용하는 대신 다른 기기의 뷰포트에 알맞게 채워지도록 여러개의 이미지 중 적절한 이미지를 사용할 수 있도록 함
웹 개발자가 이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주기에, 반응형디자인에서 주로 사용함

  • 반응형할때 picture말고 안에 img에 클래스를 줘라

  • <picture>태그는 0개이상의 <source>태그와 하나의 <img>태그로 구성됨

  • 브라우저는 <source>태그 중 해당 뷰포트와 가장 잘 어울리는 <source>태그를 아래와 같은 방법으로 선택함

    • 브라우저는 <source>태그들의 속성값을 각각 확인해 나가며 조건을 만족하는 첮번째 <source>태그를 사용하고 나머지 <source>요소들은 무시함
    • 이 때 <img>태그는 <picture>태그의 자식 요소 중 가장 마지막에 위치해야함
    • 위와 같은 <img>태그는 <picture>태그를 지원하지 않는 브라우저를 위한 하위 호환성을 위해 사용되거나 명시된 <source>태그가 모두 조건을 마족하지 못할 경우 사용됨
<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

srcset

  • srcset속성은 이미지 소스의 세트라는 의미

    • 같은 비율의 다양한 크기를 가지는 동일 이미지들을 최소 2개 이상 명시하는 속성
    • 1개 이미지 소스만 명시하려면 src사용

  • srcset속성은 브라우저에 이미지 선택권을 위임하는 속성

    • 같은 비율의 다양한 크기를 가지는 동일 이미지

Descriptor

x or w

x

이미지의 비율 의도

w

이미지의 원본 크기(가로너비)를 의미
400 x 300px 크기 이미지의 w값은 400w
브라우저는 지정된 w 디스크립터를 통해 각 이미지의 최적화된 픽셀 밀도를 계산함

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"
  src="images/heropy.png"
  alt="HEROPY" />
  • 위 예제의 결과는
    • 뷰포트 너비가 400px 이하일 때 heropy_small.png(400px)이 사용됨
    • 뷰포트 너비가 401 ~ 700px 일 때 heropy_medium.png(700px)이 사용됨
    • 뷰포트 너비가 701px 이상일 때 heropy_large.png(1000px)이 사용됨

aspect-ratio

  • 패딩 트릭없이 비율조정할 수 있는 속성

X-UA-Compatible, IE=edge, 호환성 보기

<meta http-equiv="X-UA-Compatible" content="IE=edge">

X-UA-Compatible

  • 웹의 호환성을 지정하는 <meta>태그

호환성 보기의 이해

  • 호환성 보기 버튼은 IE8이 웹페이지에 접근했을 때, 어떤 렌더링 엔진을 사용할 것인지를 선택하게 하는 용도의 버튼
  • IE의 브라우저 버전이 올라가며 해당 오류들을 웹표준에 맞게 수정하며 기존의 구형 브라우저와는 다르게 해석되는 부분이 발생하게 됨

렌더링 모드 적용

  • 이전에 호환성 보기 버튼을 클릭함으로써 웹 표준을 지키지 않던 브라우저의 레더링 방식으로 작동하는데
  • 현재의 웹표준을 지키는 브라우저들을 기준으로 제작된 웹페이지들은 호환성보기 버튼을 필요로 하지않고 최신 렌더링 모드로 작동하여 강제할 필요가 생겼음
  • 아래와 같이 X-UA-Compatible가 지정된 <meta>태그를 사용하여 어떤 렌더링 엔진을 사용할 것인지 전달할 수 있음
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • IE=edge : 최신모드로 지정된 DOCTYPE에 상관없이 IE8이상 버전에서 항상 최신 표준 모드로 렌더링됨

Favicon

웹페이지에 접속했을 때 상단 탭에 보여지는 아이콘을 일컫는 것 

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2">
<link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
  • 전통적으로 favicon.ico파일은 16컬러 24비트 알파 투명도 포맷의 16x16 아이콘 파일
  • 최근 파비콘은 32x32를 지원함
크기용도
16x16IE9 주소 표시줄, 고정된 사이트의 점프목록/툴바/오버레이
24x24IE9 고정된 사이트 브라우저 UI
32x32IE의 새로운 탭 페이지, 윈도우7 이상에서 작업 표시줄 단추, Safari 나중에 읽기 사이드바
48x48윈도우즈 사이트 아이콘
64x64윈도우즈 사이트 아이콘, HiDPI/Retina에서 Safari 나중에 읽기 사이드바
  • title에 그려지는 로고파트를 담당
  • favicon.ico 또는 favicon.png로 지정가능

팝업의 종류

팝업

  • 갑자기 pop하고 생성되는 새 창을 의미
  • 새 창을 표시하기 위해 기존 페이지를 전환하는 방식이 아닌, 새로운 웹 창을 하나 더 추가시키는 기능

Alert / Confirm / Prompt

  • JS를 이용해 사용자에게 주의를 주거나 확인을 받거나 입력값을 받는 브라우저 메시지 창

레이어 팝업

  • 페이지 위에 하나의 layer를 쌓아서 보여주는 창

모달

  • 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창
  • 모달 대화상자로 불림
    • 대화상자를 부를 때 흔히 사용되기 때문
    • 자주 사용하는 파일 열기/저장 대화상자
  • 사용자의 명령을 인식하기 위해 혹은 긴급상황을 알리기 위해 많이 사용됨

토스트 팝업

  • 토스트기기에서 툭 튀어나오는 것 같다고해서 토스트 팝업
profile
개발 log
개발자 지망생
이전 포스트

HTML/CSS 8일차

다음 포스트

HTML/CSS 10일차

0개의 댓글