🌈W1_DAY_1 이력서 폼 만들기

🪂 2023. 03. 13. Monday_ 지난 주 까지는 봄이 오나 했는데, 갑자기 날씨가 추워졌다.🌬️ 🪂

---

✅ 이력서 폼 만들기

✅Intro

안녕하세요!😁
오늘은 TECHIT-블록체인 스쿨 3기의 첫 번째 시간입니다 ~!~!~!!!👏👏👏

떨림과 설렘이 공존하는 첫 수업시간! Zoom으로 진행되었던 OT를 통해서 짧은 시간이었지만 많은 분들과 대화를 나눠 벌써 내적 친밀감이 생긴것 같아요ㅎ!

모두 함께 4개월 동안 하나의 멋진 프로젝트를 완성하는 그날까지 화이팅합시다 !

* 월요일과 화요일은 VOD로 강의가 진행되었습니다.
* 이 곳에서는 당일에 배운 내용을 복습하는 용도로 글을 작성하려고 합니다.

* 오늘은 HTML/CSS를 활용한 '이력서 폼 만들기' 내용을 복습해보겠습니다.
⠀⠀⠀⠀
⠀⠀

---

👉구조

: 큰 구조는 다음과 같이 구성된다.
⠀결과물만 봤을 때는 복잡해 보였지만, 큰 덩어리로 나눠보면 전 보다 간단해 보인다.

html

head

body

div: main-box => ( div: title-box, section: about-me-text )

section: experience => ( div: title-text, year-text )

section: activities => ( div: title-text, year-text )

section: education => ( div: title-text, year-text )

section: awards => ( div: title-text, year-text )

div: experience => ( div: sns-img )

footer⠀⠀

⠀⠀

---

👉 핵심 내용 정리

✔️HTML 파일 작성시 중요한 부분

<!-- css파일을 따로 만들어 html파일과 연결할 경우 html파일에 작성해줘야 한다 -->
🔸<link rel="stylesheet" href="적용할스타일시트명.css">

✔️ CSS 파일에 작성시 중요한 부분

/* 각 태그에 class를 지정해 스타일을 적용할 경우 */
🔸@import url('적용할 폰트의 url을 복사해 붙여 넣는다.');

/* css 파일에 폰트 적용하기 */
.클래스명 {
	적용할 스타일: ;
}

/* 줄 간 간격을 설정할 경우*/
🔸line-height: 16px;


/*
float를 사용해 스타일을 적용할 경우
다른 폰트나 이미지와 겹치는 문제가 발생할 위험성이 존재함으로 다음 스타일을 꼭 적용해줘야 한다!
*/
🔸overflow: hidden;

✔️ 박스모델

/*박스에 그림자를 적용할 경우*/
🔸box-shadow: x축 y축 블러값 퍼짐도 rgba(r,g,b,투명도);
🔸box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);

/* border 사용방법 */
🔸border: 두께 방법 색깔
🔸border: 5px solid black;

/* box의 총 사이즈 !*/
🔸border*2 + width/height + padding*2

⠀⠀⠀

---

📌 DAY-1

VOD 수강시간은 300분정도 되었지만,,, 따로 정리하면서 따라가다 보니 거의 시간이 2배로 걸렸다..ㅎ그래도 하나의 완성된 결과물을 만들어 매우 뿌듯한 시간이였다😊😊😊

이전에 html/css/javascript를 공부한 적이 있어 '다 아는 내용이 아닐까?'라며 자만을 하였지만ㅋㅋㅋㅋㅋㅋㅋㅋ 역시 공부는 끝이 없나 보다ㅋㅋㅋㅋㅋㅎ 오늘은 'float'기능을 알게 되었고 이 기능을 사용할 때 주의할 점도 배웠다!

내일도 화이팅! 아자아자아자~~!~!~!~!🙌