Skip to content

Latest commit

 

History

History
109 lines (94 loc) · 8.99 KB

20210819.md

File metadata and controls

109 lines (94 loc) · 8.99 KB
Raw

HTML / CSS

배운 것들

CSS 변수

  • 정확히는 CSS custom property라고 부른다.
  • double dash --로 선언하며, 유효한 CSS 값이라면 아무거나 지정하여 속성 값에 var()로 사용이 가능하다.
element {
  --primary-color: #f3e2a1;

  --primary-font-color: var(--primary-color);
}
  • :root라는 의사 클래스를 통해 전역 변수로 설정 가능
  • 변수로 설정한 값을 또다른 변수에 지정할 수도 있다.
    • 폰트컬러용, 배경색상용 변수를 따로 두어 유지보수를 편하게 할 수 있음

반응형 웹 디자인

미디어 쿼리

  • 디바이스 유형과 화면 특성, 수치 등을 특정하여 다른 스타일링을 적용하도록 미디어쿼리를 작성할 수 있다.
  • 디바이스 유형: screen이 일반적, print, speech도 있음
  • 화면 특성이나 수치: 괄호로 묶은 속성과 값을 입력, 뷰포트 너비 기준 max-width나 min-width 등의 범위 기능을 특정하는 것이 일반적이나, 사용자 주 입력 방식 hover이나 흑백 기능 여부 color 등도 지정 가능
  • and, ,(or로 기능), not, only 등의 연산자로 조합하여 지정
    • only 연산자는 전체 쿼리가 일치할 때만 스타일을 적용. 구형 브라우저는 앞부분만 읽고 뒷부분을 읽지 않고 적용하기도 함. only 연산자 사용 시 반드시 미디어 유형을 지정해야 한다.
@media screen and (max-width: 767px){
  element {
    property: value;
  }
}

@media all and (min-width: 768px){
  element {
    property: value;
  }
}

레이아웃

  • 모바일을 기준으로 마크업하는 게 더 논리적으로 설계하기 좋다.
  • container로 전체를 감싸는 것이 반응형 웹 만들기에 편리하다.
  • 전체 영역을 row 방향으로 flex 아이템이 흘러가게 만들고 모바일에서는 각 아이템을 width를 100%로 준 후 flex container에 flex-wrap 값을 wrap으로 하면 column처럼 떨어진다.
    • row가 보통 더 보편적이고 유연하게 사용되므로 위와 같은 방법으로 column처럼 보이게 하는 것이 좋다.
  • container의 min-height를 100vh로 주면 화면 전체 높이로 늘어난다.
    • 이 때 flex-item 사이로 여백이 배분되는데, wrap으로 여러 줄로 쌓인 요소들을 교차축 정렬해주는 align-content 속성으로 조절한다.
    • flex-start 값을 주면 교차축 맨 앞으로 붙는다.
    • c.f. align-items는 한 줄로 있는 높이가 서로다른 요소들을 교차축 기준 정렬한다. 여러 줄로 되어 있는 경우 flex container의 높이를 item들이 차지하는 줄의 개수만큼 배분한 높이를 기준으로 교차축 정렬한다.
  • desktop에서 너무 좌우로 무한정 늘어나지 않도록 container에 max-width를 주고, 가운데 정렬을 위해 좌우 마진을 auto로 준다.
    • 좌우 빈 영역에 대한 작업을 하기 위해서는 margin auto 말고 음수마진 등 다른 기법으로 가운데 정렬을 해주어야 한다.

<picture> / <source> 요소와 아트 디렉션

  • 아트 디렉션: 디스플레이 크기에 따라 다른 이미지를 노출시킨다.
    • e.g. 모바일에서는 정사각형 모양의 간단한 배너, 데스크탑에서는 더 많은 정보를 가진 넓은 배너를 노출시키는 등
  • picture 요소는 자식으로 0개 이상의 <source>와 1개의 <img>를 갖는다.
    • <source> 요소의 srcset 어트리뷰트에 이미지경로를 넣는다.
    • 각 이미지를 노출시킬 조건을 <source> 요소의 media 어트리뷰트에 미디어쿼리에 넣는 구문 형식으로 넣으면 동작한다.
    • 상단의 source 요소로 렌더링하면 밑의 요소들을 무시하므로 순서에 유의한다.
      • 최신 브라우저가 지원하기를 바라는 더 높은 사양의 이미지를 상단에 작성
    • 어떤 source도 디스플레이 조건을 충족하지 않거나 특정 이미지 파일이 지원되지 않는 등의 경우 img 태그로 마크업한 이미지가 fallback으로 노출된다.
  • 이미지 스타일링 할 떄는 picture이 아니라 img 태그에 클래스 이름을 부여한다.
    • source요소 에서 지원되는 srcset 경로 이미지가 img 태그의 src에 들어간다고 생각하면 된다.

