https://opentutorials.org/course/2039
HTML 수업 - 생활코딩
수업의 목적 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 웹애플리케이션 만들기 위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다. 진도 우리 수업에서는 기본적이고, 중요한 것을 앞에 ...
opentutorials.org
강의 내용 요약
기술 소개
HTML (Hypertext Markup Language)
- Hypertext : 웹 브라우저에서 링크의 기능을 하는 것
- Markup : 문법적인 특성
→ HTML이란 하이퍼텍스트를 가장 중요한 특징으로 하는, 마크업이라는 형식을 가진 컴퓨팅 프로그래밍 언어를 의미한다.
이렇게 정리하니까 한 눈에 이해가 잘 안되어서 구글링을 해보았다.
그러니까 HTML은 웹문서를 만들기 위한 기본적인 웹 언어이고, 하이퍼텍스트를 작성하기 위해 만들어진 언어인 것이다.
기본 문법
HTML 에 대해서 배우는 과정에서는 '태그'라는 개념이 사용되었다. 태그는 HTML 문서를 구성하는 명령어이고, 태그를 통해서 특정 HTML 로 만들어진 웹문서의 글자 크기나 모양 등을 바꿀 수 있다.
영상에선 다른 문구로 예시를 들었지만, 나는 내가 좋아하는 문구로 태그를 나타내보겠다.
세상을 변화시키고 싶다면, 침대부터 정리하라
윌리엄 H. 맥 레이븐 제독
이 글귀를 메모장에 옮겨서 HTML 확장자로 저장해보았다.
저장한 파일을 실행하니 이렇게 웹 브라우저에 웹문서가 떴다.
이제 태그를 이용하여 위의 인용문과 똑같은 형태로 웹문서를 수정해보겠다.
이렇게 html 태그를 사용해서 글씨 크기와 형태에 변화를 주어 보았다.
이렇게 글씨의 굵기를 조절하는 strong 태그, 헤드리안을 만드는 h1 태그를 이용해 웹문서를 수정해 보았다.
태그 사용은 <태그> 태그 대상 </태그> ' 다음과 같이 이루어지는 것을 알 수 있다.
사용되는 HTML 태그는 구글링해보면 알 수 있겠지만 더욱 많다.
하이퍼텍스트와 속성
<a> 라는 html 태그는 웹 페이지나 외부 사이트와 연결하는 태그이다. 'anchor(닻)' 에서 비롯되었으며, 특정 URL에 정박되어있다 와 같은 의미로 쓰인다고 한다.
<a>윌리엄H. 맥 레이븐 제독</a> 이걸 링크로써 사용하기 위해서, 안에 태그 내용이 어떤 웹페이지에 연결되어야 하는 링크인지에 대한 정보가 필요하다.
이 점을 충족시키기 위해
다음과 같이 코드를 수정한다.
이렇게 특정 단어를 링크로 사용하기 위해서는 두가지 정보가 필요하다
첫번째는 <a>태그를 사용하여 '윌리엄 H. A맥 레이븐 제독' 부분이 링크임을 나타내고, 두번째로 href 라는 속성의 값으로 특정 사이트의 URL을 정의해주면
다음과 같이 링크가 걸려진 것을 알 수 있다.
여기서 속성은 순서가 크게 상관이 없고, 중복으로 주렁주렁 달 수 있다.
다음처럼 말이다.
1960년대 Markup의 시초라고 할 수 있는 GML이 탄생하고, SGML을 거쳐 SGMLguid 언어가 등장하게 된다. 팀 버너스 리는 SGMLguid의 17개 태그에 <a> 태그를 추가하여 HTML을 만들게 되었다.
태그의 중첩과 목록
태그들을 중첩해서 사용하는 경우로 어떤 것을 할 수 있고, 왜 중첩해서 사용해야 할까.
이를 알아보기 위해 list 태그를 사용해서 목록을 만드는 프로그램을 만들어 보자.
이렇게 list 태그로 항목 하나하나를 감싸서 실행해주면
이렇게 목록이 세워진 것을 볼 수 있다.
난 내일 살 것도 이 웹 문서 안에 저장시켜서 만들고 싶다. 여기서 <list> 태그만으로는 Grouping을 할 수 없기 때문에, <ul> 태그를 사용하여 내일 살 것 그룹을 만들어 본다.
<ul> 태그를 사용하면 다음처럼 항목들이 Grouping되는 것을 볼 수 있다.
여기서 <ol>태그를 사용하면 사야 할 품목들을 순서대로 표시하는 것에 쓸 수 있다.
다음과 같이 말이다.
여기서 <ol>은 ordered list이고 <ul>은 unordered list라고 알아두면 태그를 이해하는데 도움이 될 것이다.
문서의 구조
<title> 태그를 이용해서 탭의 제목을 표시할 수 있고, 경우에 따라서 웹문서의 글씨가 깨지는 현상이 일어날 수 있는데 이는 <meta charset = "utf - 8" > 태그를 통해 해결할 수 있다.
그리고 <title>과 <meta>태그는 <head>태그 밑에 넣도록 약속되어있고, <h1>, <o1> 태그들은 <body>태그 밑에 들어가도록 되어있다. 이렇게 태그들은 <head>의 밑에 들어오는 태그와 <body> 의 밑에 들어오는 태그로 나눌 수 있다.
그런데 이들을 감쌀 수 있는 고위직 태그가 있는데, 그것이 바로 <html>태그이다.
이런 식으로.
추가적으로 <head>와 <body>, 그리고 <html>태그의 정확한 역할이 무엇인지 궁금하여 구글링을 해보았다.
<html>은 웹페이지의 시작과 끝을 알리는 태그이며 <head>는 웹페이지의 정보, 문서에 사용할 이부 파일을 링크할 때 사용. <body>는 브라우저에 실제 표시되는 내용을 표시하는 태그였다.
DOCTYPE
DOCTYPE(Document type declaration)
의역하면 문서 유형 선언이다. 즉 자신이 작성한 html 코드가 어떤 방식으로 작성되었는지 브라우저에게 선언하는 문자이다.
브라우저는 태그가 어떤 표준에 따라서 제정된 태그인지를 알 필요가 있다. 그래서 이 DOCTYPE은 브라우저에게 이 태그가 어떤 표준을 따른 태그인지를 알려주는 역할을 한다.
웹 사이트 만들기
html을 이용하여 웹 사이트를 만드는 실습을 하였다. 위에서 배운 태그들을 응용하여 페이지를 만들었고, 결과물은 다음과 같다.
단락 - P
<P> 태그란? Paragraph, 즉 단락의 줄임말으로서 글의 단락을 나누게 하는 역할을 한다. 이러한 <p> 태그는 일정한 간격으로 줄바꿈을 하도록 디자인되어있으며 더 다양한 태그를 통해 단락을 나누는 것을 구현할 수 있다.
이렇게 단락마다 <p>태그를 입력해주면 웹문서에도 다음과 같이 단락이 나누어진다.
줄바꿈 - br
br은 A forced line-break의 줄임말이다. 강제로 줄을 바꾸는 것이라 할 수 있다. <br>태그는 void element, 즉 내용이 없는 태그이다. 단순히 줄바꿈을 의미하는 태그이기 때문에 <태그> 태그 내용</태그> 다음 형식을 따르는 다른 태그와 달리 <br>만 단독으로 쓰여도 줄바꿈이 가능하다. 중복으로 사용하여 단락을 더 띄우는 것도 가능하다.
이런 식으로.
이미지 - img
웹 페이지에 이미지를 표시하는 법을 알아보자.
scr 속성을 통해 이미지를 부를 수 있고, height와 width 등으로 크기 조절이 가능하다. alt는 alternative text의 약자로 이미지가 꺠지거나 쓸 수 없을 때 대안으로 출력하는 text를 정의해주는 역할을 한다. title이라는 속성을 통해 사진에 마우스를 갖다 대면 tooltip으로 도움말이 나오게 할 수 있다.
다음과 같이 말이다.
'Other > Web Hacking' 카테고리의 다른 글
| IGRUS 웹해킹 4주차 과제 #PHP #워게임 (0) | 2021.01.28 |
|---|---|
| IGRUS 웹해킹 3주차 과제 #워게임 (0) | 2021.01.28 |
| IGRUS 웹해킹 2주차 과제 #워게임 (0) | 2021.01.27 |
| 웹 해킹 멘토링 과제 #PHP (0) | 2021.01.27 |
| IGRUS 웹 해킹 1주차 과제 (0) | 2021.01.27 |
