HTML&CSS

⚒HTML, CSS 정리한 개인블로그 📍가상클래스 가상요소 가상 클래스 클래스가 없음에도 마치 클래스를 만들어 지정해놓은 것처럼 선택자로 선택하고 CSS 디자인을 꾸밈. 선택자 : 가상 클래스 {property: value;} 예) :link{...}

속성 선택자 + 상태 선택자 + 동위선택자

SCSS란? : css의 상위 집한 언어로서, 기본 css를 확장하여 스타일 시트 작성을 더 편리하고 유지보수가 용이하도록 해주는 스타일링 언어

pc : 1024px ~태블릿 가로, 태블릿 세로 : 768px ~ 1023px모바일 가로, 모바일 세로 : ~ 768px

내가 계속 헷갈려서 정리하는 시맨틱 태그.. 이제 그만 찾아보자.. `` 사이트의 머릿말 부분 나타낼때 사용 `` 제목과 부제목을 묶어서 나타내는 요소 `` 웹 페이지 메뉴만들 때 사용 `` 해당 문서의 ``요소의 주 콘텐츠를 정의할 때 사용 (해당 문서의 중심

CSS에서 요소의 크기를 어떻게 계산할지를 결정하는 속성width와 height는 요소의 실제 콘텐츠 크기만을 나타내고 그 안에 추가되는 padding과 border는 크기에 포함되지 않음width와 height, padding, border를 모두 포함하는 크기를 나

✅ transform은 composition 단계에서 실행되기 때문에 reflow나 repaint를 유발하지 않기 때문에 성능에 좋음🚫 position은 top, left 등의 속성을 변경하면 브라우저는 주변 요소들의 위치를 다시 계산하는 과정부터 수행하게 되므로

가상의 z축을 상정하여 HTML요소들을 3차원으로 개념화한 것으로 요소들이 쌓이는 순서에 영향을 미친다.기본적으로 HTML 요소는 DOM 순서에 따라 쌓인다. HTML 상에서 위쪽에 위치 할수록 아래쪽에 쌓이는 방식position 속성이 적용되어 있는 요소들은 z-in

<link> 는 외부 리소스와의 연결을 돕는 요소이며, rel 속성 값인 preconnect, preload, prefetch는 리소스 로드의 우선수위를 설정하여 로드 성능을 최적화하기 위해 사용됩니다.목적 : 브라우저가 외부 도메인과의 연결을 미리 설정하여 네트

<a>를 이용해 외부 링크를 연결할 때는 rel 속성을 설정하여 중요 정보가 유출되지 않도록 해야함외부 페이지에서 window.opener 객체에 접근하지 못하도록 방지(→ 기본적으로 target=”\_black”가 설정된 <a>를 통해 열린 외부 사이트에서

sr-only(Screen Reader Only) 화면에는 보이지 않지만 스크린리더에서는 읽을 수 있도록 하는 css클래스로, 주로 웹 접근성을 높이기 위해 사용됩니다. formControl 컴포넌트를 사용하면서 라벨을 숨기고 버튼을 눌렀을 때도 radio 버튼이 선

웹 개발에서는 브라우저마다 제공하는 기본 스타일이 다르기 때문에 이를 통일하여 일관된 디자인을 구현하는 것이 중요합니다. 이를 위해 Reset CSS와 Normalize CSS가 사용됩니다. Reset CSS 모든 브라우저의 기본 스타일을 완전히 제거하는 방식 ✅

네트워크 문제로 이미지가 로드되지 않는 경우 같이 이미지를 로드할 수 없는 상황에서 대체 텍스트를 제공하여 사용자에게 콘텐츠를 이해할 수 있도록 돕는 역할스크린 리더를 사용하는 시각 장애 사용자에게 alt 속성을 통해 이미지의 내용을 음성으로 전달되므로 접근성 측면에서

CSS vs. CSS 전처리기 vs. Zero Runtime CSS vs. CSS-in-JS | 구분 | 순수 CSS | CSS 전처리기 (Sass, Less 등) | CSS-in-JS (Styled-Components 등) | Zero Runtime CSS (Linaria, Vanilla Extract 등) | | --- | --- | --- | ---...

vh(Viewport Height)는 브라우저의 뷰포트 높이를 기준으로 설정되지만, 모바일 환경에서는 주소창이나 네비게이션 바의 유무에 따라 동적으로 변할 수 있어 정확한 높이를 계산하기 어렵고, 레이아웃이 의도치 않게 깨지는 현상 발생할 수 있음⇒ 이를 해결하기 위해