Ch 3. 무작정 시작하기

🎯이번 챕터는

제목대로 무작정 몇가지를 시작해보는 챕터였다.

그렇다고 마냥 가볍지는 않은 것이 나중에도 계속해서 쓰는 기술들이기 때문이다.

!를 이용한 DOCTYPE이나 a태그 경로지정과 개발자도구 등등 다양한 걸 배웠지만

배우면서 느낀건 조금씩 다 아는거였지만 완전히 다 알지는 못했다는 점이다..

정말 겉 핥기로 알고 있었다는 것을 통감하며 다시 잘 배워야 겠다.

 

---

⭕01. Doctype(DTD)

📌강의 정리

• 새로운 프로젝트를 만들예정이다.
• test프로젝트 즉 폴더단위는 자유로운 이름으로 하되 영어,소문자를 권장한다.
• 파일에서 열기해서 test 디렉토리를 열어준다.
• index.html을 만들어주는데 이름이 index라 짓는 이유는 브라우저가 index를 먼저 찾아 열기 때문이다.
• !로 doctype을 열어주면 html도 있고 head도 있다.
• 이때 알아야 할 것은 html태그가 어디서부터 어디까지 연결되는지를 알아야 한다.
• head태그 또한 어느정도 영역을 가지고 있는지 알아야한다.
• 안의 기본내용을 지워주고 들여쓰기를 통해 head와 body를 깔끔하게 정리해주자.
• !로 시작하는 DOCTYPE html은 문서의 HTML버전을 지정한다.
• 여기서 문서란 페이지를 뜻한다.
• HTML은 1,2,3,4,X가 있고 제일 최신은 5버전이다.
• 웹표준또한 HTML5이다.
• DTD, DOCTYPE은 마크업 언어에서 문서형식릉 정의하며,
  웹 브라우저가 어떤 HTML버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도이다.
• 만약 HTML의 과거 버전을 써야한다면 XHTML까지는 내려갈 수 있다.
• html PUBLIC “-//w3c//DTD XHTML...이런 식이면 이 페이지는 XHTML로 열리는 페이지임을 알 수 있다.

📌느낀점

항상보던 DOCTYPE이지만 어떤 의미인지는 잘 몰랐는데 이렇게 간단한 의미인줄은 처음 알았다.

이제는 코드의 처음부터 어떤 의미인지 알 수 있게 되어 기분이 좋다.

---

⭕02. HTML, HEAD, BODY

📌강의 정리

• 이제 DOCTYPE은 웹표준을 지켜서 한다는 것을 알게 되었다.
• html은 시작태그 /html 은 종료태그이다.
• 즉, html태그는 HTML문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할이다.
• head태그를 알아보자.
  웹브라우저가 해석해야할 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은
  웹페이지의 보이지 않는 정보를 작성하는 범위이다.
• 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은
  웹페이지의 보여지는 구조를 작성하는 범위이다.정보를 해석하는 범위는 헤드
• 구조를 해석해야하는 범위는 바디 이다.
• 브라우저가 해석해야하는 범위를 해석해야하며 헤드
• body태그는 문서의 구조를 나타내는 범위이다.
• head태그는 문서의 정보를 나타내는 범위를 지칭하는 태그이다.
• 우리가 맘대로 코드를 만들어서 브라우저에게 전달하면 안된다.
• 즉 이 html태그는 문서의 전체범위를 지칭하는 태그이다.
• html태그는 밑에 /html 으로 끝나는 태그를 볼 수 있다.

 

📌느낀점

html, head, body태그의 정의에 대해 알아봤다.

무엇을 배우든지 기초가 중요하다는 말이 있다.

여기서는 그 기초를 배운것같다.

이 기초를 토대로 앞으로 무언가를 배울때 이 위로 지식을 쌓으면 될것이다.

---

⭕03. CSS,JS 연결하기

📌강의 정리

• !와 탭키를 눌러 기본적인 것을 작성해보자.여기에 Hello world!를 써주고 전체 저장을 해주자.
• 즉 바디태그내에 작성해야 사용자가 구조적인 부분을 볼 수 있다.
• 이제 사이드바에서 main.css를 만들고color: red;를 div안에 넣어준다.
  이 뜻들은 색깔은 빨강 폰트사이즈는 100px로 바꾼다는 뜻이다.
• head태그는 정보를 나타내는 태그이다.
  이뜻은 main.css를 html에 css를 연결해주는 기능을 하는 태그이다.
