02.section- unit3 [css기초] (작성중)
*코드스테이츠 부트캠프를 수강하며 회고하는 3번째 시간입니다.
오늘을 되돌아보며.
같이 일했던 동료의 동생이 갑작스럽게 고인이 되고 동료 대신 일한지 3일째다. 공부와 일을 병행하다보니 처음에는 골골대며 공부했는 데 이제는 곧 잘 적응한 느낌이다. ot 때 말대로 체력이 받쳐주지 않으면 더 인내할 수 없고 더 쉽게 포기할 수 있는게 요새 몸소 뼈져리게 느끼는 중이다.
스터디중 나도 모르게 잘못된 커뮤니케이션을 하면 어쩌지 걱정도 되지만
이미 공부한 내용들이였지만 모르는 내용이나 정확히 이해되지 않은 부분이 계속 나온다. 이게 당연한걸 알지만 끝이 없다고 생각하니 나중에 모르는 부분의 내용을 공부할 때 얼마나 막막할지 감이 오지 않는다. 따쉬. 그래도 미래에 대한 걱정은 앞서 하지 말자 했으니 오늘 모르는 부분을 확인하고 그 부분을 정확히 알고 끝내면 되는 것이다!
멘토님이 알려주신 대로
- 목표를 정확히 설정해 적극적으로 스터디에 임하기!
- 리더쉽이 있는 다른 팀원분들에게 역할을 분배하기!
처음 부터 완벽한 건 없다. 부딪치고 반성하고 고치면서 더 나은 사람이 되기위해 노력한다면 내일은 더 나은 사람이 되어 있겠지!
몰랐던 부분.
1.css 상대 단위
상대 단위
- em
- rem
- %
- vw
- vh
절대 단위 px pt cm in
- in inches, 인치 (1in = 96px = 2.54cm)
- pt points, 포인트 (1pt = 1/72 of 1in)
? ** 단위의 몇가지 특징
- 숫자와 단위 사이에는 공백을 쓸 수 없습니다.
- 0은 단위 생략이 가능합니다.
- 일부 CSS 속성의 경우 음수 길이가 허용됩니다. ?
https://ossam5.tistory.com/310
em rem
공통점 | 차이점 | |
em | CCS의 font-size 속성 값에 비례해 결정 | 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준 |
rem | r은 root, 즉 최상위 요소를font-size 속성 값 의미합니다. HTML에서 최상위 요소는 <html> 입니다. 따라서 rem 경우, html 요소의 font-size 속성 값이 기준 |
많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있습니다.
원본:https://www.daleseo.com/css-em-rem/
2. fallback 글꼴
<p></p> 태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰입니다. 띄어써짐
시멘틱한 태그이다.
<div></div> 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰입니다. 시멘틱하지 않습니다.
다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓰입니다.
<section> 태그는 HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다.
<section> 요소는 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다.
원본:http://www.tcpschool.com/html-tags/section
3. text-align
ol : 순서 있는 목록 태그ul : 순서 없는 목록 태그
h2에 있는 내용 글씨안은 inline 인가
block 요소 태그종류 inline 태그 종류
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
1. block 요소에만 text-align 속성을 적용할 수 있다
2. 정렬되는 것은 block 요소안에 있는 lnline 요소만 가능함.
https://server-talk.tistory.com/265
4. & : 선택자
ol : 순서 있는 목록 태그ul : 순서 없는 목록 태그
h2에 있는 내용 글씨안은 inline 인가
block 요소 태그종류 inline 태그 종류
5. display: table-cell
ol : 순서 있는 목록 태그ul : 순서 없는 목록 태그
h2에 있는 내용 글씨안은 inline 인가
block 요소 태그종류 inline 태그 종류
6. attribute 셀렉터
7. :active 와 : focus
https://developer.mozilla.org/ko/docs/Web/CSS/:active
https://developer.mozilla.org/ko/docs/Web/CSS/:focus
7. ::first-child 와 :first-of-type
, :firt-of-type 은 실제 p 엘리먼트만을 기준으로 카운트를 하기 때문에 선택할 수 있는 것
7. :정합성 확인 셀렉터
8. 박스 크기
ㅇ앗! 너무 아쉽다! box-sizing border box 를 못봤다! 다음 테스트 목표는 만점 도전이다!
지켜야하는 부분. (칭찬일기)
-12시에는 못잤지만 8시기상을 지킨 것.! -> 취침시간 8시간을 지키자!
-아침밥을 먹은 것. -> 편의점 김밥이나 라면보다 좀더 건강한 음식을 먹어보자!
-블로그를 작성한 것. -> 아주 잘하고 있다!
아주 칭찬해!
확인해야 하는 부분.(복습)
이해도 자가 점검 리스트
Chapter1. CSS 기초
- CSS의 사용 목적을 이해한다.
- CSS의 기본 문법과 구조를 이해한다.
- CSS를 HTML에 적용하는 방법에 대해서 이해한다.
- HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
- CSS를 이용해 텍스트를 꾸밀 수 있다.
- CSS에서 쓰이는 단위를 기억하고, 각 단위가 적합한 경우를 구분할 수 있다.
- MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
Chapter2. 박스모델
- CSS 박스 모델을 이해할 수 있다.
- 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.
- margin, border, padding, content
- 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.
Chapter3. CSS selector
- 다양한 CSS selector 규칙을 이해한다.
- 후손 selector와 자식 selector의 차이를 이해한다.
- 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.
자기주도적 학습 가이드
이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.
- 오늘 학습이 어려웠다면(0~8개)
- 개념학습 다시 보기
- 이해되지 않는 개념 아고라스테이츠에 질문하기
- 오늘 학습이 수월했다면(9~11개)
- 다양한 CSS selector에 대해 블로깅 하기
- 이해되지 않은 개념은 검색을 통해 자기주도적 학습 후 블로그에 정리하기
- 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기
- 추가적인 학습을 하고 싶다면(12~13개)
- 개발자 도구의 Element 탭을 이용하여 자주 가는 웹 사이트의 CSS 속성을 변경해 보세요.
- 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기