Intro 인트로
2022년 검은 호랑이의 해를 맞이해서 덕담 공유 코딩 인강을 수강해보았습니다 ~
F12를 통해 개발자모드로 크롬창을 보게 되면 페이지의 구조를 확인 및 변경할 수 있고,
브라우저란, 서버에 HTML파일(HTML, CSS, JS)를 요청하고, 그 HTML파일을 받아서 보여주는 것이다.
그렇기 때문에 한 번 받아온 HTML파일을 내가 수정한다고 해서, 다른 사람에게 반영이 되지 않는 것이다.
또한, 새로고침의 경우, 새로 데이터를 받아오는 것이기 때문에 새로운 데이터로 변경되는 것이다.
HTML, CSS, JS 란
HTML : 뼈대
CSS : 꾸미기
JS : 움직이기
프론트엔드 맛보기 강의
프론트엔드 = 바꿔가면서 코딩하는 것!
HTML
VSCODE = open in browser 플러그인 설치 후 .html 파일에서 option + B (Mac 기준) 을 누르면 창이 뜬다.
<head> : 우리 눈에 주로 안보이는 부분
구글 검색엔진이 내 사이트를 보다 쉽게 퍼갈 수 있도록 하는 것, 카카오톡 공유 시 자동으로 나오는 이미지 세팅 등을 준비하는 부분
<body> : 우리 눈에 보이는 것을 작성하는 부분
<h~> : 하나정도는 적어야 함. 그래야 구글이 검색이 잘 된다!
CSS
일단 무언가를 가리킬 수 있어야 (지칭을 할 수 있는 대상의 이름이 필요) 꾸밀 수 있다.
태그를 활용해서 꾸미거나, 여러 개를 공통적으로 꾸미고 싶을 때 태그 안에 class="지칭하고 싶은 이름" 로 이름을 설정하여 꾸밀 수 있다.
<head> 안에 <style> 태그를 작성하고 그 안에 태그 명 h1 {} 또는 클래스 명 .test {} 의 방식으로 꾸미고자 하는 대상을 지칭하여 꾸민다.
1. 폰트 적용 = 웹에 업로드 후 해당 링크를 활용해서 폰트 불러와서 폰트 적용하는 것 가능
2. 반복적으로 사용되는 코드는 외우기 보다는 복사 붙여넣기로 사용하는 것에 익숙해지자 !
결과물
정말 귀여운 덕담 페이지가 완성되었습니다.. 귀여워요♥ 2022 즐거운 코딩 입문으로 추천합니다!!
'Daily 일상 기록 > 인강 기록' 카테고리의 다른 글
| [인프런Inflean]실전! 스프링 부트와 JPA활용1 - 웹애플리케이션 개발 : 프로젝트 환경설정 (0) | 2021.08.04 |
|---|---|
| [인프런Inflean]실전! 스프링 부트와 JPA활용1 - 웹애플리케이션 개발 : 강좌 선택 이유 (0) | 2021.08.03 |
| 컴퓨터 개론 04. 소프트웨어 이해하기 (0) | 2021.07.31 |
| 컴퓨터 개론 03. 프로그래머의 세계 이해하기 (3) (0) | 2021.07.30 |
| 컴퓨터 개론 03. 프로그래머의 세계 이해하기 (2) (0) | 2021.07.28 |