- HTML : Hyper Text Markup Language ⇒ 웹페이지의 구조(무슨 요소가 어떻게 표시되는지 등)를 HTML으로 작성한다고 볼 수 있음.
- CSS : Cascading Style Sheets → 웹페이지의 디자인을 구현하는 데에 HTML과 함께 이용.
- 맥에서 단순하게 HTML 코드 작성하기 : TextEdit 앱 사용
⇒ 설정: 상단 바에서 Format > “Make Plain Text” option & 설정의 “Open and Save” > “Display HTML Files as HTML code instead of formatted text”
⇒ 파일 작성 후 저장 시.htm혹은.html확장자로 저장 & UTF-8 encoding 선택
⇒ TextEdit으로 작성한 HTML 코드 파일을 열 때, 두번째 사진과 같은 웹페이지의 형식으로 나타남.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- 모든 HTML 문서의 시작 - document type declaration(문서 형식 선언)
:<!DOCTYPE html> - 그 뒤에는
<html>태그가 뒤따르며, 문서의 가장 마지막에는</html>태그로 문서의 끝을 표시 - 사용자에게 보이는 가시적인 부분을 담당하는 코드는
<body>…<!body>사이에 있다. (그 안의<h1>과<p>은 각각 제목과 본문을 보여주는 HTML 요소들.)
HTML elements (HTML 요소) :
- 시작 태그부터 끝 태그까지의 전체를 HTML 요소라고 함.
<tagname>content</tagname>(e.g. 위 코드에서<h1>My First Heading</h1>그리고<p>My first paragraph.</p>이 해당하며 사실상<html>과<head><body>도 요소라고 볼 수 있음.) (HTML 요소의 끝 태그(end tag)를 생략해도 코드가 돌아갈 때도 있지만 … 가급적이면 쓰는 것을 잊지 말자!)
- 한 HTML 요소 안에 다른 HTML 요소가 중첩되어 있다. (HTML elements can be nested) ⇒ HTML 문서는 문서 형식 선언 뒤, 핵심 요소(root element)인
<html>태그와 그 안의<body>안에 중첩된 여러 기타 HTML 요소로 구성되어있다고 볼 수 있음.
- 하나의 태그만으로 구성된 기타 HTML 요소 :
<br>: 줄바꿈을 하게 하는 요소<hr>: 가로로 된 구분선을 표시하는 요소
기본적인 HTML 요소들
- HTML 제목 (Headings) : 제목 크기에 따라 태그
<h1>~<h6>까지 있음. ➡️ 서치엔진이 제목을 이용해 웹페이지 내용을 구조화하고, 웹페이지 유저도 제목으로 웹을 훑곤 하기에 제목은 중요! 단순 텍스트 크기를 크게 하려고 heading을 쓰는 것은 권장하지 X.- 제목 폰트 크기 수정 -
<h1 style=“font-size:60px;”>Heading 1</h1>
- 제목 폰트 크기 수정 -
- HTML 본문 (Paragraph) : 본문은
<p>태그로 정의됨, 본문은 항상 새로운 줄에서 시작함. :<p> content </p>
- HTML 링크(URL) : URL은
<a>태그로 정의됨
e.g.<a href=“[https://example.url](https://example.url/)”>attribute-url name</a>
- HTML Image :
<img>태그와 함께 소스 파일src, 대체 텍스트alt, 너비와 길이width&height을 제공. :
e.g.<img src=“name.jpg” alt=“text” width=“104” height=“142”>→ 넣고자 하는 이미지가 html 코드 파일과 같은 위치에 있어야 함 - 종합 예시 코드 및 페이지
<!DOCTYPE html> <html> <body> <h1>The Biggest Header</h1> <h2>The Smaller One</h2> <p>now the paragraph</p> <h6>The Smallest Header</h6> <p>for the GitHub link: </p> <a href="https://github.com/h-seo-n/Scream-Jar">Scream Jar URL</a> </body> </html>
실제 웹사이트에서 우클릭 후 검사(inspect)를 누름으로써 HTML 요소를 코드로 확인할 수 있다.
전체 소스 코드는 Ctrl + U 또는 우클릭을 하고 "페이지 소스 보기"를 누름으로써(view page source) 가능하다.
HTML Attributes (HTML 속성) :
- HTML 요소에 대해 추가적인 정보를 제공하는 코드로, HTML 요소의 시작 태그 안에 작성된다. 주로
name=“value”의 형태로 작성됨.
예시 :
- url 링크 요소의 속성들
href: URL 요소에서 페이지의 주소를 명시함 e.g.<a href=“[https://example.url](https://example.url/)”>url name</a>
target: url을 어디서 열지 명시하는 속성 (명시하지 않으면 현재 열린 브라우저에서 엶)target=”_self”: 디폴트 값, 클릭된 브라우저 창에서 열림_blank: 새 브라우저 창에서 링크가 열림_parent: 현재 창이 프레임으로 구성되었을 때 부모 프레임(parent frame)에서 링크가 열림_top: 현재 창이 프레임으로 구성되었을 때 모든 프레임이 사라지고 전체 화면에서 링크 페이지가 열림 (참고: https://m.blog.naver.com/mathesis_time/222039284932)
- 이미지 요소의 속성들 :
-
src: 이미지의 주소를 명시(외부 웹에 있는 이미지의 경우 url을 입력하거나, 현재 웹 내부에 이미지를 두고 현재 웹의 주소에 대한 ‘상대적인 url(relative url / e.g.src=“/images/img_girl.jpg”)’를 입력) -
width,height: 너비, 높이 /alt: 대체 텍스트(alternative text)e.g.
<img src=“name.jpg” alt=“text” width=“104” height=“142”>
-
lang: html 요소의 시작 태그 안에서 웹페이지의 언어가 무엇인지 알려줌. 첫 두 글자는 언어를, 뒤 두 글자는 국가를 명시.
e.g.<html lang=“en-US”>
title: html 요소의 이름을 지정한다고 할 수 있음. 웹페이지에서 요소에 마우스를 갖다댔을때 tooltip(설명 메시지)를 나타나게 함.
<p title=“I’m a tooltip”>This is a paragraph.</p>
⇒ Attribute 작성 시 name="value"에서 이름을 소문자로 적기를 권장, 그리고 값을 따옴표로 감싸주기를 권장.
다시해보자.