• 우리는 기본적으로 영어가 아닌 한국어를 하고자 한다.
  그러면 이제 사이트에서 영어를 한국어로 바꾸는 기능은 뜨지 않는다.
• 이제 JS파일을 만들어보자.
  이 JS파일 또한 HTML에 연결되어야 하므로 HTML문서에서 script문서를 작성해야한다.
  script src=”./main.js”를 해주면 연결된다.
  여기서 console탭으로 들어가면 HEROPY!가 뜨는 것을 볼 수 있다.
• element와 console을 알아봤다.
• console.log의 뜻은 콘솔창에 로그를 띄울거다라는 뜻이다.
• 우리가 앞으로 매우 많이 써볼 개발자도구를 알아봤다.
• 이제 브라우저로 들어가서 f12를 눌러주면 개발자 모드가 뜬다.
• src라는 소스를 입력해주어야하는데
• console.log(’HEROPY!’);라고 하고 전체저장을 해보자.
• 이 기능은 브라우저가 우리의 html을 해석하면서 청유하는 기능이다.
• 그러면 위의 html lang=”en”이므로 en을 ko로 바꿔준다.
• 이 index.html이 어떤 css파일을 연결할지도 하나의 정보이므로 head내에 넣어준다.
• 이 head내에 link 하고 탭키를 누르면 완성되는 내용에 href=”./main.css”를 넣어준다.
• 이제 이 css파일을 html에 연결해주어야한다.
• 그 다음줄에 font-size: 100px; 로 설정해준다.
• div{}를 해주고 들여쓰기를 하는데 공백4개이므로 공백을 2개로 바꿔준다.
• 그러면 이 구조를 어떻게 꾸밀 수 있을까?
• 이제 이 헬로월드를 브라우저에 띄우려면 우클릭 후 라이브 서버를 열어주면 브라우저에서 볼 수 있다.
• 우선 body로 들어가서 div쓰고 탭을 누르면 div태그가 완성된다.

 

📌느낀점

css와 JS를 연결하는 것을 배웠다.

전에 생활코딩에서도 간간히 배웠던 그 내용이다.

이번에 좀 더 잘 와닿는 듯 하다.

특히 전에 배웠던 head는 정보를 body는 구조를 나타낸다는 뜻에서 연결되어 배우니까
좀 더 잘 의미가 전달되고 기억되는 것 같다.

css는 link를 이용하고 JS는 script를 이용한다.

---

⭕04. 정보를 의미하는 태그 살펴보기

📌강의 정리

• 외부의 파일을 연결하는 행위는 정보에 해당하는 행위이다.
• 이는 head에 연결하는 내용이다.
• head에는 style태그또한 있다.
• 여기서 css태그들을 사용할 수 있다.
• div{text-deco...}를 style태그 안에 쓰면 연결할 필요없이 css를 바로 쓸 수 있다.
• head내의 태그들을 간단히 알아보자.
• title태그는 html문서의 제목을 정의한다.
• 이는 웹브라우저 탭에 표시된다. 이 제목이 이 title이다.
• link라는 태그는 외부에 있는 문서를 가져와 연결할때 사용한다.(대부분 css파일)
• 속성 rel에는 가져올 문서와의 관계, href에는 가져올 문서의 경로를 적는다.
• ./는 index.html파일의 주변에서 파일을 가져오겠다는 의미이다.
• rel은 relationship의 약어이다.
• 이 link를 통해 제목에서의 로고를 href라는 속성을 이용해서 사용할 수 있다.
• 페이지의 대표 이미지는 favicon이라는 이름을 주로 쓴다.
• style태그는 스타일(css)를 HTML문서 안에서 작성하는 경우에 사용한다.
• css를 파일로 만들어서 link로 연결 안 할때 쓰는 태그이다.
• script는 src라는 속성을 써서 JS파일을 가져오는경우 쓰는 태그이다.
• 또한 script는 style태그처럼 HTML문서 안에서 JS를 사용할 수 있게 해준다.
• meta라는 태그는 나머지 모든 정보를 표시할때 사용하는 태그이다.
• meta는 정보를 의미한다. name이라는 속성에 author 을 쓰고 content라는 속성에 실제값인 “HEROPY”를 쓸 수 있다.
• 즉 정보의 종류는 제작자이고 내용은 HEROPY이다. 라고 할 수 있다.
• meta는 HTML문서의 제작자, 내용, 키워드 같은 여러정보를 검색엔진이나 브라우저에게 제공한다.
• viewport라고 하면 웹페이지가 표시되는 영역을 의미한다.
• 이는 모바일 장치에만 해당하기 때문에 첫번쨰는 모바일에 대응할것이다. 두번째는 어떻게 대응할 것이다 라는 뜻이다.
• charset은 문자 인코딩 방식을 지정하는 HTML속성이다.
• 쉽게 설명하면 “김”이라는 글자는 ㄱㅣㅁ 을 조합해서 만드는데 인코딩이 달라지면 꼭 3개가 있어야만 나오거나 하게 바꿀 수 있다.
• 우리는 UTF-8을 웹표준으로 가장 모던하게 처리할 수 있다.
• 자세한 사용법보다는 태그의 역할에 대해서 잘 공부했으면 좋겠다.
• 의미에 집중해주자.

 

