쉽게배우는 gpt웹개발 1주차

오늘 배운것

 

html에 관한것 

큰틀에서 html은 head 와 body 로 나눠져있고

더 크게 나누면 안으로 들어갈수록 많은 종류의 tag로 이루어져있다.

 

부모와 자식tag를 잘 구분하는것이 중요하다

부모자식 관계에 따라 상속이 달라진다.

ctrl+/ : 주석달기

alt+방향 : 태그옮기기

shift+alt+f : 자동정렬기능

 

flex(부모tag에 작성해야함): 왼쪽에서부터 가로로 배치된다.

justify-content: center; : 가운데로 배치(flex의 설정에 따라 가로세로변화)

align-item: 주축의90도로 정렬됨

기본적으로 html은 box형태로 레고처럼 쌓이는 형태이다.

block: 1줄을 다차지하는 형태(위에서 아래로)

inline:글자(왼쪽에서 오른쪽으로)

 

또 html에서는 css 라는 것이 필요한데 이것은 tag를 꾸며줄때 사용하는 것이다. 

글자의 색이라던지 크기, 폰트 등등 원하는대로 만들어갈수있다.

 

웹페이지의 구조

네브바navbar : 상단의 메뉴들

메인main : 본문

푸터footer : 맨아래의 연락처 정보등 

마진margin : 요소 바깥쪽 공간으로 다른 요소와의 거리를 조절합니다.(테두리 밖)

패딩padding : 요소와 테두리 사이의 거리를 조절합니다.

flex-direction: column;  : 위에서 아래로 배치( 원래 위에서 아래로 배치가 되는것이 기본이지만 가운데 정렬을 하기 위해서는 필요하다)

* : 프로그래밍에서 모든것을 의미함

 

display: flex;

flex-direction: column;

justify-content: center;

align-item: center;

가운데정렬할때 많이쓰이는 코드

 

-중요한것- 

html의 큰틀은 head와 body로 이루어져있다는 것.웹페이지의 구조는 기본적으로 navbar, main, footer로 이루어져있다는것