웹브라우저가 하는일?
웹브라우저는 HTML형태의 코드를 우리에게 친숙한 웹 페이지로 바꾸어 주는 것!
웹 동작개념
간단하게는
- 요청을 보내고
- 받은 HTML 파일을 그려준다.
클라이언트가 요청을 하면 서버컴퓨터가 요청에 대한 응답으로 HTML, CSS, JS 로 코드를 줌
또는 JSON 등의 데이터의 형식으로만 응답을 주기도 함.
HTML, CSS, JS 가 뭔데 ?
![[Pasted image 20231204171409.png]]
https://html-css-js.com/
HTML은 뼈대
CSS는 스타일
JS 는 애니메이션 등 동작
HTML 구조
head
중요한 속성들이 들어가는 부분
웹페이지에 들어가진 않지만 필요한 것
body
필요한 내용이 들어가는 부분
주석 달기
언제 다냐?
- 삭제는 안하지만 컴퓨터가 못 읽게 하도록함
- 동료들과 소통
원래 있던 코드 주석으로 만드는 단축키 : ctrl + /
CSS 기초
CSS의 구조
p { color : red; padding : 5px; }p : 선택자
ㅇㅇ : ㅁㅁ ; 에서
ㅇㅇ : 선택자, ㅁㅁ : 속성값
{ } : 선언블록
HTML 레이이웃
<body>
<h1>안녕하세요</h1>
</body>여기서 보면
body 태그가 h1을 감싸고있지?
그럼 body가 부모태그고 h1이 자식이야
안에 감싸져잇는게 자식이고, 자식은 부모의 CSS 스타일을 받아.
상속 이라고 해.
Flex로 배치하기
HTML은 BOX형태야. 즉 레고가 쌓이는 형태라 생각하면 돼
위에서부터 아래로 읽어
block : 1줄, ( 세로로 배치 ) , 한 줄을 전부 차지해.
inline : 글자단위. (가로로 배치) , 글자의 영역만큼 차지
flex는 담고있는 부모태그에 display : flex;를 넣어서 적용justify-content : center; : 세로방향으로 가운데 ( 왼쪽오른쪽 가운데 )align-Items : center; : 가로방향으로 가운데 ( 높이가 가운데 )
웹페이지 구성
네브바
메인
푸터
순으로 되어있음
마진과 패딩
마진(Margin)
마진은 요소 바깥쪽 공간으로 다른요소와 거리를 조절 ( 테두리 밖 )
패딩 ( Padding )
패딩은 요소와 테두리 사이의 거리를 조절
구글 폰트 사용하기
사이트 주소
https://fonts.google.com/
원하는 폰트 누른 다음, 굵기 선택 후 @import 선택하면 코드를 import 할 수 있고
바로 밑에 CSS rules.. .복사하면 집어넣을 수 있다 .
부트스트랩 사용하기
https://getbootstrap.com/
실제로 많은 개발자들이 CSS를 모두 만드는건 아니다.
처음 시작할 때는 다른사람이 만들어놓은 이쁜 코드를 가지고 시작한 다음, 자기의 입맛에 맞추어 살짝살짝씩 변경하는것!
doc에 들어가면 왼쪽에 다양한 모음이 있다. 들어가서 복사해서 붙여넣기만 하면 자유롭게 쓸 수 있는것이다 . 이 차는 이제 제껍니다 ~