본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

 

생활코딩

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.

www.youtube.com

생활코딩 사이트

 

생활코딩

hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은

opentutorials.org

"어떤 문제가 우리 삶에서 중요하고 심각할 수록

그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."

(생활코딩 : Web1 -1 수업소개. 중)


#0.

사실, 개인적으로 요즘 자바 스크립트에 관심을 가지고 있습니다!

개인적으로 지금 학습하고 있는 내용을 빨리 끝낼려고 합니다.

그러면, 달려볼까요? 가시죠!

 

#1.

저번에 보았던 빈도수 표를 기억하시나요?

사실 저희는 html 문법을 마스터 했다라고 표혀할 수 있을 정도로, 다양한 문법을 익혀왔습니다.

그럼에도 빈도수 표 상위항목을 지키고 있는

head, body, html, title, meta 에 대해서는 아직 학습하지 않았는데요,

이 슈퍼스타들을 살펴보러 갑시다.

 

#2.

먼저 tilte 태그입니다.

title 태그는 문서(페이지)의 제목을 지정해주는 테그로, 검색엔진이 웹페에지를 분석할 때 정말 중요히 생각합니다.

<title> </title>

또, 간혹 영어가 아닌 문자로 웹페이지를 작성하면 문자가 깨지는 경우가 있을 수 있습니다.

(특히 자바로 dynamic web을 구현할 때 흔히들 확인하실 수 있으시죠?)

<meta charset="utf-8">

이 메타 태그를 문서의 head에 추가해주신다면, 그 문제를 해결하실 수 있으실 겁니다.

이 문서는 UTF-8로 만들어졌으니, UTF-8로 열어라! 라는 뜻을 함유하고 있습니다.

(시간이 남는다면 다음엔 UTF에 대해서 공부하도록 할까요?)

이 두 태그는 본문이 아닌, 본문을 설명하는 태그입니다.

HTML의 태그는 기본적으로 HTML 태그로 감싸지면서,

본문을 설명해주는 head와 본문인 body로 나뉘어집니다.

<html>
<head> 본문을 설명해주는 내용 </head>
<body> 본문 </body>
</html>

또한, 이 웹페이지가 HTML로 만들어졌다는 것을 표현하기 위해서 문서의 시작에 아래와 같이 코드를 추가합니다.

<!doctype html>
<html>
<head> 본문을 설명해주는 내용 </head>
<body> 본문 </body>
</html>

위와 같은 구조가 웹페이지의 기본 뼈대라 할 수 있습니다.

 

#2.

지금부터 실습해볼 태그에 대한 설명입니다.

태그가 웹의 왕국이라면, 이 태그는 왕국의 제왕입니다.

현대의 HTML은 150여개의 태그로 이루어져 있지만, 이들 모두 이 태그의 아래에 있습니다.

 이 태그가 없었다면, 검색엔진은 존재할 수 없었을 것입니다.

혹시 눈치 채셨나요?

HTML, HyperTest Markup Language의 HyperText가 바로 이 태그입니다.

이 태그의 이름은 auchor의 첫글자 a입니다.

a 태그는 무엇을 의미할까요?

네, 링크입니다.


 

HTML 공식 사용설명서 

 

HTML Standard

 

html.spec.whatwg.org

ctrl + f : html link


<a href="https://xd-jaewon.tistory.com/" target="_blank" title="link example">XD_Diary</a>

천천히 그 구성을 살펴 보겠습니다.

a href 이후에는 이동할 주소를 나타내고 있습니다.

targer="_blank"는 새창에서 그 링크를 띄우겠다는 속성입니다.

title은 링크에 대한 설명을 나타내줍니다.

정리하면 'XD_Diary'로 표현되는, 제 블로그로 새창으로 이동하는 링크가, link example로 설명되고 있습니다.

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기