멋사 프론트엔드스쿨 1기 - 4일차

나만의 캐릭터 '서지렁'

초딩 때 '지영'이라는 이름 때문에 '지렁이'라는 별명이 있었는데 나만의 캐릭터 만들기로 무엇을 할지 고민하다 생각났다. 뭔가 스토리텔링까지 머릿속에 그려졌다. 이거다 하고 코드를 짜려는데 생각보다 멘붕이었다. 수업은 열심히 들었는데 척척 만들어지지않았다. 남들이 만든 코드도 보고 수업시간에 했던 코드를 보며 어찌어찌 완성했다!! 너무 뿌듯했다. 오늘 수업이 조금 어렵게 느껴져서 우울했었는데 과제를 마치고 나니 너무 뿌듯했다. 개발자들이 이맛에 코딩하나 싶었다.

아 그리고, 어제 복습한다고 새벽 늦게 잠들어서 오늘 코피를 두번이나 쏟았는데.. 오늘 수업을 못 따라가는 것 같은 기분이 들어서 좀 슬펐다. 열심히 해도 이정도인가 싶어서..?? 모르는 내용을 여쭤보려고 질문을 적는데 내 자신이 답답해서 눈물이 났다ㅠㅠ 나 원래 이렇게 나약한 사람 아닌데..!!!! 진짜 눈물 없는 사람인데 그냥 감정적으로 좀 힘들었나보다..!!! 그래도 멘토님들과 수강생분들이 설명을 너무 잘해주셔서 진짜 감동..ㅜㅜ 정말 우리 멋프스 1기 사랑해요..♥

그래도 매일 수업에서 배운 내용 새벽까지 복습하고 타이핑 따라 쳐보며 이해하려고 노력하는 나.. 정말 대견하다!! 천천히 내 속도에 맞춰 나아가보자!! (스스로라도 칭찬해줘야 견딜 거 같다 ㅎㅎㅎ)

오늘은 여러 감정변화로 서론이 넘~~ 길었다.
이제 본론ㅋㅋㅋㅋ 오늘은 주로 꾸미는 코드에 대해서 배웠다.
여백, 크기, 색상, 도형변형 등.. (요즘 진도 완전 팍팍 나가서 다 못 적겠다. 자세한 건 깃허브에 있고, 중요한 것들만 적어본다!)

* 오늘 배운 내용

1. margin : 바깥쪽 여백 생성

2. padding : 안쪽 여백 생성

   padding:10px 20px 30px 40px;
   : 북쪽을 기준으로 시계방향으로 돌아가며 적용(북-동-남-서)
   => padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 30px;
   padding-left: 40px; */

           /* padding:10px 20px 30px
           : 북 10px, 좌우 20px, 남 30px */
   
           padding:10px 200px
           /* : 상하 10px, 좌우 200px */

3. radius : 바깥쪽 모서리를 깎는 것

4. background-color(요소 배경색)과 color(글씨색 등) 구분하기

5. background

   cover : 값을 cover 로 지정하면 배경이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정합니다. 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같습니다.

   contain : 값을 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정됩니다. 이미지의 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같습니다

6. 정적 이미지 : 잘 안바뀌는 사이트 배경 이미지 등

7. 동적 이미지 : 책 소개란 등 자주 업데이트 되는 부분

8. opacity : 요소의 불투명도를 설정함

9. z-index : 도형을 겹쳤을 때 앞뒤순서라고 할 수 있음. 큰 값이 앞으로 나오게 됨. 기본값은 auto, 최대값은 매우 큼(2147483647)

10. 이미지파일은 width나 height 중 하나만 설정하고, 나머지는 자동(auto)으로 인식됨.

* 공부가 필요한 부분(주말에 보충하기!!)

1. overflow : hidden / 061.html 참고
2. tranform : 059.html 참고
3. 절대적 위치(absolute,fixed 등), 상대적 위치(relative), 기본값(static)

어제 새벽 세시에 자서 오늘 코피 두번이나 쏟았는데.. 결국 나는 오늘도 늦게 자는구나..ㅜㅜ 오늘 과제도 일찍 끝냈는데 그날 배웠던거 복습하는게 생각보다 너무 오래 걸린다. 그래도 이게 다 피와 살이 되는거겠지??!!

아, 그리고 오늘 강사님께서 블로그 쓸 때 아래 요소를 잘 구성해서 작성하라고 하셨다. 지금은 블로그 작성도 습관이 안 들여졌기 때문에 내 마음대로 쓰지만, 언제 한번 정리 해야겠다.
1. 구조
2. 폰트
3. 이미지

그보다 중요한 것은 내가 그 분야를 얼마나 깊게 공부했는지, 다양한 자료를 찾아보고 내 것으로 만들어 나의 언어로 정리하는 것이 중요하다고 하셨다.

아직 나는 다양한 자료를 찾아볼 정도의 여유는 없지만, 그래도 노력해야겠다. 요즘은 MDN 사이트에 익숙해지려고 한다. 설명이 잘 되어있긴한데 아직 내가 용어에 익숙하지 않아서 그런가 100% 이해가 안 될 때가 많다.

코딩은 생각했던 것보다 훨씬 공부할 것이 많다. 남들보다 코딩에 쏟는 시간을 더 많이 들여야겠다는 생각 뿐이다. 서지렁 화이팅!!!
_**