📌느낀점

태그에 대해서 배우는데 나름 많은것을 안다고 생각했지만 여기서부터 모르는 내용들이 꽤나 있었다.

태그와 그 속성 그리고 의미들에 대해서 새롭게 알게 되었고 이 부분이 기초라는 것을 알게되었다.

이 기초내용들은 앞으로 계속 쓸것이기때문에 쓸때마다 오늘의 이 내용을 다시 상기해야 할 것이다.

---

⭕05. 화면에 이미지 출력하기

📌강의 정리

• 이미지를 출력해보자.
• heropy.blog로 들어가서 개발자도구로 들어가보자.
• element탭으로 들어가서 왼쪽 상단부의 select버튼을 통해 그 구성요들의 범위와 여백들을 확인해보자.
• 로고를 보고 클릭하면 오른쪽에 로고인것을 알 수 있다.
• 이 로고의 스타일을 아래 스타일탭을 통해 알 수 있다.
• 이 내용을 보면 images/에서 우클릭 후 new tab을 하면 새탭에서 저 이미지를 볼수있고
• 이제 이 이미지를 다른이름으로 저장으로 바탕화면에 저장해보자.
• 이 이미지를 우리의 프로젝트로 이동시키자.
• 그럼 vscode에서 이 이 logo이미지를 확인 할 수 있다.
• 이제 images라는 폴더를 만들고 logo를 그 안에 넣어주자.
• 이렇게 이미지를 폴더로 관리하면 좋다.
• css폴더에 main.css를 넣고 js폴더에 main.js파일을 넣어주자
• index.html은 폴더로 관리하면 안된다.
• index.html파일은 루트폴더에 index가 있어야 브라우저가 그 index를 읽을 수 있기 때문이다.
• body내에서 img src태그를 열면 img를 출력할 수 있는 태그를 쓸 수 있다.
• src라는 속성은 경로를 작성해 줄 수 있다.
• src내에 ./images/logo.png를 써주면 된다.
• ./는 현재 파일주변에서 찾는것이고 여기서 images를 적고 /하면 그 폴더로 들어가는 것이고
  거기서 logo.png를 열 수 있다.
• alt는 필수속성인데 반드시 작성되어야한다는 뜻이다.
• 이는 이미지가 출력되자 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트라고 부른다.
• 이미지경로가 잘못되거나 네트워크불안정같은 상황에 대신나올 글자로 이해하면된다.
• alt에는 “HEROPY”라고 해보자.
• 이제 liveserver로 열어주면 특정 이미지가 열리는 것을 알 수 있다.
• 우리가 css,js파일의 경로를 바꿔주었기 때문에 위의 head내부의 link에서 경로를 넣어줘야 한다.
• 다시 새탭의 주소를 복사해서 vscode로 가서
• img src에 이미지의 실제 웹주소를 넣어줘보자.
• 그러면 로고가 새롭게 출력되는것을 알 수 있다.

 

📌느낀점

화면에 이미지를 출력하는 부분이었다.

총 두가지방법이 있었는데 하나는 따로 이미지를 저장해서 직접 그 경로를 적어주는것과

다른 하나는 웹에서의 http주소를 적어주는 방법이었다.

둘 다 장단점이 있는 방법으로 나중에 다양한 상황에서 잘 써봐야겠다.

또한 폴더를 만들어서 관리할때 경로를 다 정해주어야 한다는 점과

index.html은 폴더로 관리하면 안되는것을 알게 되었다.

---

⭕06. 상대 경로와 절대 경로

📌강의 정리

