어떤 문제가 심각하고 중요할수록 그 문제를 해결해주는 공부는 문제로부터 우리를 해결해줄것이다.
반대로 그 문제가 우리 삶과 동떨어져 있고 사소할수록 공부 자체가 삶의 문제가 되어서 우리가 해방시키기는 커녕 억압할 것이다.
자신의 뇌를 이기는 장사는 없다. 공부의 효용을 뇌에게 자주 증명해보이면 뇌는 공부를 좋아하게 될 것이고, 공부를 좋아하게 되면 노력하지 않아도 우리는 공부할 것을 찾을 것이다.
-유튜브 '생활코딩' 中
어떤 쪽이 사람이 하는 일이고, 어떤 쪽이 기계가 하는 일 일까?
어떤 것이 원인이고, 어떤 것이 결과일까?
오른쪽의 사람이 하는 일, 원인을 부르는 표현이 code, source, language
왼쪽의 기계가 하는 일, 결과를 부르는 표현이 application, app, program, webpage, website 이다.
이런 다양한 표현들은 같은 대상을 바라보는 관점에 따라 조금씩 표현이 달라지는 것에 불과하다.
즉 원인을 통해 결과를 만든다는 것이 코딩의 핵심.
우리가 하고자 하는 일은 웹페이지를 만드는 것이며, 웹 페이지를 만드는 코드가 HTML이라는 코드이다.
HTML은?
- 쉽다.
- 중요하다.
- 저작권이 없는 public domain이다.
우리는 하루에 백 번 이상 웹페이지를 보고 있고, 인류의 거의 모든 디지털 정보가 담기는 가장 거대한 글이 웹이기 때문에 웹페이지를 만드는 html 컴퓨터 언어는 중요할 수 밖에 없다.
웹을 만든 팀 버너스리는 웹을 어떠한 저작권도 없는 public domain으로 선언했으며, 그래서 구글, MS, 애플, 네이버 등의 거대한 회사들이 각자 브라우저를 만들 수 있게 되었고 우리는 여러 브라우저에서 똑같이 볼 수 있게 되었다.
웹은 특정 기업이 독점하지 않기 때문에 계속 살아남을 가능성이 높은 기술이다.
HTML로 웹을 만드려면 웹 브라우저와 코드를 작성하는 프로그램 에디터가 필요하다.
2021년 기준 HTML editor 순위는 다음과 같다.
여기서 Visual Studio Code를 이용해서 코드를 작성해 볼 것이다.
html을 작성할대는 폴더를 선택하고, 그 폴더 안에 파일을 만들어서 작성하며 확장자를 .html로 한다.
Ctrl+O를 입력하면 쉽게 폴더를 찾을 수 있다.
html을 지배하는 문법은 '태그'이다. 태그(tag)는 HTML 요소(element)라고도 부르며 HTML 문서를 구성하는 기본 단위이다. 옷을 설명하는 옷에 붙은 택 처럼, 태그는 해당 문장을 설명하는 기능을 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
//여기서 <></> 부분이 태그이다HTML에는 150개 이상의 태그들이 존재한다. 우리는 태그가 무엇인지만 알고 있으면 검색을 통해 찾아낼 수 있다. 밑천으로써 가지고 있을만한 태그는 무엇일까?
자주 사용되는 태그의 순위는 다음과 같다.
의미에 맞게 태그 사용하기
기초가 중요하다는 말은, 응용으로 가는 과정으로써 기초가 중요하단 말이기도 하지만
기초만으로 중요할 때도 있다. 기초만으로 할 수 있는 일에 대해 알아보자.
글을 쓸 때 내부적으로는 어떤 일이 일어나고, 일반인과 지식인은 글을 쓸 때 어떤 차이가 있을까?
편집기를 이용해서 글을 쓴다는 것은 내부적으로 html 코드를 생산한다는 의미이다.
두 개의 coding은 눈으로 보기에는 같아 보이지만 위의 coding은 <p>태그로, 아래의 코딩은 <h3>태그로 작성한 것이다.
<span style="font-size:24px">
coding</span>
//일반인이 글을 쓸 때 (시각적으로 제목처럼 보임)
<h3>coding</h3>
//지식인이 글을 쓸 때 (제목을 뜻함)웹 페이지를 예쁘게 만들고 싶다는 생각에 문자까지 이미지용으로 만들어 정보에 맞지 않는 태그를 사용하면,
검색엔진에게는 존재하지 않는 정보가 된다.
html을 의미에 맞게 정확히 사용한다는 것은 비즈니스 측면에서 굉장히 중요한 문제를 갖는다.
태그의 속성
이미지를 웹 페이지에 포함시킬 때 사용하는 태그는 <img>이다.
하지만 <img>만으로는 태그가 동작하지 않는다.
태그의 이름 만으로는 정보가 부족할 수 있다. 이 때는 어떤 이미지인지 알려주도록 약속된 속성 source(src)를 사용하여 이미지에 대한 정보를 추가해주면 문서에 이미지를 추가할 수 있다.
즉, 태그의 이름만으로 정보가 부족할 때 속성을 사용한다.
<img>태그는 폴더 안에 이미지를 넣고 속성으로 이미지 정보를 추가해주면 된다.
부모 태그, 자식 태그
태그가 서로 포함관계로 연관되어 있을 때 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 부른다.
태그들은 서로 부모와 자식의 관계가 바뀌기도 하지만,
어떤 태그들은 자식 있는 곳에 항상 특정 부모가, 부모 있는 곳에 항상 특정 자식이 있다.
list
<li> 태그는 리스트를 나타내는 태그로 해당 리스트를 그룹으로 묶어주는 부모 태그 <ul> 혹은 <ol>을 가지고 있다.
부모태그 <ul>혹은<ol>은 반드시 자식 태그 <li>를 가지고 있다.
<ul>태그 : un ordered list
<ol>태그 : ordered list
list는 이렇게 2대가 함께 다니며, 3대가 함께 다니는 표(테이블)을 작성하는 태그도 있다.
문서의 구조 및 체계
문장이 모이면 페이지가, 페이지가 모이면 책이 된다.
책에는 표지가 있고, 표지엔 제목과 저자가 표기된다.
이처럼 정보가 많아짐에 따라 정보를 잘 정리정돈 하기 위한 체계 및 구조가 필요해진다.
그 구조를 만드는 방법에 대해 알아보자.
- <title> 웹페이지 제목을 사용자에게 명시적으로 알려주며, 검색 엔진은 title을 책 표지와 같은 정보로 사용한다. 본문을 설명하는 부분이다.
- <utf-8> 글씨가 깨지지 않게 해준다. 본문을 설명하는 부분이다.
- body : 본문을 묶을 때 사용한다.
- <head> 본문을 설명하는 부분을 묶을 때 사용한다.
- <html> head와 body 모두를 묶을 때 사용한다.
- <!doctype html> 이 문서는 html이라는 것을 뜻하는 관용어이다.
<!doctype html> //이 문서는 html로 작성되었다.
<html>
<head>
//본문을 설명
<title>WEB1 - html</title>
<meta charser="utf-8"> //utf-8로 문서를 읽어라
</head>
<body>
//본문
<h1>제목</h1>
<p>단락1</p>
</body>
</html>이렇게 head와 body 태그로 본문을 나누고 구조를 잡을 수 있다.
<a>
<a>태그는 서로 연관된 웹 페이지와 웹 페이지를 연결하는 역할을 하며, 이렇게 엮어서 한 권의 책을 완성한다.
HTML의 HyperText를 뜻하며 링크이다.
도시의 길 혹은 사람의 혈관 같은 아주 중요한 태그이다.
<a>태그는 속성이 필요한 태그이다. 속성 href는 hypertext의 t와 reference의 ref를 뜻하며, 옆에 주소를 적어주면 링크를 클릭했을 때 해당 주소로 이동한다.
새 창에서 열게 하는 target="_blank" 속성과 설명 풍선을 나타내는 title="설명" 속성도 사용 가능하다.
<img src="이미지.jpg" width="100%">
<a href="https://ko.wikipedia.org/wiki/%EC%83%A4%EB%84%AC" target="_blank" title="chanel link">
이미지는</a>
해당 게시글은 '생활코딩' 님의 MySQL 강의를 참고하였습니다.
'WEB' 카테고리의 다른 글
| WEB(5) : Java Script - 배열, 함수, 객체 (0) | 2021.12.21 |
|---|---|
| WEB(5) : Java Script - 조건문, 반복문 (0) | 2021.12.21 |
| WEB(4) : Java Script - event, querySelector() (0) | 2021.12.21 |
| WEB(3) : CSS (0) | 2021.12.19 |
| WEB(2) : 웹의 역사와 웹 서버(Web Server), 웹 호스팅(Web hosting) (0) | 2021.12.14 |
