퍼블리싱

지니씨·2023년 3월 3일
CSScross browsingfonthtmlimagemarkupprint
0

프론트엔드

목록 보기
64/84
  • 마크업 언어란 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종
  • 전 세계적으로 통용되는 웹 문서는 HTML(Hyper Text Markup Language)이라는 마크업 언어를 활용하고 있다.
  • 국내에서는 HTML 마크업 개발자를 "퍼블리셔" 로 지칭하는 경우가 많음
  • 퍼블리싱은 웹 사이트를 제작할 때, 웹 디자이너가 디자인한 것을 웹 표준성과 접근성에 부합하도록 재정리하는 것

1. HTML

button 태그

  • type 속성의 기본 값은 submit
  • button 태그 안에 div 태그 사용?
    Per the HTML standard a <button> may only contain Phrasing content.
    A div element is not a valid element for Phrasing Content.
  • button 태그 안에 a 태그 사용 이슈?

a태그

  • a태그 안에 사용 가능한 태그?
    • https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5
    • 상호작용이 있는 요소 (a, audio(controls 속성이 있는 경우), button, details, embed, iframe, img(usemap속성이 있는 경우), input(hidden 상태가 아닌 경우), keygen, label, menu(type속성값이 toolbar인 경우), object(usemap속성이 있는 경우), select, textarea, video(controls 속성이 있는 경우)) 를 제외한 태그는 중첩 가능
    • a태그 안에 h1 태그 넣는것도 접근성 위반?
    • https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
    • 버튼이나 링크와 같은 대화형 콘텐츠가 없는 한 전체 paragraphs, list, tables, section 등 감쌀 수 있음
    • 사양에 맞지는 않지만 button이 form 안에 있지 않을 때, <a><button></button></a> 형태가 동작은 가능 함
      button과 a의 구분
  • 스크립트 작동 등 기능을 위해 사용하는 경우 : button
  • 페이지의 이동 또는 팝업 페이지 호출을 위해 사용하는 경우 : a
  • 둘 다는 아니지만 클릭 이벤트가 있는 영역임을 알려주기 위해 사용되는 경우 : CSS cursor:pointer

hidden 속성

속성 선택자

~=?

  • Since theme can have multiple names, it allows you to target a single theme inside the space-separated list. Visit MDN for more information.

rel속성

  • mdn
    : 현재 문서와 링크된 문서 사이의 연관 관계 명시
    : 검색엔진들이 링크에 대한 더 많은 정보 수집을 위해 사용할 수 있는 속성
    : href 속성이 설정되어 있어야만 사용 가능
    : <link>, <a>, <area>, <form> 에서 유효 / 각 요소에따라 사용할 수 있는 속성값 다름
    : 기본값 없음 / 속성값이 없는 경우, 둘 사이에 하이퍼 링크가 있는 것 외에는 특별한 관계가 없다고 판단
  • <a> 의 rel속성
    • alternate : 프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 나타냄.
    • author : 해당 문서의 저자에 대한 링크를 나타냄.
    • bookmark : 즐겨찾기(bookmarking)에 사용하는 고유 주소(Permanent URL)를 나타냄.
    • external : 링크된 문서가 현재 문서와 같은 사이트 내에 있지 않음을 나타냄.
    • help : 도움말 문서에 대한 링크를 나타냄.
    • license : 해당 문서의 저작권 정보에 대한 링크를 나타냄.
    • next : 연관된 문서들의 모음 중 다음 문서에 대한 링크를 나타냄.
    • nofollow : 유료 링크와 같이 검색 엔진이나 봇(bot) 등이 추적해서는 안 됨을 나타냄.
    • noreferrer : 사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP 리퍼러 헤더(referer header)를 전송해서는 안 됨을 나타냄.
    • noopener : 하이퍼링크를 따라 연결되는 어떠한 브라우징 컨텍스트(browsing context)도 오프너(opener)여서는 안 됨을 나타냄.
    • prev : 문서들 중에서 이전 문서를 나타냄.
    • search : 해당 문서를 위한 검색 도구를 나타냄.
    • tag : 현재 문서를 위한 키워드(tag)를 나타냄.
  • https://taedonn.tistory.com/32
  • noopener
    : window.opener가 기존 탭에 접근하는 걸 차단 (window.opener가 null 반환)
    : noopener를 사용하면 target = _self, _top, _parent도 ₩_blank₩처럼 새 탭으로 열림
    : target="_blank"를 통해 새 탭을 열면 기존 탭의 참조를 반환하기 때문에 window.opener.location 사용해 기존 탭의 URL 변경 가능 (기존 탭과 똑같이 생긴 피싱 사이트로 기존 탭을 변경해 사용자의 개인정보 빼가는 시나리오 가능)
    : MDN 에서도 target="_blank" 사용 시 rel="noopener" 추가해 window.opener API의 악의적인 사용 방지 권장 (최신브라우저 자동 적용)
    : 링크된 페이지에서 window.opener로 부모 윈도우 참조할 수 없게, 링크된 페이지와 부모 윈도우 별개의 프로세스로 취급되어 서로 퍼포먼스에 영향 X
  • noreferrer
    : 새 탭에서 기존 탭의 참조를 가져오는 걸 차단
    : 기존 탭에 대한 참조를 차단했기 때문에, noopener처럼 window.opener가 null 반환
    : 다른 페이지로 이동 시 링크를 건 페이지의 정보를 브라우저가 Referer HTTP 헤더로 송신 X
    : https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns

