미미 공부/취미방

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/7 본문

Programming

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/7

mionager 2022. 6. 26. 12:49


1주차.Chapter 03에서는 다루는 내용이 꾀나 많아서,
각 강의에서 설명해 주신걸 각각 묶어서 내용 정리를 하려고 해요.
설명 내용은 크게 2가지로 HTML과 브라우저에서 사용하는 개발자 도구입니다.


01

HTML을 살펴보기 위해서,
1. 'test'(소문자로)라는 이름으로 폴더를 만든다.
2. ‘test’ 폴더 안에 index.html 파일을 만든다.
(VS Code에서 ctrl + n을 눌러서 새 파일 생성 > 저장 ctrl+s > 이름을 index.html)
(index라고 파일 명을 지정하는 이유 : 폴더의 대표 html로 브라우저가 해당 파일을 불러와요.)
3. 내용이 없는 상태에서 ! > tab
(기본 HTML구조를 만들어줘요.)

< !—- HTML 기본 시작 구조 —->
<!DOCTYPE html>
<html lang=“en”>
	<head>
		<meta charet=“UTF-8”>
		<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
		<title>Document</title>
	</head>
	<body>
</body>	
</html>

여기서 <!DOCTYPE html>은 문서의 HTML 버전을 지정해 줘요.
지금까지 HTML 1, 2, 3, 4, XHTML, HTML 5(현재) 이렇게 여러 버전이 나왔었어요.
이런 정보를 적어줘서 웹 브라우저가 선언한 버전에 따라 문서를 다르게 해석/이해하기 때문에 중요해요!

<html lang=“en”>에서 lang(language)은 사이트의 기본 언어 설정으로,
브라우저에서 자꾸 사이트 번역해줄까? 팝업이 뜨는 이유!
우리는 한국어 사이트를 만들기 때문에 “ko”로 바꿔주면 안 나타납니다.


02

HTML 태그는 대부분 시작과 종료를 알리는 태그가 한 쌍으로 있어요.
(한 쌍이 아닌 혼자 태그인 경우도 있음)
그래서 태그의 범위를 알려주죠.
<html></html>
<head></head>
<body></body>이런 식으로!

그래서 그 사이에 들어가 있는 것들이 해당 태그의 내용이 되는 거예요.
<head></head> 태그에는 해당 문서(html)에 정보들이 들어가요.
마치 책의 ‘개요’나 ‘차례’, ‘참조’ 같은 것들처럼.

그래서 브라우저가 해당 문서를 보여줄 때 뭐에 대한 문서고, 필요한 추가 파일들이 뭐고, 어떤 내용이 필요한지 등의 정보를 이해할 수 있게 되는 거죠. (검색엔진을 위해 넣는 정보도 있어요.)
그리고 정보를 ‘브라우저’에게 주는 것이기 때문에, 보여지지는 않아요.

head에 주로 들어가는 태그로는
<style>, <title>, <link>, <script>, <meta> 태그가 있어요.
1. <style></style> : CSS를 HTML 안에 작성하는 내부 스타일

<head>
	<style>
		div {
			color: red;
		}
	</style>
</head>


2. <title></title> : HTML 문서의 제목을 정의
(브라우저의 TAB에 나타나는 문구)

3. <link rel="가져올 문서와의 관계(정해져 있음)" href="문서의 경로와 문서명" /> : 외부 문서를 가져와서 연결
(예.
<link ref=“stylesheet” href=“./main.css” /> - css 파일을 연결
<link ref=“icon” href=“./favicon.png” /> - 탭 메뉴에 나타나는 작은 이미지
)
(link 태그는 종료 태그가 없어요. 이런 경우 태그 마지막에 / 슬래시를 넣어서 종료를 표시해 준답니다.)

4. <script src="./main.js"></script> : 자바스크립트 파일 연결
(혹은)
<script> 자바스크립트 코드 </script> : 내부자바스크립트 코드

