[CSS Battle로 CSS 공부] 01. 학습 전략, #1 Simply Square, vh, vw, vmin, vmax

기록용 포스팅이기에 간결히 적습니다.

하지만 질문 및 지적은 환영합니다.

---

 

CSS Battle을 통해 CSS를 학습한 내용을 다룹니다.
HTML, CSS 기초 보강프로젝트!

 

학습전략

1. 코딩 자율학습 HTML+CSS+자바스크립트 책 정리, CSS Battle 병행
   Q: 굳이 처음 시작하는 것도 아닌데 책 붙잡고 공부할 필요가 있을까?
   A: 모르는 내용만 정리하며 빠르게 훑을 예정입니다.
   Q: CSS Battle은 일반적인 웹 레이아웃과 거리가 먼데 학습 효과 있을까?
   A: 메인이 아니고 보조 수단으로 사용할 예정입니다. 책을 읽으며 클론 코딩이나 토이 프로젝트를 병행하기는 부담스럽습니다. 실제 웹 사이트나 애플리케이션의 레이아웃과는 거리가 멀지만, 책 읽는 동안에 배운 걸 간단하게나마 써볼 수 있다는 장점이 있습니다. 또한 단순히 풀기만 하는 게 아니고 코딩 테스트 공부하듯이 모범 답안을 찾아가며 공부하면 많은 걸 배울 수 있을 거로 생각합니다.
2. 레이아웃 클론 코딩
   이미지 넣는 등의 부수적인 작업을 모두 생략하고 진행할 예정입니다. 실제 상용 서비스 레이아웃을 따라 할 예정입니다.
3. HTML+CSS만으로 토이 프로젝트 진행
   처음 웹 개발 시작하면서부터 CSS 잘 안 써왔습니다. CSS 프레임워크인 Tailwind나 Bootstrap, 코드에서 스타일을 정의하여 쓸 수 있는 Styled Component 등 CSS 파일에 직접 정의하지 않고도 HTML에 스타일을 적용할 수 있는 많은 방법이 있습니다. 하지만 한 번쯤 HTML+CSS만으로 프로젝트를 진행하는 것도 나쁘지 않다고 생각합니다.

 

CSS Battle 정리

경쟁보다는 CSS 학습이 목적이므로 빈칸을 줄이는 등 점수를 높이려는 시도는 하지 않습니다.

사이트 내에서 다른 사람 답안은 볼 수 없는 건가?

 

2022/08/01 #1 Simply Square

<div></div>
<style>
  body {
    background: #5d3a3a;
    margin: 0;
  }
  div {
    width: 200;
    height: 200;
    background: #b5e0ba;
  }
</style>

CSS Battle #1 Simply Square

모범 답안 분석

1. 마찬가지로 body, div 썼지만, width, height를 상댓값으로 넣었습니다.

width: calc(100vw / 2);
height: calc(100vh * 2 / 3);

vh는 viewport height, vw는 viewport width를 의미합니다.

각각 실행 중인 스크린 크기의 높이와 너비의 상대값의 단위이며, 100vw는 스크린 폭의 100%를 의미합니다.

% 값과의 차이는 크게 두 가지입니다.

첫째, % 값의 비교 대상은 고정되어 있다.

width:100vw <-> width: 100% (완전 같지는 않음)

width:100vh 는 % 값으로 표현 불가합니다. 

 

둘째, 비교 대상이 다릅니다.

vh, vw는 스크롤바를 포함한 브라우저 화면 전체 길이가 대상입니다.

% 는 쓰고 있는 요소의 부모 요소 길이에 맞게 반환합니다.

 

vmin는 viewport 길이 중 더 짧은 길이를 기준으로 삼으며 vmax는 viewport 길이 중 더 긴 길이를 기준으로 삼습니다.

 

2. body 안 쓰고 div로 해결

<div></div>
<style>
  div {
    margin: -8px;
    width: 200px;
    height: 200px;
    background: #b5e0ba;
    border-right: 200px solid #5d3a3a;
    border-bottom: 200px solid #5d3a3a;
  }
</style>

 

3. 마찬가지로 div만 썼지만 배경색을 border-right, border-bottom 대신 box-shadow로 해결.

box-shadow: 0 0 0 200px #5d3a3a;

 

모범 답안 참고 사이트

https://dev.to/pheeria/css-battle-1-simply-square-c19

CSS Battle #1 - Simply Square