1일차에는 A-Z 웹개발 강의
1주차 내용을 듣고
배운 내용을 정리했다.
브라우저의 역할
- 우리가 보는 브라우저 주소를 통해 API로 요청을 보낸다.
- 서버에서 받은 HTML 파일을 웹페이지에 그려준다.
- 하지만 받은 파일을 일일히 새로고침 되면(ex. 티켓을 예매할 때 좌석이 실시간으로 매진될 때마다 보던 페이지가 새로고침 되는 경우)비효율적이기 때문에 대부분 JSON형식으로 데이터만 받게 된다.
VS 코드란?
비주얼 스튜디오 코드(VisualStudioCode)의 약자로 마이크로소프트사에서 개발한 코드 에디터이다. 아직 사용에 익숙치 않은 사람들한테는 한글버전 쓰는법을 알려주지만 에러코드나, 모르는 부분을 검색할때는 대부분 영어로 나와있기 때문에 영어버전으로 쓰는 걸 권장한다.
공식 홈페이지를 통해 https://code.visualstudio.com/ 다운 받을 수 있다.
다음은 extensions에서 확장프로그램을 깔 때 사용하기 좋은 추천 프로그램 목록이다.
1. 라이브 서버(Live server): 작성한 코드를 실시간 서버로 웹에서 확인할 수 있어서 필수로 깔아야 한다.
2. Auto Rename Tag: 바꾸고자 하는 태그 이름을 닫는태그도 자동으로 이름을 바꿔준다.
3. Prettier: 코드를 규칙에 맞게 가독성 있게 바꿔준다.
4. Error Lens: 코드에 에러 부분난 곳에 표시해준다.
5. ESLint: 자바스크립트 코드에 에러가 날때 표시해 준다.
HTML이란?
웹페이지에 뼈대를 잡아주는 구역을 나타내는 코드이다.
HTML은 크게 head와 body로 이루어져 있는데
head에는 페이지의 속성을 정의하거나 필요한 스크립트를 부르는 등, 눈에 안보이는 필요한 것들을 담는다. (meta, script, style, link, title 등)
body는 페이지 안의 내용을 담는다. (span, img, input, textarea 등)
CSS란?
html을 통해 작성된 뼈대를 예쁘게 꾸며주는 코드이다. 선택자를 통해 스타일을 입힌다.
빨간색 태그에 스타일을 바꾸면 그 안의 속한 파란색 태그, 초록색 태그도 스타일에 영향을 받게 된다.
Format Document(문서 서식)
VS Code에서 Shift + Alt + F (맥은 Shift + Option + F)을 사용하면 코드가 자동정렬된다.
구글폰트
구글폰트 https://fonts.google.com/?subset=korean 사이트를 통해 폰트 url를 import 시키면 폰트 스타일을 입힐 수 있다.
이렇게 여러개라면 처음 추가한대로 스타일이 추가 되기 때문에 본인이 원하는게 뒤에 있다면 뒤에 부분은 안먹힌다.
자신이 쓰고싶은 폰트 하나가 추가되어 있는지 확인해줘야 한다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap');
* {
font-family: 'Hahmlet', serif;
}
</style>Use on the tab에서 url과, css rules 부분을 복사해서 style 태그에 붙여주면 된다.
부트스트랩이란?
css를 통해 꾸민 코드들을 모아둔 곳이다. CDN 코드를 head태그안에 넣어서 사용하면 된다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">1주차 공부를 마치며..
html과 css 클론코딩을 해보면서 공부했던걸 복습할 수 있는 시간이어서 좋았고 css는 개념이해가 부족한 부분이 좀 있어서 공부를 좀 더 보충해야겠다.
