티스토리 뷰

css

업무에 바로쓰는 html5 1일차

코딩하는 둥아 2023. 12. 4. 16:37
728x90

단축키 / vsCode 단축키

Window + Tab: 새로운 데스크톱 생성 가능

Window + Ctrl + 방향키: 여러개 데스크톱 이동 가능

 

Ctrl+Shift+P: 커맨드창

Ctrl+Shift+P => wrap => 선택한 영역 wrapping

=> 단축키 등록해서 쉽게 사용하자 Ctrl+Shift+W

// 각 요소가 ul 태그 밑에 li태그에 href="/" 값을 가진 태그로 wrapping됨
ul>li*>a[href="/"]

 

vsCode 확장 프로그램

git history

auto close tag

auto complete tag

auto rename tag

live server

vscode-icons

 

degit 라이브러리

깃 클론 편하게 해주는 라이브러리

모든 레포지토리가 아니라 일부 폴더만 골라서 클론받을 수 있음

HTML과 XHTML

<link/> -> XHTML

<link> -> HTML 4.01

HTML5는 두가지 방식 모두를 지원함

 

XHTML -> HTML를 XML방식으로 재정의하는 방식

HTML은 굉장히 느슨한 언어. (대소문자 구분 안함, 속성값 선택적, 닫힘 태그 생략 가능..)

이러한 문제를 해결하기 위해 XML로 재정의한 XHTML를 사용하게 됨

 

JSX 또한 XML 패턴을 따르기 때문에 같은 규칙을 사용하고 있음

리액트에서 마크업 또한 XML에 맞게 하는게 좋음!

 

HTML4.01, XHTML1.0과 HTML5의 차이점

  • 콘텐츠 모델
    • interactive, embedded, phrasing, metadata, heading, sectioning.... 
    • html 마크업에 문법 오류는 없는지 validation 해보기
    • html 업데이트 항목을 볼 수 있는 공식 페이지
 

HTML Standard

HTML Living Standard — Last Updated 30 November 2023

html.spec.whatwg.org

<a href="/">
	<div>블록 콘텐츠</div> // inline요소에 block요소가 들어감, html5 이전에는 불가능했음
<a/>

<a href="/">
	// interactive 요소 안에 두 개의 요소가 들어감. => 잘못된 마크업
	<div>블록 콘텐츠</div>
    <button>버튼</button>
<a/>

// 콘텐츠 모델 상 ul안에는 li요소만 포함 가능함, div 같은거 안됨

 

아웃라인 알고리즘

  • <section></section> 태그를 통해 명시적인 아웃라인을 지정할 수 있음.
    • 따로 지정하지 않으면 암묵적인 아웃라인이 생성됨. (h1과 같은 태그를 기준으로)
  • 아웃라인 계층을 지정하는 section, article 태그를 사용하지 않고 div를 사용하게 되면 아웃라인을 지정해주는 태그를 잘 사용해야 함 (h 태그)
  • 검색 최적화 관점에서도 중요한 설계 단계

 

DOCTYPE

<!DOCTYPE html> // 문서타입, 현재 문서가 HTML5 타입이라는 의미
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> // html:4t => html4.1 버전
// Transitional 과도기 Strict 엄격
  • DOCTYPE을 기입하지 않으면 호환 모드로 렌더링 됨 (비표준)
    • 표준 비표준에 따라 적용 가능한 스크립트가 달라짐
    • 비표준: document.id
  • HTML5는 살아있는 표준이기 때문에 변경 사항이 자동으로 적용됨
  • DOCTYPE위에 script를 삽입하면 표준이 아니라 호환 모드로 작동하게 됨. => 금지!

 

접근성(accessibility)

  • 모두(장애, 비장애)를 위한 접근성
  • language
    • <html lang="">
    • 보이스 오버 기능: html 태그의 언어에 맞게 음성지원을 함
    • 영어의 경우 span 태그를 감싸고 lang 속성을 설정해주기
  • title
    • 각 페이지의 제목은 unique하게 설정해줘야 함
      • 홈 - 이디야 커피, 로그인 - 이디야 커피
    • 특수 문자(장식성 문자) 제거
      • 스크린 리더의 경우 특수 문자를 다 읽어줌
  • meta
    • vscode에서 기본 언어 속성과 기본 html 버전을 설정해 줄 수 있음 (emmet setting)
    • 한글이 등장하기 전에 meta 태그의 language를 설정해줘야 인코딩이 깨지지 않음
    • RWD 반응형 웹 작업할 때 들어가야 하는 meta tag
      • svg는 화면 해상도에 영향을 받지 않음
    • meta name="og:url, tpye, image.."
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • a tag와 함께 aria-labelledby 와 같이 접근성을 지킬 수 있는 태그들이 있음

 

폰트

https://noonnu.cc/index

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

Sun – SUIT

 

Sun

 

sun.fo

<!-- cdn 으로 폰트 사용, 해당 cdn 서버 죽으면 우리 서비스도 영향 받게 됨 -->
<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css"
/>

 

구조 설계

  • 3단
    • 머리말(네비게이션 포함 혹은 없는 경우) / 본문 / 바닥글
  • 4단
    • 머리글 / 네비게이션 / 본문 / 바닥글
  • 시맨틱 태그: header, nav, main, footer tag
    • 시맨틱 태그 사용하는거 중요함!
    • 적어도 a, button 태그는 사용하도록 하자
  • div tag에 클래스 이름으로 주기
    • role 속성을 주면 시맨틱 마크업과 동일한 역할을 할 수 있음
    • tabindex 속성을 주면 키보드로 접근할 수 있게 설정할 수 있음
  • click event: device dependency 이벤트이기 때문에 키보드로 이동해서 엔터키가 눌려도 click event가 발생하게 됨

 

디자인 패턴

  • 태그 명이 바뀔 수도 있으니 태그 선택자보다는 클래스 선택자로 스타일 적용하기
  • 클래스명을 들었을 때 용도가 짐작되도록 작명하기

 

로고 이미지

  • 배경으로 설정
    • 이미지 스프라이트를 사용해서 화면 크기에 따라 position만 바꿔서 적용
    • 성능 상 우월함
  • 이미지 태그
  • svg 태그
    • css로 색상 변경 가능
    • 서버에 이미지를 요청하지 않기 때문에 성능에서 우수함
    • 최신 트렌드: svg sprite 방식
  • picture + source tag
    • device에 따라 가장 최적화 된 이미지를 렌더링 함
  • 네이밍 규칙
    • BEM 규칙: 재사용 가능한 css를 설계하기 위한 네이밍 패턴
    • logo__link : 로고 영역 내의 링크라는 의미를 내포함
    • sass를 사용하는 경우 리액트에서 사용하면 좋지만, 아닌 경우엔 안티 패턴임
    • logo__link--primary, logo__link--secondary: -- 뒤에 상태 값을 넣어줌

BEM — Introduction (getbem.com)

 

BEM — Introduction

Introduction On smaller brochure sites, how you organize your styles isn’t usually a big concern. You get in there, write some CSS, or maybe even some SASS. You compile it all into a single stylesheet with SASS’s production settings, and then you aggre

getbem.com

 

728x90
저작자표시

'css' 카테고리의 다른 글

업무에 바로쓰는 html5 2일차  (0) 2023.12.05
css - 한 쪽 모서리가 접힌 모양 만들기  (0) 2021.01.16
flexbox 정리  (0) 2021.01.06
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함