TIL 6일차 CSS / 계산기
시작
2주차가 됐다. 월요일에 다시 일과를 시작하려고 하니 어쩐지 어색한 느낌이 드는데 완전히 적응하려면 조금 더 걸릴 것 같다. 주말은 평범하게 보냈다. 하루 정도는 무조건 공부 내용을 정리하려고 했고 나머지 하루는 편하게 쉬었다. 아직까지는 페이스가 적당해 보인다.
CSS 기초
- CSS의 사용목적을 이해할 수 있다.
- 프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.
- CSS의 기본 문법과 구조를 이해할 수 있다.
- CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
- 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
- id 및 class와 관련된 selector 규칙을 이해할 수 있다.
- CSS를 이용해 텍스트를 꾸밀 수 있다
- CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
- 각 단위가 적합한 경우를 구분할 수 있다.
- CSS 박스 모델을 이해할 수 있다
- box model
- width, height
- margin, padding, border
- 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
- MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
- 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
- 각 단위가 적합한 경우를 구분할 수 있다.
- box model
- width, height
- margin, padding, border
- 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
CSS는 단순하면서 어렵다. 배우기는 쉽고 마스터하기는 어려운 느낌. 선택자와 관련된 부분은 실습을 하면서 감을 살렸다.
CSS 단위
em, rem
EM : 부모의 폰트 사이즈에 비례
REM(Root EM) : Body의 폰트 사이즈에 비례
vh, vw, vmin, vmax
VW(Viewport Width) : 뷰포트 너비의 1% 길이와 동일합니다.
VH(Viewport Height) : 뷰포트 높이의 1% 길이와 동일합니다.
VMIN(Viewport Minimum) : 뷰포트 너비 또는 높이를 기준으로 하는 최소 값입니다.
VMAX(Viewport Maximum) : 뷰포트 너비 또는 높이를 기준으로 하는 최대 값입니다.
CSS 선택자
ID가 할당된 태그는 고유한 이름이고 하나의 태그에만 지정할 수 있다.
Class는 같은 Class 이름을 여러 태그에 할당할 수 있다.
Class는 어떤 분류 안에 포함된 요소의 특성을 정의할 때 사용하고 ID는 유일한 특성을 정의한다.
스타일 적용 순위
ID -> Class -> 요소
범위가 좁을수록 우선순위가 높다.
만약 우선순위가 같은 스타일 시트가 적용되면 더 좁은 범위의 정책이 우선된다.
// 가장 위가 우선순위가 높음
<style>
h1#hz {color:gray;}
#hz {color:magenta;}
h1.hz {color:green;}
.hz {color:red;}
h1 {color:blue;}
body {color:tomato;}
</style>
<h1 id='hz' class="hz">홈짱닷컴 Homzzang.com</h1>
선택자를 공부하다보니 가벼운 게임으로 배울 수 있는 사이트를 찾았다. 잘 안쓰는 옵션도 있었지만 한바퀴 도니까 선택자를 더 잘 이해하게 됐다.
https://flukeout.github.io/#
CSS 박스 모델
CSS 참고 URL
https://webclub.tistory.com/356
https://homzzang.com/b/css-4
https://homzzang.com/b/css-5
스프린트 계산기
코드스테이츠의 장점은 영양가있는 과제들을 내주는데에 있는 것 같다. 이번 과제가 딱 적당히 어려우면서 코딩능력을 살살 깨워주는 아주 좋은 과제라고 생각한다. 일단 기본 과제는 하루만에 끝냈고 내일 하루종일 시간이 주어지니 추가목표랑 NightMare 과제까지 끝내보고 싶다.
Author And Source
이 문제에 관하여(TIL 6일차 CSS / 계산기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@shleecloud/TIL-6일차-CSS계산기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)