button 태그
type
속성의 기본 값은 submit
<button>
may only contain Phrasing content.a태그
a, audio(controls 속성이 있는 경우), button, details, embed, iframe, img(usemap속성이 있는 경우), input(hidden 상태가 아닌 경우), keygen, label, menu(type속성값이 toolbar인 경우), object(usemap속성이 있는 경우), select, textarea, video(controls 속성이 있는 경우)
) 를 제외한 태그는 중첩 가능 <a><button></button></a>
형태가 동작은 가능 함button
a
cursor:pointer
hidden 속성
속성 선택자
~=?
rel
속성
<link>
, <a>
, <area>
, <form>
에서 유효 / 각 요소에따라 사용할 수 있는 속성값 다름<a>
의 rel
속성noopener
_self
, _top
, _parent
도 ₩_blank₩처럼 새 탭으로 열림target="_blank"
를 통해 새 탭을 열면 기존 탭의 참조를 반환하기 때문에 window.opener.location
사용해 기존 탭의 URL 변경 가능 (기존 탭과 똑같이 생긴 피싱 사이트로 기존 탭을 변경해 사용자의 개인정보 빼가는 시나리오 가능)target="_blank"
사용 시 rel="noopener"
추가해 window.opener
API의 악의적인 사용 방지 권장 (최신브라우저 자동 적용)window.opener
로 부모 윈도우 참조할 수 없게, 링크된 페이지와 부모 윈도우 별개의 프로세스로 취급되어 서로 퍼포먼스에 영향 Xnoreferrer
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: 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
키보드로만 이동할 때
https://velog.io/@gil0127/svg-vs-png-vs-jpg
svg
webp
svg vs webp
viewBox
svg로 원형로딩 애니메이션
: https://mong-blog.tistory.com/entry/svg%EA%B0%80-%EA%B7%B8%EB%A0%A4%EC%A7%80%EB%8A%94-%ED%9A%A8%EA%B3%BCwith-stroke-dasharray-stroke-dashoffset
width, height 값을 CSS에서 적용하는 법도 표준적이며 일반적으로 잘 동작하나, 일부 브라우저 또는 특정 상황에서는 width 및 height 속성을 사용하는 것이 더 안정적일 수 있음 (특히 외부에서 SVG를 불러오거나 처리할 때 크기가 정확하게 유지되기를 원할 때는 속성을 사용하는 것이 좋음)
언어별 폰트 지정 (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
pre, code, kbd, samp
코드가 출력되는 경우 가독성 때문에 monospace 형태의 폰트를 지정해주긴 함
페이지 레이아웃 관련 속성
/* 페이지 나눔을 피하고자 할 때 */
.print-no-page-break {
page-break-before: avoid;
page-break-after: avoid;
page-break-inside: avoid;
}
/* .avoid-page-break 요소 앞/뒤 페이지 나눔 피함
해당 요소가 페이지의 경계를 넘어가는 것을 방지, 요소를 잘림 없이 한 페이지에 표시 */
.avoid-page-break {
page-break-before: avoid;
page-break-after: avoid;
}
/* .example 클래스가 지정된 요소의 내부에서 페이지 나눔 동작을 브라우저에게 자동으로 결정하도록 함
브라우저는 콘텐츠와 페이지 인쇄 설정을 기반으로 요소 내부에서의 페이지 나눔 처리 */
.example {
page-break-inside: auto;
}
page-break-after
page-break-before
page-break-inside
Chrome 개발자도구 - 프린트 화면 확인
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 브라우저는 모니터 크기+해상도에 따라 권장 비율이 달라짐 (100%, 125%, 150% 등)
단순히 해상도만으로 정해지는건 아니고 EDID(디스플레이 정보)에서 반환하는 화면크기 정보와 조합해서 권장 배율이 달라집니다.