[부트캠프] 1일차 ! (feat.HTML과 CSS)

기다려 왔던 부트캠프 1일차.
OT도 있고 첫날이니 가볍게 생각했지만..
쉴틈 없이 강의 듣고 과제 스프린트까지 진행했다.

강의 들으며 코드도 치고 이해가지 않으면 영상을 되돌리고 하다보니 시간이 빠듯하더라..

우선, 오늘 배운 것을 요약하면, 사실 기억나는 것이라도 정리하자면 아래와 같다.

HTML은 약속된 '명령어'이다.

웹 사이트를 만들기 위해서는 웹페이지 구성 언어를 알아야한다. 크게 HTML, CSS, Javascript 이 3가지로 구성되는데, 그중 HTML(Hyepr Text Markup Language)는 네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해 만들어진 체계이다.

HTML은 수 많은 태그의 집합이다. 이 태그는 약속된 명령어로 각 태그별로 다양한 기능을 가지고 있다.

 

태그의 종류로는

 

1. 꾸며주는 태그 - 글자를 굵게 만들거나 밑줄을 치는 태그
ex) <strong> Hello World </strong>

 

2. 빈 태그 - 셀프 클로징 태그. 즉, 시작 태그와 종료 태그 없이 사용할 수 있다.
ex) <br>, <hr>

 

3. 특정 기능이 있는 태그 - 버튼, 입력창 등 기능을 만드는 태그다.
ex) <button> 클릭하세요 </button>

 

4. 이미지 동영상 태그 - 이미지나 동영상 링크를 삽입할 수 있다.
ex) <img src="image.png"/>

HTML은 만들어보면서 익히는 것이 최선인 것 같다. 태그를 외울 것도 아니고 막상 사용할 때는 다시 찾아보고 쓸 것 같다.

CSS

CSS는 HTML로 만든 웹 구조에 컬러나 크기, 이미지 등을 적용하여 꾸며주는 역할을 한다.

css 적용법

CSS를 사용하는 방법은 크게 3가지가 있다.

1. html 태그 속성에 직접 입력하는 방법
2. html내에서 <style> 태그에 입력하는 방법
3. CSS 파일을 만들어 html에 연결시키는 방법

박스 모델

사실 이번 시간에 가장 크게 배운 것은 아래 박스 모델이다. CSS를 배우기 전에 꼭 잡고 가야하는 개념인 것 같다.

회사 다닐 때 디자이너와 개발자들이 왜 그렇게 패딩 값이나 마진 값에 목을 매었는지 조금은 알 것 같다.

border-box와 contents-box에 따라 마진이나 패딩 값을 달리해야 한다.

border 박스의 경우 padding 값을 조절하며 contents 박스가 영향을 받는다. 반대로 contents 박스의 padding 값을 조절하면 border 박스의 크기가 영향을 받는 것이다.

block과 inline

block 요소는 위에서 아래로 수직으로 층층이 쌓이며 inline는 원하는 대로 배치할 수 있는 요소다.

CSS 정렬 시 이 block과 inline의 차이를 잘 생각해야 한다.

css 정렬

CSS 박스를 정렬할 때는 주로 flex와 position을 많이 사용한다. 둘의 차이는 간단하게 말하면 flex는 정렬, postion은 배치라고 생각하면 좋다.

flex

플렉스는 여러 태그를 하나로 묶어서 정렬 하는 개념. 주로 수평 수직 정렬을 위해 사용한다. 주로 쓰는 기능은 아래와 같다.

1. flex-direction : 주축을 설정
2. justify-content : 주축의 정렬 방법
3. align-content: 교차 축의 정렬 방법
4. align-items : 한 줄의 수직 정렬

position

포지션은 다양한 기능을 내장한다.

그림으로 보면 배치라는 개념이 어떤 것 인지 한번에 이해가 간다.

---

하루동안 정말 많은 것을 배웠다.
부트캠프 전 여러 html 강의를 들었었는데

정말 세세하고 알려주고 궁금한 것을 콕 집어 알려주시는 것 같다.

 

또 좋았던 점은 초보자나 비전공자들은 알 수 없는

코딩 잡지식을 많이 알려주신다는 거다.

 

예를 들면 <div>를 써도 모두 작동하지만 왜 footer나 header, nav 같은 태그를 사용하는지(협업에서는 코드를 명확하게 알기 위해서 구분하여 사용한다고 한다).

 

또, class 명을 정할 때 언더바 '_'를 두 개쓰는데 회사마다 다르며 각자의 컨벤션 마다 다른다는 것(왜 두개의 언더바를 쓰는지 항상 궁금했다).

 

아직 1일차지만 정말 정신 없었다.
특히 노션, 강의, 게더, vscode, html, 창을 많이 켜서 그런지 컴퓨터도 정신 없어보이더라. 모니터가 3개가 되어도 모자랄 것 같다.