본문 바로가기

CSS

 (3)
rem, em 사용법 rem 사용법- rem 단위는 루트 요소 ()의 글꼴 크기를 기준으로 한다.- 아래와 같이 사용하게 된다면 사용자가 브라우저 설정에서 글꼴 크기를 조정할 때 rem 단위를 사용하여 조절 가능/* 예시 */html { font-size: 100%; /* 보통 16px로 해석됨 */}body { font-size: 1rem; /* 16px */}h1 { font-size: 2rem; /* 32px */} em 사용법- em 단위는 요소의 부모 또는 자신에게 설정된 font-size를 기준으로 크기가 결정된다./* 예시 */.container { font-size: 1.5em; /* 부모 기준 */}.container p { font-size: 1em; /* .container의 f..
CSS Postion 속성 Postion 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.position 속성 값은 top, left, bottom, right가 있습니다. position: static- 속성을 별도로 지정해주지 않을 경우 기본값인 static이 적용- position 속성이 static인 요소 HTML 문서 상에 원래 있어야함.- 부모 요소 내에서 문서의 흐름에 따라 배치되며, top, right, bottom, left 속성을 사용할 수 없습니다.position: relative - 기본 위치에서 top, right, bottom, left 속성에 지정된 값만큼 이동position: absolute- 요소가 가장 가까운 위치 지정 조상 요소를 기준으로 top, right, bottom, left..
Cascading이란? CSS에서 C는 Cascading의 줄임말입니다.단어 뜻은 폭포처럼 흐른다르는 의미로, 말 그대로 위에서 아래로 적용되는 스타일 시트라는 의미입니다. Cascading이 중요한 이유는?html/css를 사용하다보면 한 태그에 여러 스타일이 겹치는 경우가 발생 -> 우선순위를 결정하여 해결하는데 이 과정을 Cascading입니다. Cascading의 스타일 우선순위 원칙1. 중요도(Importance): !important로 선언된 스타일 규칙은 다른 모든 규칙보다 우선순위가 높습니다.2. 명시도(Specificity): 구체적인 선택지가 높은 우선순위를 갖습니다. 예를 들어, ID 선택자가 클래스 선택자보다 높은 우선순위를 갖습니다.3. 코드 순서(Source Order): 동일한 특성 값과 특정성을 가..

티스토리툴바