5. <meta /> : 그 외의 정보
meta 태그로 전달할 수 있는 정보는 아ㅏㅏㅏㅏㅏㅏㅏㅏ주 많아서, 몇 개만 살펴보자면,
<meta charset="UTF-8" /> - 문자를 어떻게 처리할지 알려주는 정보 (잘못 입력하거나 없으면 문자가 깨질 수 있음)
그리고 주로 <meta 정보종류 정보값 />으로 정보를 입력해요.
(예.
<meta name="author" content="myname" /> - 작성자, 작성자 이름
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> - 뷰포트(반응형사이트), 가로 값 정보
)

 


03

<head> 태그안에 연결한 link나 script를 보면 src/href로 외부 파일을 연결해 줬는데,
연결할 파일의 경로를 찾기 위해 상대경로 vs 절대경로에 대해 설명해 주셨어요.


상대경로 : 해당 문서가 기준
절대경로 : 최상위(root) 폴더가 기준

./ 해당 문서 주변에서 (생략 가능)
../ 해당 문서 이전 폴더
http(https):// 주소 해당 사이트 최상위 폴더에서 이미지 찾기
/ (//) 프로젝트 최상위 경로

(예. 

예시를 위한 폴더 구조 이미지

index.html에서 main.css 불러오기(상대경로)

<link rel="stylesheet" href="./css/main.css" />

<link rel="stylesheet" href="css/main.css" />

주변에서 css폴더 선택 후 main.css 선택

 

test.css에서 main.css 불러오기(상대경로)

@import url("../main.css") - css에서 링크 불러올 때 코드

이 전 폴더로 나가서 main.css 연결

 

index.html에서 test.css 불러오기(절대경로)

<link rel="stylesheet" href="/css/test/test.css"/>

최상위 폴더에서 css폴더 선택 후 test폴더 선택 후 test.css 선택

 

index.html에서 main.js 불러오기(절대경로)

<script src="https://주소명/js/main.js></script>

주소명 최상위 폴더에서 js폴더 선택 후 main.js 선택

)

 

 

04

마지막으로 개발자 도구 간략한 설명!

 

개발자 도구를 열기 위해서는

분석하고 싶은 사이트에 가서 F12 혹은 ctrl + shift + i 혹은 사이트에서 특정 부분에서 우클릭 >  검사를 누르면 됩니다.

1 아이콘 클릭 > 해당 사이트에 마우스를 가져가서 아무 요소나 클릭 > 그럼 해당 요소에 대해 구조, 스타일 등 자세히 볼 수 있어요!
2 해당 사이트의 HTML을 볼 수 있어요.
3 에러, 경고 등이 뜨고 Javascript를 사용하게 되면 console.log(내용)이라는 명령어로 내가 원하는 내용을 나타낼 수 있어요.
4 선택한 요소에 대한 css 스타일을 볼 수 있어요.
하.지.만. 해당 요소에 적용되지 않은 스타일도 보여주고, 부모 요소에서 내려오는 스타일도 보여줘서 복잡해요.
5 선택한 요소에 대한 css 스타일을 볼 수 있어요. 적용된 스타일만!
6 해당 아이콘으로 개발자 도구의 레이아웃 등을 수정할 수 있어요.

지난번에 말씀 드렸듯이...

강의진행 속도를 착각해서 1주일 치가 밀려 있는데

블로그 내용까지 상세히 적다보니 너무 힘들어요...😭😭😭😭😭😭😭😭😭

그래서 다음 포스팅 부터는 내용을 조금 더 덜어볼까 합니다...

읽는 분들도 너무 길면 힘드시겠죠?!

 

그럼 다음 포스팅에서 봐용.

안뇽☠

저작자표시

'Programming' 카테고리의 다른 글

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 5/7  (0) 2022.06.28
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 4/7  (0) 2022.06.28
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 2/7  (0) 2022.06.23
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/7  (0) 2022.06.19
[패스트캠퍼스] 내일배움카드로 시작하는 React&Redux 프로그래밍 시작!  (0) 2022.06.18
'Programming' Related Articles more
Comments