poksul_log

[생활코딩] html 강의 정리(2) 본문

WEB_Frontend/html

[생활코딩] html 강의 정리(2)

soyw906 2022. 1. 29. 17:52

이전글 : 2022.01.29 - [Backend/html] - [생활코딩] html 강의 정리(1)

 

 

[생활코딩] html 강의 정리(1)

생활코딩 html&Internet 강의를 들으면서 배운 내용을 여기에 차근차근 정리해 보겠다. <해당 강의 링크> https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹..

soyw96.tistory.com

 

● 웹페이지 제목 표시

<title>your webpage title</title>

 

 

● <!doctype html> / <html> / <head> / <body>

<!doctype html> - document type이 html임을 나타내주는 태그. 최상위층에 하나 사용하는것이 약속

<html></html> - head와 body 전체를 담고 있는 단 하나의 최고위층 태그

<head></head> - body를 설명하는 내용을 담고 있음

<body></body> - "본문" 내용을 담고 있음

→ html 내 어떤 코드라도 head나 body 둘 중 하나에는 무조건 속해 있음

 

● 텍스트에 링크 달기

<a href="하이퍼링크">text</a> <!--href : hypertext reference-->

하지만, 이렇게만 쓴다면 새 창이 열리지 않고 내가 만든 페이지에 해당 링크 페이지가 열리게 된다.

따라서, 내가 현재 있는 페이지는 보존하면서 해당 링크 주소를 가진 새 창이 열리게 하고 싶다면 target을 사용한다.

 

● target

<a href="열고싶은 하이퍼링크" target="_blank">
  • _blank : 기존 창을 유지하면서 새 창 열기
  • _self : 현재 있는 윈도우창에 링크된 웹페이지 열기(default)
  • _parent : 부모 창에서 링크된 페이지 열기
  • _top : 가장 상위 창에서 열기

 

전체 사용 예시 코드)

<!DOCTYPE html>
<head>
<title>WEB1 - html</title>
<meta charset="utf-8"><!--utf-8로 문서를 읽어라-->
</head>
<body>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<ol>
    <li>soyw96</li> 
    <li>kirby</li>
    <li>studying_html</li>
</ol>
<h1>HTML이란 무엇인가?</h1>
<img src="KakaoTalk_20211231_152705252_02.jpg" width="40%">
<p><a href="https://www.w3.org/TR/html5" target="_blank" title="html5 specification">The HyperText Markup Language</a>, or HTML is the <strong>standard markup language for 
documents</strong> designed to be displayed in a <u>web browser</u>. It can be assisted by 
technologies such as Cascading Style Sheets (CSS) and scripting languages 
such as JavaScript.</p>
<p><p style="margin-top: 45px;"> browsers receive HTML documents from a web server or from local storage 
and render the documents into multimedia web pages. HTML describes the 
structure of a web page semantically and originally included cues for the 
appearance of the document.</p>
</body>

적용 화면)

 

'WEB_Frontend > html' 카테고리의 다른 글

[생활코딩] html 강의 정리(1)  (0) 2022.01.29
'WEB_Frontend/html' Related Articles more