2. CSS

checkbox
checkbox에 사용되는 [-][v] 이미지는 브라우저 Agent 기본 디자인을 바꾸는 것임
네트워크 문제로 이미지가 노출되지 않는 상황에서도 보여야 하므로 data uri 방식으로 inline화
css로 그리는 방식은 버그 생길 수 있는 확률이 큼

bootstrap
: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")

인코딩 사이트 : https://yoksel.github.io/url-encoder/

resize
https://developer.mozilla.org/en-US/docs/Web/CSS/resize

letter-spacing
0과 normal의 렌더링 결과는 동일하나, user agent가 처리하는 방식이 다름
https://stackoverflow.com/questions/54980706/understanding-css-letter-spacing-is-it-valid-to-replace-the-default-value-of-no

flex

  • flex
    : flex-grow(Flex 아이템이 Flex 컨테이너 내에서 얼마나 더 많은 공간을 차지할 수 있는지를 결정, flex-grow 값이 1로 설정되면 해당 Flex 아이템은 가능한 모든 공간을 차지하려고 노력) / flex-shrink(Flex 아이템이 Flex 컨테이너 내에서 얼마나 축소할 수 있는지를 결정, 일반적으로 1로 설정되며 컨테이너가 축소되면 Flex 아이템도 같은 비율로 축소) / flex-basis(Flex 아이템의 초기 크기를 결정, auto로 설정되면 아이템의 크기를 기본 크기로 유지)
    : flex: 1 은 Flex 아이템이 가능한 모든 공간을 차지하려고 하며 크기를 유지하려고 노력, Flex 컨테이너 내에서 사용 가능한 공간을 아이템들 사이에 동등하게 분배하려고 함
    : flex: 0 1 auto은 Flex 아이템이 축소 가능하며 초기 크기를 유지하려고 함

scroll
불필요한 영역 노출 및 새로 고침 방지

body {
    overscroll-behavior-y: none;
}

모달 외 스크롤 발생 막음

.modal {
   overscroll-behavior-y: contain;
}

pointer-events
이벤트가 부여된 요소를 제어하기 위하여 여러가지 방법을 모색할 수 있다.
CSS 속성 중에서 강제로 이벤트를 제어 할 수 있는 방법 pointer-events 라는 속성을 사용할 수도 있다.
https://velog.io/@godud2604/CSS-CSS-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A0%9C%EC%96%B4-pointer-events

상대단위
em
해당 단위가 사용되고 있는 요소의 font-size 속성 값에 비례해서 결정되는 상대 단위
font-size가 html 요소부터 시작해 여러 상위 요소들을 거치면서 상속되기 때문에 계산 복잡, 재사용 어렵고 유지보수 힘들어짐

rem
최상위 요소(HTML에서는 html)의 font-size 속성 값에 비례해서 결정되는 상대 단위
em보다는 가급적 rem 사용

%
%를 쓰는 요소의 부모 요소를 기준으로 길이를 반환한다.

vw
화면 기준 너비
vw,vh는 화면의 전체 길이를 상대적으로 반환하기 때문에 스크롤바를 포함한 길이를 반환

vh
화면 기준 너비
vw,vh는 화면의 전체 길이를 상대적으로 반환하기 때문에 스크롤바를 포함한 길이를 반환

가상선택자
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

:hover

:active
크로스브라우징 확인 필요

:focus, :focus-within

:focus-visible
키보드로만 이동할 때

3. Image

파일 확장자

https://velog.io/@gil0127/svg-vs-png-vs-jpg

svg

  • https://a11y.gitbook.io/graphics-aria/svg-graphics
  • 벡터 그래픽(픽셀이 아닌 선과 곡선으로 구성된 이미지)
  • 단순하고 심플한 이미지에 주로 사용(단순한 이미지라면 상관없지만 이미지가 복잡하면 용량도 커지고 속도 저하를 일으킴)
  • 구버전 IE 지원 안함

webp

  • GIF, JPG, PNG 포맷을 대체하기 위해 개발됨
  • 장점
    : 이미지 품질이 같을 때 WebP 파일의 크기가 다른 포맷의 파일에 비해 훨씬 작음 (특히 GIF파일을 WebP 파일로 바꾸면 이미지 품질은 유지하면서 파일 크기는 절반 이하로 줄어듬)
  • 단점
    : 모든 브라우저가 WebP 지원하지 않음
    : 대체가 없으므로 브라우저에서 이미지를 표시할 수 없으면 이미지가 전혀 표시되지 않음