<video>와 <source> 요소

  • 플러그인에 의존하지 않고도 브라우저에서 영상을 재생할 수 있게 하는 태그.
  • <picture>과 동일하게 <video> 태그 영역 안에서도 <source> 태그를 통해 여러 확장자 중 지원하는 첫번째 파일� 로드하게 할 수 있다.
    • 이미지를 스타일링하기 위한 클래스는 <picture>이나 <source>가 아니라 fallback으로 주는 img 태그에 부여했지만, 영상 영역의 스타일링은 <video> 태그에 직접 클래스명을 부여한다.
    • 어떤 <source>도 렌더링하지 못한 경우를 위해 텍스트로 '지원하지 않는 브라우저'라고 써둔다.
    • src 어트리뷰트로 영상 경로를 가져온다. (이미지 최적화에 사용했던 어트리뷰트 srcset은 <picture>의 자식요소인 <source>에서만 유효한 어트리뷰트)
    • <source>의 type 어트리뷰트에 'video/mp4' 등으로 파일형태를 기재할 수 있다.
    • <source> 태그 없이 바로 <video src="{파일경로}">로 로드할 수도 있다.

<iframe>과 화면비율

  • 유투브 등 내 서버 외의 곳에서 가져온 영상을 보여줄 수 있다.
  • <iframe> 태그 안에 title 대신 aria-label로 접근성까지 확보한 이름을 달아주면 좋다.
  • iframe에 직접 CSS로 width와 height를 100%로 지정하면 될 것 같지만 height는 짤린다. width는 그대로 100%로 주고, height auto를 준다.
    • 반응형으로 작업하려면 iframe에 container용 div 요소를 만들어 씌운 후 작업한다.
    • 예전에 쓰던 padding trick: iframe을 감싼 container 요소에 width 100%, height 0을 주고 padding-top으로 iframe의 영상 비율에 맞는 퍼센트 값을 준다. 그리고 container를 offset-parent(containing block)로 position absolute를 갖도록 한다.
    • aspect-ratio 속성 이용: container에 aspect-ratio의 속성값으로 비율을 준다. 16:9 인 경우 16/9 등으로 주면 됨.
      • aspect-ratio는 iframe 뿐 아니라 img나 video 태그에도 사용 가능하다.
  • 비율별 대응을 위해 container에 iframe4, iframe16, iframe21 등의 클래스이름을 부여하고 각자의 비율을 정의해두는 식으로 사용할 수 있다.

Miscellany

  • 반응형 웹 디자인을 위해서는 배경이미지보다는 img 태그로 작업하는 것이 수월하다.
    • 배경이미지로도 할 수는 있다. background-size: cover;로 이미지 크기를 요소 크기 전체로 맞춰두면 된다.
  • <img> 태그의 srcset 어트리뷰트로 배율이나 디스플레이 크기에 따라 여러 벌의 이미지를 제공할 수 있다.
    • srcset 속성을 지원하지 않는 환경을 위해 src로 fallback 경로도 넣는다.
  • float나 flex item은 서로 겹치는 것이 불가능하다.
    • position으로 조절하거나 grid로 덮어씌우는 item만이 겹칠 수 있다.
  • margin과 padding에 백분율을 사용하는 경우 부모의 가로크기를 기준으로 한다.
  • 선택자에 user-select: none;을 선언하면 해당 요소는 드래그해도 선택되지 않는다.
  • <head> 영역에 <link rel="icon" href="{아이콘 경로}"/>로 ico 파일을 지정하면 브라우저 탭의 타이틀과 즐겨찾기 시에 아이콘 이미지가 노출된다.

조사해 볼 것들

  • webp 파일 등 차세대 이미지 파일형식
    • 압축률이 굉장히 높은 이미지 파일 형식으로, 서버비용을 획기적으로 줄일 수 있다.
    • 화질차이가 없는데 일반 jpeg 절반으로 용량을 줄일 수 있다. avif는 그보다 더 줄일 수도.
    • 다만 아직 모든 브라우저가 지원하지 않는다. 그래서 <picture>와 <source>로 브라우저가 지원할 수 있는 파일 한 벌만 제공하는 코드를 통해 이미지 최적화를 구현해야 한다.
  • reset CSS와 normalize CSS의 차이
    • 웹 브라우저마다 각자의 기본 스타일을 가지고 있기 때문에 개발자가 의도한 스타일링이 나오지 않을 때가 있다. 이를 위해 Reset CSS와 Normalize CSS는 둘다 각 브라우저가 제공하는 agent style을 재정의한다.
    • reset CSS는 모든 agent style을 다 없애버린다. 모든 헤딩 레벨이나 블록은 마진을 갖지 않고 폰트사이즈도 기본값이다.
    • normalize CSS는 다양한 브라우저들이 어느정도 범위 안에서 비슷한 스타일을 가지게 하기 위한 것이기 때문에 모든 스타일을 초기화하지는 않는다.
    • normalize는 기존에 있는 부분을 이용하며, 특정 브라우저에서만 작동하는 버그나 스타일을 손본다.

느낀 점

  • 최적화와 성능개선의 다양한 방법들을 열심히 익히자.