💻 학습내용

오늘도 계속해서 키즈가오 사이트 만들기 실습을 했다

position: relative;
right 0; , bottom 0;

position: relative 설정된 공간안에서
오른쪽 하단 끝에 배치하겠다는 의미

bottom: initial; 

bottom 값을 적용하지 않은 초기상태로 돌린다는 뜻

position 값을 설정하기 어렵다고 느끼는 지금
큰 공간을 만들 때 position을 relative로 설정하자!
일종의 안전장치라고 생각하면 된다

왼쪽 중앙 오른쪽 위치를 설정하는 float을 사용했을 때
footer(하단 부분)가 float 설정 구역 뒷쪽에 배치됐던 현상
이러한 현상을 해결하기 위해
float을 마지막으로 사용한 지점 그 바로 다음에
clear: both;를 적어서 float의 기능을 꺼줘야 한다

margin-top: -nn;
nn값만큼 윗쪽으로 끌어올리겠다는 의미

Block | Inline

block / inline
Block 면(영역) / Inline 선(흐름)
Inline-block
Block의 좋은점과 Inline의 좋은점을 가지고 있음. 
inline에 block의 기능을 탑재
특징: inline처럼 흐르지만 width, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom가 사용가능.
button 태그는 inline-block요소의 성격을 갖고 있음
버튼을 연속적으로 기입했을 때 x축으로 정렬한다.

id or class 명을 지정할 때 규칙성을 가지고 작성하자
예를 들어 class="bbbwrap"이라고 했으면 쭉 class="cccwrap" 이라고 작성할 것

📝 마무리

오늘로써 키즈가오 사이트 실습하는 수업이 끝이 났다.
이번 주 내내 키즈가오 사이트 실습을 하면서 오늘이 제일 오류가 적게 나는 하루였다.
velog에 오류를 냈던 부분들을 작성하면서 계속 조심해서 그런지
오늘은 수정하는 코드가 많지 않아서 너무 뿌듯하고 기분이 좋았다.
또한 position에서 relative와 absolute를 반복하면서 사용하다 보니 position에 대한 개념이 좀 더 확실해졌다.
3차원 position끼리는 공간이 겹칠 수 있다는 것을 한 번더 복기 할 수 있는 좋은 기회였다.
아직까지 공간의 위치를 조정하는 것이 두렵게는 느껴진다.
하지만 그것도 계속해서 하다보면 감이 잡힐 것이라고 생각한다. 두렵다고 느끼기 보다는 앞으로 배워나갈 부분이라고 생각하고 그것을 다 배운 나를 상상하며 남은 수업도 열심히 참여를 해야겠다.