![[부스트코스] 웹 프로그래밍 - browser에서의 웹개발](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPBBtp%2FbtqBFvLA0O6%2FnN1puoJMfDKSVbW48QSZAK%2Fimg.jpg)
개발자 도구
브라우저에서 웹 개발을 위한 코드들이 어덯게 동작하는지 직접 볼 수 있다.
- 크롬 브라우저가 없다면 설치하기
- 크롬 브라우저를 열고 크롬 개발자 도구 열기
- 윈도우 (Ctrl + Shift + I), 맥 (Option + Command + i)
- 접속 http://www.amazon.com
Elements 탭에서 소스코드를 볼 수 있다.
Networks 탭에서 새로고침을 하면 맨 위에 www.amazon.com이 나온다.
www.amazon.com을 클릭해서 Response를 보면 서버에서 보내준 응답값을 볼 수 있다.
HTML, CSS, Javascript 코드들을 볼 수 있다.
HTML 문서구조
- HTML문서는 html이라는 태그로 시작해서 html태그로 끝난다.
- head는 html 문서에 대한 추가적인 설명을 담고 있다.
- body는 화면에 표현해야 될 것들을 포함하고 있다.
- HTML은 계층적이다.
- HTML은 tag를 사용해서 표현한다.
- Javascript와 CSS가 HTML 안에 여기저기 존재한다.
브라우저에서 HTML, CSS, Javascript 코드를 어떻게 짤까?
강의에서는 하나하나 실습을 통해 실제로 코드가 브라우저에서 어떻게 동작하는지 보여준다.
https://www.edwith.org/boostcourse-web/lecture/16664/
간단히 정리해보자면,
<!DOCTYPE html> 이란 코드로 html 임을 알린다.
html 태그안에 head 태그가 있고 head 태그 다음에 body 태그가 있다.
head 태그에는 meta(문서에 대한 정보), title 이 있다.
body에 내용을 추가해야 브라우저 화면에 나타난다.
div 태그로 감싸고 style 태그에서 css를 적용함으로써 디자인을 적용할 수 있다.
style 태그는 head 태그 안에 넣는다.
javascript 코드는 head에도 넣을 수 있고, body에도 넣을 수 있지만, 보통 body 제일 마지막에 넣는다.
css나 javascript코드는 직접 html 코드 안에 넣지 않고 외부 파일로 해서 링크로 달아줄 수 있다.
실습코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>저를소개해요</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/start.js"></script>
</head>
<body>
<h1>안녕하세요</h1>
<div>코드스쿼드 크롱이라고 합니다</div>
<script src="js/library.js"></script>
<script src="js/main.js"></script>
</body>
</html>이번 건 간단한 내용이다.
웹 개발을 하는데 있어 필수적인 크롬 개발자 도구와 실제로 html, css, javascript 코드를 짜는 법을 간단히 알려주는 내용이었다. 크롬 개발자도구는 앞으로 웹개발을 하는 데 있어 정말 많이 쓰게 되는지라 빨리 익숙해지는게 좋다.
보통 웹개발을 할 때는 Atom이나 VS Code같은 IDE를 쓰지만 밑의 참고링크와 같이 간단히 코드를 테스트 해볼 수 있는 사이트도 있으니 아직 웹 프로그래밍이 처음이거나 이것저것 깔고 싶지 않은 사람이라면 참고링크의 사이트를 이용해도 좋다.
참고링크 [웹에서 hmtl, css, javascript를 쉽게 테스트 할 수 있는 사이트]
JS Bin
Sample of the bin:
jsbin.com
'공부 > [부스트코스] 웹 프로그래밍' 카테고리의 다른 글
| [부스트코스] 웹 프로그래밍 - HTML (0) | 2020.02.10 |
|---|---|
| [부스트코스] 웹 프로그래밍 - 웹 서버 & WAS (0) | 2020.02.05 |
| [부스트코스] 웹 프로그래밍 - browser의 동작 (0) | 2020.02.01 |
| [부스트코스] 웹 Front-End와 웹 Back-End (0) | 2020.01.30 |
| 부스트코스 서포터즈 BOOSTER 선정 (0) | 2020.01.15 |