TIL 001

Front-end/TIL

집으로 감자 2024. 12. 23. 21:00

✏️ 24.12.23 To do list
- 웹개발 종합 1주차 강의
- 생활코딩 HTML 기초 강의
- Git 특강

오늘 학습한 내용

📌 클라이언트와 서버의 관계

클라이언트가 서버에게 어떤 정보를 요청하면,

서버는 클라이언트가 요청한 정보를 찾아 전달해준다

HTML = 웹페이지의 뼈대

CSS = 웹페이지의 살 (뼈대를 꾸며주는 도구)

JavaScript = 뼈대에 움직임을 주는 도구

각각의 환경에 맞는 VS Code 설치하기

HTML = Hyper Text Markup Language

: 사람과 웹 브라우저가 소통하기 위한 약속

<head> : 페이지의 속성 (눈에 보이지 않는 부분)

<body> : 페이지의 내용 (눈에 보이는 부분)

CSS = Cascadiing Style Sheet
: 웹 페이지를 꾸밀때 사용하는 언어

📌 Class

꾸미기 위해서는 지칭할 수 있는 대상이 중요하다
Class를 지정하고 Style에서 .Class를 선언한 뒤 꾸며주면 된다

📌 습득한 개념

px : 웹에서 쓰이는 길이의 단위
div : 하나의 구역을 지정함
padding : 안쪽 여백
margin : 바깥쪽 여백

📌 습득한 내용

1. 구글 폰트 적용 방법

https://fonts.google.com/?subset=korean

Get font → Get embed font → @import → <style>에 집어넣기

2. 부트스트랩 사용 방법

부트스트랩 = 타인이 만들어 놓은 예쁜 CSS 꾸러미

원하는 코드를 골라서 붙여넣고 수정하면 됨

3. 배경 넣는데 필요한 3가지 코드

background-image: url("이미지 주소");
background-position: center;
background-size: cover;

4. 영역 내의 콘텐츠를 가운데 정렬하는 법

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

1. Margin을 주기 전에 해당 영역이 얼마나 차지하고 있는지 확인하기

[추억 앨범] 프로젝트 강의를 보고 따라하기 전에 과거에 배웠던 내용을 토대로 먼저 실습을 진행하였다.

myPostingBox를 가운데로 정렬하려고 할 때 margin만 설정하여 myPostingBox가 가운데로 오지 않았다.

그 이유는 myPostingBox의 width가 웹 페이지 전체를 차지하고 있었기 때문이다.

margin을 주기 전에 myPostingBox의 width 값을 작게 설정해줘야 가운데로 온다는 사실을 깨달았다.

코드를 단순히 암기하기 보다는 언제 어떻게 활용하는지 익히는 것이 더 중요하다는 것을 깨달았다.

이것을 익히기 위해서는 코드를 한 번만 적용해보는 것이 아니라 여러 번 적용하면서 익숙해져야한다.