- css media query
- css 선택자 우선순위와 cascading
📱 CSS media query
속성 이름때문에 헷갈릴 수 있으니 기준점을 잘 기억해두록 하자.
- `max-width: 000px`은 000px 이하일 때를 의미하며, 가장 큰 화면부터 제작하자.
- `min-width: 000px`은 000px 이상일 때를 의미하며, 가장 작은 화면 사이즈부터 제작하자.
예를 들어 500px을 기준으로 Mobile 환경에서는 mobile 글자만 보이고, PC 환경에서는 PC라는 글자만 보이도록 만들고 싶다면,
<body>
<div class="outer">
<div class="inner">
<h1>Hello world</h1>
<i class="fa-solid fa-bars burger"></i>
</div>
</div>
<p class="mobile">mobile</p>
<p class="pc">pc</p>
</body>
CSS media query를 쓰면된다. screen and는 생략 가능함.
500px 이하에서 pc라는 글자가 안 보이도록 하기 위해서 `max-width: 500px`로 기준점을 정했다.
@media screen and (max-width: 500px) {
.pc {
display: none;
}
.mobile {
display: block;
}
}
🍯 CSS의 선택자 우선순위와 Cascading
CSS 선택자를 여러 개 결합해서 사용할 경우 우선 순위가 높아진다. Cascading 규칙에 따라 동일한 요소에 여러 스타일 규칙이 적용되더라도, 더 구체적인 선택자가 우선적으로 적용된다.
아래 코드에서는 .outer > .inner > h1이라는 후손 선택자가 일반적인 h1 선택자보다 우선 순위가 높기 때문에, 위에 있는 스타일이 적용된다.
.outer > .inner > h1 {
font-size: 32px;
color: red;
}
h1 {
font-size: 16px;
color: blue;
}'Today I Learned > SeSAC 웹 2기' 카테고리의 다른 글
| Node.js 입문, Express 모듈 서버 만들기 | 4주차(2) (0) | 2024.11.21 |
|---|---|
| JS part2, 서버, AWS EC2 | 4주차(1) (1) | 2024.11.19 |
| [새싹x코딩온] jQuery와 vanillaJS 비교해보기 (0) | 2024.11.16 |
| [새싹x코딩온] JS 유효성 검사 (value === '') 과 (!value)는 같은 의미일까? (1) | 2024.11.12 |
| [새싹x코딩온] JavaScript DOM과 DOM API (1) | 2024.11.08 |
