웹개발 종합반 1주차 내용 정리
웹의 작동 원리
웹 브라우저는 서버에 요청을 보내고, HTML 또는 데이터를 받아 화면에 출력
주소창에 URL을 입력하면 서버의 API로 요청이 전송되고, 응답을 받은 브라우저가 내용을 그림
HTML
HTML은 웹페이지의 구조를 잡는 언어로 뼈대 역할
기본 구조는 <head>와 <body>로 나뉘며, div, h1, p, img, input 같은 태그를 활용
로그인 페이지를 직접 만들어보며 HTML 구조를 연습했다
CSS
CSS는 HTML 요소에 스타일을 입히는 언어
.클래스명 형태로 사용하며, <style> 태그 안에 작성한다
먼저 background-color 태그를 활용해서 적용되는 범위를 파악하면 수월하다
Google Fonts 적용
fonts.google.com에서 원하는 폰트를 선택해 <style> 안에 import 코드로 추가하고,
아래 font-family: 로 시작되는 내용도 붙여넣는다
Bootstrap 사용법
Bootstrap은 미리 만들어진 CSS 스타일을 모아놓은 프레임워크
버튼이나 카드 등의 클래스를 활용하면 손쉽게 디자인할 수 있다
1주차 수업을 듣고
웹이 어떻게 작동하는지 이해하고, HTML과 CSS로 웹페이지를 만들어보는 것이 핵심이었다
하루만에 실제로 웹 화면을 구현해봤는데, 즉각적으로 반영되는 것들을 눈으로 보면서 해보니까 흥미롭고 이해하기도 쉬웠다.
특히 Bootstrap을 활용하니 디자인이 훨씬 간단하고 깔끔하게 나와서 신기했고, 뭔가 전문가가 된 느낌도 들었다
하나하나 배워가면서 달라지는 결과물을 보는 것이 기대가 된다
웹개발 종합반 2주차 4강까지
수업을 따라 만들 때는 괜찮았지만, 혼자 해보려니 어려운 부분이 상당했다.
아래 영화제목과 영화 코멘트라고 되어있는 부분도 검은 배경으로 만들어보려했는데, 크롬에서 값을 줬을 땐 변경이 되는데 vscode에서 넣어보려니 안 돼서 더 공부가 필요해보인다.
그리고 별점선택 창을 눌렀을 때 나오는 선택창?도 검정 배경으로 바꿔보려했는데, 답을 찾지 못 했다.
또 부트스트랩은 다양한 기능이 있지만, 기본 구조를 이해하지 않으면 응용하기 어렵다는 걸 느꼈다.
그래서 단순히 복사해서 쓰는 걸 넘어서서, ‘왜 이렇게 코드를 짜는지’를 더 깊이 이해하고 싶다는 생각이 들었다.
내일은 정적인 웹페이지에서 한 단계 더 나아가 움직임을 더할 수 있는 자바스크립트를 배운다고 하니, 본격적으로 개발에 가까워지는 느낌이 들어 기대된다.