다시 시작하는 CSS😶
GitHub Desktop을 사용해 실습 내용 commit 해보면서 github 익히기💕
Media Query
반응형 웹(Responsive Web)을 만들기 위해 사용되는 CSS 선언
반응형 웹을 만들 때는 항상 모바일부터 시작한다!
먼저 작은 사이즈일 때의 화면으로 스타일을 선언하고, 점점 커지는 화면에 대응하여 스타일을 변화시킨다.
(Inspect - Toggle device toolbar에서 다른 사이즈에서 깨져 보이지 않도록 width값이 가장 작은 'iPhone 5/SE'로 설정하고 시작 <- 강사님 추천)
웹 브라우저를 데스크탑, 모바일, 태블릿 등 다양한 화면 크기의 기기를 통해 이용한다.
사용하는 기기 화면 사이즈에 맞게 웹사이트가 보여지도록 각각의 CSS 스타일 적용이 필요하다.
반응형 웹을 만들기 위해서는 (html에서) 'viewport meta' 와 (css에서) 'media query'가 반드시 선언되어야 한다.
점점 다양한 기기가 개발되고 많이 사용되고 있어 항상 반응형 웹에 대비하여 작성해주는 것이 좋다.(내생각!)
viewport meta 태그를 아래의 코드와 같이 선언해야 반응형 웹이 정상적으로 작동된다.
<!DOCYPE html>
<html>
<head>
// 웹페이지의 가로 사이즈를 사용자의 기기 화면 사이즈에 맞게 보여지다
<meta name="viewport" content="width=device-width" />
...
</head>
</html>media query문에는 웹사이트가 보여질 기기의 사이즈(px) 이상 또는 이하일 때, 각각의 경우에 따라 변화되는 코드를 작성한다.
키워드 '@media'와 최소/최대 가로길이 조건을 명시한다.
- □px이상일 때 (최소 사이즈: min-width)
- □px이하일 때 (최대 사이즈: max-width)
@media screen and (min-width: 768px) {
/* 조건에 맞는 경우일 때 적용되는 CSS 선언 */
}
/* min-width와 max-width 함께 작성 가능 */
@media screen and (min-width: 768px) and (max-width: 991px) {
.box {
background-color: yellow-green;
}
.box::after {
content: "ohio";
}
}.box {
width: 100%;
height: 100vh;
}≫ vw(viewport width): viewport 가로길이 기준
≫ vh(viewport height)
✨많이 사용되는 단위! 브라우저 세로길이에 따라 스타일을 달리 적용함
1vh = 브라우저 창 세로길이의 1%를 차지하는 영역
100vh = viewport 세로길이의 전체(100%)를 차지하는 영역
📓 참고
aside 태그는 페이지의 다른 컨텐츠들과 약간의 연관성을 갖고 있지만, 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의할 때 사용한다.
페이지의 본문 옆에 정보를 표시하거나 본문 이외의 내용을 표시 할 때 사용한다.
☪ 버튼을 button 태그 대신 anchor 태그로 markup한 이유?
🅰 해당 요소가 디자인 상으로 봤을 때 버튼이지만 실제로 하는 역할은 '다른 페이지로 이동하는 링크' 역할이기 때문이다. (button의 역할보다는 anchor의 역할을 수행한다고 판단)
이와 같이 정보 콘텐츠의 의미와 성격에 맞게 마크업하는 것이 가장 중요하다!
☪ .banner-title a 선택자와 .banner-title 선택자에 속성을 부여했을 때 동일한 결과값으로 나타나는 것처럼 보이는데 둘의 차이점은? (자주 헷갈리는 부분!🤨)
<aside class="banner">
<h1 class="banner-title">
<a href="#">🚗 8월 게스트 신청하기</a>
</h1>
</aside>
🅰 사고 과정 이해하기!
내가 하고자 하는 것 =>
노란색 배너 '전체' 영역을 클릭하면 다른 페이지로 이동하게 만들고 싶다 → 노란색 전체 영역이 anchor 태그가 되어야 한다.
그런데 anchor 태그 안에 있는 텍스트를 가운데 배치하고 싶다! → 여기서 중요한 것은, anchor 태그를 가운데 배치하고 싶은게 아니라 anchor 태그 안의 '텍스트'를 가운데 배치하고 싶다는 것이다.
anchor 태그 안에 있는 자식 요소인 텍스트의 '부모 요소'는 anchor 태그이므로 가운데 정렬을 위해 flex를 사용한다!
.banner-title에 flex를 적용하면 겉으로 보기엔 동일한 결과가 나올지 몰라도, 해당 글씨 영역만 클릭 가능하게 된다. 모바일의 경우 사용자 경험에 나쁘다.
그렇기 때문에 클릭 영역을 크게 만들도록 anchor 태그에게 flex를 한 것이다.
