본문 바로가기

프론트엔드/CSS 심화11

CSS의 postion 속성과 단위 종류 최종 수정: 2025.05.21postion 속성과 단위 종류CSS의 postion 속성은 요소가 문서 흐름에서 어떻게 배치될지를 결정한다.CSS에서는 다양한 단위를 사용하여 요소의 크기, 여백, 위치 등을 지정할 수 있다. 반응형 웹 디자인과 접근성 있는 사이트 구축에 중요한 내용이다.■ position 속성1. static일반적인 문서 흐름에 따라 요소 배치top, right, bottom, left, z-index 속성이 적용되지 않음 2. relativestatic 일때를 기준으로 상대적으로 배치된다.top,right, bottom, left 속성으로 원래 위치에서 얼마나 떨어질지 지정한다.요소가 차지하던 원래 공간은 그대로 유지된다.따라서, 다른 요소의 배치에 영향을 주지 않는다. 3. abso.. 2025. 5. 21.
CSS Box Model 최종 수정: 2025.05.21CSS Box Model웹 페이지의 모든 HTML 요소가 사각형 박스로 표현되는 개념으로, 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)의 네 부분으로 구성된다. 콘텐츠(Content) - 텍스트, 이미지 등 실제 내용이 표시되는 영역패딩(Padding) - 콘텐츠와 테두리 사이의 공간테두리(Border) - 패딩 주변을 감싸는 선마진(Margin) - 요소의 가장 바깥쪽 영역으로 다른 요소와의 간격을 제공■ padding과 margin의 차이점padding요소의 내부 여백으로, 콘텐츠와 테두리 사이의 공간배경색이나 배경 이미지가 패딩 영역까지 적용된다.요소의 크기에 영향을 준다. (기본 box-sizing: content-box.. 2025. 5. 21.
CSS의 의미와 역할 최종 수정: 2025.05.21CSS의 의미와 역할■ CSS (Cascading Style Sheets)웹 페이지의 시각적 표현을 담당하는 스타일 시트 언어이다. HTML이 웹 페이지의 구조와 내용 정의한다면, CSS는 그 구조에 스타일, 레이아웃, 디자인을 적용한다. 주요 역할웹 페이지 요소의 색상, 폰트, 크기 등 시각적 속성을 제어한다.레이아웃 구성 및 배치 조정반응형 디자인 구현으로 다양한 화면 크기에 대응애니메이션 및 시각적 효과 추가HTML과 디자인을 분리하여 유지보수성 향상일관된 스타일 적용으로 사이트 전체의 디자인 통일성 제공■ 계단식 (Cascading)여러 스타일 규칙이 충돌할 때 우선적으로 무엇이 적용될지 결정하는 우선순위 체계를 의미한다.cf) 동일한 우선순위일 경우, CSS에서 나.. 2025. 5. 21.
각 스타일 방식에 따른 캐싱 여부와 HTTP 요청 / TailwindCSS의 스타일 방식 최종 수정: 2025.05.21Q1. 인라인 스타일과 내부 스타일시트의 '캐싱 불가능'브라우저는 일반적으로 외부 리소스(CSS, JavaScript, 이미지 파일 등)를 별도로 캐시한다.HTML 문서 자체는 동적 콘텐츠로 간주되어 기본적으로 매번 새로 요청되거나 보수적으로 캐싱된다. 인라인 스타일의 경우스타일이 HTML 요소에 직접 포함되어 있어 HTML과 분리할 수 없다.따라서, HTML 문서를 다운로드할 때마다 이 스타일 정보도 함께 다운로드 된다. 즉, 동일한 스타일이 여러 페이지에서 사용되더라도 매번 다운로드 되는 것이다. 내부 스타일시트의 경우HTML 문서 내에 포함되므로 HTML과 함께 매번 다운로드된다.다른 페이지에서 같은 스타일을 사용해도 각 페이지마다 중복 다운로드된다.HTML이 수정되면.. 2025. 5. 21.
Stylelint 최종 수정 : 2024-05-25StylelintCSS를 위한 린터https://stylelint.io/ Home | Stylelintnpm versionstylelint.io 일반적인 CSS문법이 아니라 SCSS 같은 프리프로세서 문법, Styled-Components 같은 CSS-in-JS 라이브러리에서도 Stylelint를 위한 플러그인을 만들어서 제공하기도 한다. https://www.npmjs.com/package/stylelint-config-standard-scss stylelint-config-standard-scssThe standard shareable SCSS config for Stylelint. Latest version: 13.1.0, last published: 2 months.. 2024. 5. 25.

티스토리툴바