• 코드로 작성할 수 있는 경로에 대한 이야기를 해보자.
• 상대는 상대적이고 절대는 절대적인 것이다.
• ./에서 .은 주변에서 찾는다고 했는데 이는 상대적으로 기준이 바뀔수 있다는 의미이다.
• ./은 생략이 가능한데 이는 생략되어도 주변에서 찾는다는 뜻이다.
• 또한 ../는 자기가 속해있는 폴더의 상위폴더에서 찾는다는 내용이다.
• 절대경로는 http 또는 /를 쓴다.
• 우리의 프로젝트도 업로드를 하면 http의 원격주소를 얻게 된다.
• /는 루트경로라는 의미를 가진다.
• 우리가 알아야 할것은 ./ , ../ 는 상대 http, /는 절대라는 것을 알아두자.
• 우리의 프로젝트를 보면 127.0.0.1:5500을 볼 수 있는데
  이는 우리의 브라우저가 5500포트를 통해서 열고있는것을 알 수 있다.
• 127.0.0.1 이 아닌 localhost:5500을 입력해도 우리의 프로젝트로 들어갈 수 있다.
• 5500 포트라는 로컬에서 우리는 개발을 하고 있던 것이다.
• 로컬호스트라는 것은 우리의 컴퓨터 환경이다. 로컬환경.
• ./image/heropy.png를 통해서 우리의 이미지를 알 수 있다.
• 이때의 ./는 이 ./작성된 파일의 주변에서 찾는다는 뜻이다.
• 그러므로 images/heropy.png를 하면된다.
• 또한 main.css에서 heropy.png를 사용하려면 ../images/heropy.png를 하면된다.
• 이렇게 해야 main.css가 자신이 속한 폴더에서 밖으로 한번 나가야 images라는 폴더를 찾을 수 있기 때문이다.
• 밖으로 나가는 행위도 상대적인 의미이다.
• 절대라는 것은 /에서 쓰이고 이 5500에서 쓰이는 것이기에 절대이다.
• /라는 의미는 5500이라는 루트경로에서 시작한다는 뜻이다.
• /는 최상위 경로에서 시작하기 때문에 그 어떤 파일에서도 할 수 있기 때문에 절대경로라고 한다.
• https://heropy.blog를 통해서도 이미지를 열 수 있었다
  이는 절대적으로 원격연결을 통해 이미지 파일을 여는 것이므로
  그때그때 바뀌는 것이 아닌 절대적으로 파일을 여는 것이다.
• vscode로 넘어가보자.
• 우선 ./를 한번 지워보고 해도 정상출력됨을 알 수 있다.
• 우리는 /하나만 써도 local을 쓰는것으로 5500이 생략되는 것을 알 수 있다.
• 이제 div 안의 hello를 없애보고 창분할을 한 후 main.css로 들어가보자.
• 이 css에서의 div는 선택자이다.
  여기서 width: 200px; height: 200px; background: url(”./images/logo.png”)를 하면
  상대경로로 이미지를 열어서 200px로 열라는 뜻이다.
• 이때 images라는 폴더는 밖으로 한번 나가야 하기 때문에 .이 아니라 ..을 써야 한다.
• 이렇게 해야 200px, 200px 의 백그라운드의 이미지를 출력할 수 있다.
• 이 이미지는 500px이미지이므로 css파일에서 500px로 바꾸면 제대로 이미지가 출력된다.
• 절대경로로 /하나만 써줘도 출력할 수 있다.
• 상대경로와 절대경로는 상황에 따라 효율성이 달라지므로 그때 그때 상황에 맞게 해결해보자.

 

📌느낀점

이미지 출력을 통해 상대경로와 절대경로에 대해서 배웠다.

상대경로와 절대경로는 이미 잘 알고 있는 내용이었지만 부속으로 배운 localhost :5500같은 내용은
뒤에 자세히 배우겠지만 역시 흥미로운 내용이다.
5500 포트에 대해서는 나중에 좀 더 배워보고 싶다.

---

⭕07. 페이지를 나누고 연결(링크)하기

📌강의 정리

• 링크라는 개념을 배워보자.
• vscode와 브라우저를반반으로 나눠서 잘 볼 수 있도록 하자.
• liveserver가 열려있으면 저장했을 시 바로바로 적용된다.
• a라는 태그를 만들어보자 그러면 href라는 속성도 같이 생긴다.
• href는 하이퍼텍스트레퍼런스 인데 이는 경로 속성이다.
• a href라는 태그에 https://naver.com 이후 NAVER로 하면 페이지를 이동시키는 a태그로 만들 수 있다.
• 한번 이동하고 나면 파란색이 보라색으로 바뀌는데 이는 한번 이동했다는 뜻을 의미한다.
• a href=”/”일때 앞에 현재프로젝트의 서버주소가 생략되어 있는 것과 같다.
• 지금은 개발용으로 서버를 열어둔거라 5500포트가 열려있는건데 우리가 업로드하면
  그때는 우리가 올리는 그 서버의 루트 주소가 생략되게 된다.