svg vs webp

  • 더 작은 파일 크기와 더 정확한 이미지가 필요한 경우 SVG가 적합
  • 더 빠른 로딩 시간과 더 작은 파일 크기를 위해 약간의 정확도를 희생해도(약간의 이미지 왜곡) 괜찮다면 WebP가 나을 수 있음

Data URIs

svg

4. Font

언어별 폰트 지정 (unicode-range)
https://velog.io/@zaixu/220707

Uni 코드범위 https://unicode.org/charts/

https://wit.nts-corp.com/2017/09/25/4903

baseline
https://wit.nts-corp.com/2017/09/25/4903

맑은 고딕 폰트여도 브라우저마다 표현하는 맑은 고딕이 다름

다이나믹 서브셋
https://github.com/orioncactus/pretendard#%EB%8B%A4%EC%9D%B4%EB%82%98%EB%AF%B9-%EC%84%9C%EB%B8%8C%EC%85%8B

가변 다이나믹 서브셋
https://github.com/orioncactus/pretendard#%EB%8B%A4%EC%9D%B4%EB%82%98%EB%AF%B9-%EC%84%9C%EB%B8%8C%EC%85%8B

pre, code, kbd, samp
코드가 출력되는 경우 가독성 때문에 monospace 형태의 폰트를 지정해주긴 함

5. 프린트

페이지 레이아웃 관련 속성

/* 페이지 나눔을 피하고자 할 때 */
.print-no-page-break {
  page-break-before: avoid;
  page-break-after: avoid;
  page-break-inside: avoid;
}
  • ex2.
/* .avoid-page-break 요소 앞/뒤 페이지 나눔 피함
해당 요소가 페이지의 경계를 넘어가는 것을 방지, 요소를 잘림 없이 한 페이지에 표시 */
.avoid-page-break {
  page-break-before: avoid;
  page-break-after: avoid;
}
  • ex3.
/* .example 클래스가 지정된 요소의 내부에서 페이지 나눔 동작을 브라우저에게 자동으로 결정하도록 함
브라우저는 콘텐츠와 페이지 인쇄 설정을 기반으로 요소 내부에서의 페이지 나눔 처리 */
.example {
  page-break-inside: auto;
}

page-break-after

  • auto, always, avoid, left, righ
  • 일반적으로 블록 수준 요소에 사용, 다음 페이지에서 해당 요소가 시작되도록 제어
  • 인쇄된 페이지에서 특정 요소 뒤에 페이지 나눔을 피하고 싶을 때 사용
  • https://developer.mozilla.org/en-US/docs/Web/CSS/break-after 로 대체

page-break-before

  • auto, always(해당 요소의 다음 페이지에서 새로운 페이지가 시작), avoid(해당 요소가 페이지의 경계를 넘어가는 것을 방지, 요소를 잘림 없이 한 페이지에 표시), left, right
  • 요소 앞에 페이지 나눔을 삽입할지 여부 지정
  • 페이지 위쪽에 해당 요소가 시작되도록 제어
  • 인쇄된 페이지에서 특정 요소 앞에 페이지 나눔을 피하고 싶을 때 사용
  • https://developer.mozilla.org/en-US/docs/Web/CSS/break-before 로 대체

page-break-inside

  • auto, avoid
  • 요소 내부에 페이지 나눔을 삽입할지 여부 지정
  • avoid 값은 요소 내부에서의 페이지 나눔 방지
  • 테이블의 행이나 컨테이너 요소 등에서 사용하여 페이지 인쇄 시에 잘리지 않도록 함
  • https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside 로 대체

Chrome 개발자도구 - 프린트 화면 확인

6. 크로스브라우징

IE

Windos 11 에서는 더이상 IE 11 지원 X
나머지 Windows dㅔ서도 2022년 6월 25일부터는 데스크탑 인터넷 익스플로러 11 지원 종료 예정
하지만 익스플로러에서만 구동되는 사이트와 기타 문제때문에 'Internet Explorer 11 모드(Edge용)'라는 기능으로 여전히 Windows 11에서 지원하고 있음

Windows 11 에서 IE 11 사용하는 방법 참고 : https://oldnew.tistory.com/693

https://www.theverge.com/2021/5/19/22443997/microsoft-internet-explorer-end-of-support-date

window 배율

window 브라우저는 모니터 크기+해상도에 따라 권장 비율이 달라짐 (100%, 125%, 150% 등)

단순히 해상도만으로 정해지는건 아니고 EDID(디스플레이 정보)에서 반환하는 화면크기 정보와 조합해서 권장 배율이 달라집니다.

https://www.reddit.com/r/Windows10/comments/6we5ys/how_does_windows_10_calculate_the_recommended_dpi/

profile
지니씨
하루 모아 평생 🧚🏻
이전 포스트

design system

다음 포스트

모듈

0개의 댓글