[테킷 1206] CSS box model

👩‍💻 아침 자습:: CSS

Block level elements(블록 요소)

Position property

1. static: the default value (it does not need to be specified)

2. relative: to position an element relative to its default static position on the web page

3. absolute:When an element's position is set to abosolute, all other elements on the page will ignore the element and act like it is not present on the page.

4. fixed: We can fix an element to a specific position on the page (regardless of user scrolling) by setting its position to fixed

 

 

👩‍🎤 수업시작

1. 숙제 풀이

- 피드백: margin으로 충분히 해결 가능한 것을 새로운 개념(display)로 해결하려 했다. 기존의 개념을 잘 이해하고 있는 것이 중요하다.)

- html: 콘텐츠 자체보다 레이아웃, 덩어리 구조(기본 뼈대)를 제대로 잡고 출발, 최소한의 마크업 html로부터 시작할 필요가 있다.

- 내가 작성하지 않은 결과가 있으면 관심을 가질것 (body{margin: 0;})

왜? 사용자 에이전트 스타일시트(브라우저가 제공하는 기본값, 즉 브라우저 만든 양반들이 태그에 타입을 기준으로 정해놓은 기본값)에 영향을 받아 예상과 다르게 조정되어 있는 경우가 있기 때문

auto: 브라우저가 자동으로 계산하는 값: 직계 부모가 제공해주는 콘텐츠 영역(containing block)의 너비 즉 부모의 너비 만큼 가득 차게 자동(auto)으로 계산해서 적용해준다.

 

font-size: inherit;

Inherit(상속)

inherit 하는 이유? 브라우저 개발자들이 정해놓은 것에서 상속을 받겠다는 느낌.

2. 새로운 개념 (inline)

코딩 works 참조

margin: 0 auto 40px;

상 우 하 좌

display - inline(CATCAT 글자 수에 맞춰 변경)

 

3. 꿀팁

!Doctype html : 직접 치는 것을 권장.머릿 속에 들어와야 더 가치있는 내용을 고민할 수 있는 여유가 생기기 때문. VS코드에만 의존하지 않기를.

의도를 가지고 코드를 작성해야 한다.

 

최종 결과물

https://65708c94ac6454007029959a--gleeful-taiyaki-8bfb20.netlify.app/

개인적으로 빨간색을 배경으로 까는 걸 좋아하지 않는데, 폰트 색상을 베이지로 넣으니 잘 어울리게 나온 것 같다는 생각이 들었다. 폰트 자간 간격까지 발견했으면 더 좋았으련만, 그러진 못했고..

이 작업 중 인상 깊었던 건 역시 border-radius! 

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

border-radius: aa / bb

border-radius: 80px / 40px ;