• a href=”/about/about.html” About을 해보자
• 그러면 브라우저에 NAVER과 같이 새롭게 생긴다.
• 이제 about이라는 폴더에 about.html을 만들고 !를 이용해서 about!!를 쓰고 파일을 만들어주자.
• 그러면 이제 브라우저에서 About을 클릭할때 우리가 만든 사이트로 넘어간다.
• about.html을 index.html로 바꿔주면 정상적으로 작동한다.
• 이후 아까 a태그에서의 a href=”/about”으로 바꿔주면 about폴더의 index.html을 열어준다.
• 브라우저는 자동으로 index.html을 찾기 때문에 about을 들어가고 index를 찾는것이다.
• 이후 about의 index에서 새로운 a태그를 통해 이름은 Home그리고 href를 “/”하면 다시 루트로 돌아간다. 메인으로
• 특정한 사이트를 우리가 만들때 이제 폴더를 만들어서 index를 만들어주며
  about페이지에서만 작동하는 css와 js를 쓸 수 있다.
• 페이지를 구별해주는 기술로 router가 있는데 이 때문에 about/으로 끝난다고 꼭 폴더로 끝난다 할 수는 없다.
• login이라는 폴더를 만들고 그 안에 index.html 을 만들어주고 a태그로 home으로 가는 기능
  그리고 메인에서 a태그로 login을 해주면 로긴 기능이 추가 되었다.

 

📌느낀점

정말 새로운 기능이다. 그냥 아무 생각없이 쓰던 index.html을 이런기능으로 이렇게 쓸줄이야

이번의 이 index를 이용해서 프로젝트가 진행될때 폴더들을 어떻게 나누고 가꾸며 진행할지를

대략적으로 알게 되었다.

그림이 그려지고 있다.

---

⭕08. 모든 파일 공백 크기 설정

📌강의 정리

• 이렇게 진행하면 기본적으로 공백이 4인것을 알 수 있는데
• 매번 바꾸려면 매우 귀찮다.
• 환경설정을 바꿔서 파일이 생성될때마다 공백을 2로 바꿔주면된다.
• 컨트롤 쉬프트 피 키로 설정을 들어가고 tab size를 들어가서 2로 바꿔주면 설정이 끝난다.

 

📌느낀점

간단하고 실용적인 기능이었다.

---

⭕09. 개발자 도구 사용하기

📌강의 정리

• 브라우저에서 제공하는 개발자도구의 간단한 사용법을 알아보자.
• elements, console 탭을 알아보자.
• 왼쪽 상단부의 select를 통해 클릭하면 element탭에 자동으로 styles를 통해 css를 알 수 있다.
• 그리고 여기의 style에서 수정을 하면 임시적으로 그 내용을 변경할 수 있다.
• 즉 새로고침을 누르면 다시 돌아간다.
• 개인블로그로 가서 셀렉트메뉴를 통해 아이콘들을 보면
• ul태그로 만들어진것을 알 수 있고 ul태그 내부의 화살표를 클릭하면 내부를 볼 수 있고
  클래스가 youtube, github, rss를 알 수 있다.
• style탭에서 선택자들을 통해서 ul이란 태그를 선택해서 그 내부내용들을 설정해준다.
• 체크되어있는것은 css가 적용되는것이므로 체크해제 해보며 어떤 내용들인지 확인해 볼 수 있다.
• 이런 분석방법은 비교적 쉽게 HTML과 CSS를 알 수 있다.
• 하지만 JS같은 경우는 복잡하여 알기 힘든경우가 많다.
• :hov를 쓰면 체크박스들이 나오는데 이 체크박스를 활성화하면 :hover를 통해서
  활성화시의 변경을 확인할 수 있다.
• 개발자 도구를 통해서 분석을 할 수가 있고 고차원적인것을 확인할 수 있다.
• computed탭을 선택해보면 이 요소가 style구성이 적용된 값들을 한눈에 잘볼수 있게 하는 박스모델을
  잘 볼 수 있게 해준다.

 

📌느낀점

프론트엔드에서의 HTML과 CSS를 좀 더 효율성 좋게 배우고 쓸 수 있는 방법을 배웠다.

이 내용 역시 전에 한번은 배웠던 내용이었는데 이번에 다시 배우는게 훨씬 폭넓었다.

다음에 더 자세히 배운다고 하니 기대가 된다.