정원영

정원영

항상 배우고 싶은 개발자입니다.

Category

HTML 2. Web,HTML

업데이트:
1 분 소요

Web,HTML

HTML

alt

  • 하이퍼텍스트를 마크업하는 언어

하이퍼텍스트

alt

  • 정해진 순서 없이, 참조를 통해 한 문서에서 다른 문서로 접근할 수 있는 텍스트
  • 핵심기능 : 하이퍼링크
    • 웹 페이지에서 링크를 누르면 다른 페이지로 이동.
  • 웹 페이지 구조를 나타내는 마크업 언어.

HTML 기본 구조

<!DOCTYPE html>     
<html lang="ko">    
<head>              
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Insert title here</title>    
</head>
<body>
    <p>Hello World</p>
</body>
</html>

alt

DOCTYPE

  • 문서 유형에 대한 브라우저의 정보, HTML5 사용한다.
  • 페이지 정보(메타 데이터) 제공

viewport

  • 요소를 볼수 있는 화면

width=device-width, initial-scale=1.0

  • 스코롤 기능 제공 갖고 있는 기기 화면에 맞춘다 의미임.

title

  • 문서 제목 표현

태그 (tag)

  • 꼬리표라는 뜻.
  • HTML에서 웹 문서에 정보를 정의해주는 형식.
  • 태그로 데이터를 감싸서 데이터 형식과 의미를 브라우저에 알려줌.
  • <>로 감싸 표현함.
  • <>는 시작을, </>는 끝을 알려줌.

VSCode 확장 프로그램 설치하기

  • Auto Close Tag
  • HTML SNippets
  • Live Server
  • Material Icon Theme
  • Prettier - code formatter

HTML 특수 문자

    &nbsp;          공백
    &lt;        <   less then
    &gt;        >   greater then
    &amp;       &   앰퍼샌드(Ampersand)
    &quot;      "   쌍따옴표
    &#039;      '   단따옴표
    &copy;      ©   저작권 기호

...
<body>
	<p>
		(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)<br />
		&lt;body&gt;	태그가 의미하는 것은요?<br />
		&quot;기상청 5월 2째주 예보&quot;<br />
		&#039;HyperText Markup Language&#039;<br/>
		HTML &amp; CSS<br/>
		copyright &copy;
	</p>
</body>
...

alt

URL 주소와 경로

웹에서 사용되는 URL

  • Uniform Resource Locator
  • 인터넷 상 존재하는 자원인 HTML, 이미지, 오디오, 동영상 파일 등 위치

상대 경로

  • 현재 HTML 문서 파일의 위치 기준으로 상대적인 위치에 있는 파일을 찾아가는 방식

...
<body>
	<h2>이미지 파일의 상대 경로</h2>
	<img alt="fish" src="fish1.jpg">
			fish
			
	<img alt="fish2" src="img/fish2.jpg">
	
			fish2
	<img alt="fish3" src="img/test/fish3.jpg">
			fish3
	<img alt="fish4" src="../fish4.jpg">
	
			fish4
			
</body>
...

alt

절대 경로

  • HTML 파일이 존재하는 위치와 상관없이 절대적인 URL 주소를 사용하게 됨
  • http://로 시작하는 도메인 네임이 포함된 인터넷 상 유일무이하고 절대적 URL주소

...
<body>
	<img alt="android13" 
	src="https://developer.android.com/about/versions/13/images/android-13-hero_720.png">
</body>
...

alt

audio


...
<body>
	<audio controls="controls">
		<source src="sound1.mp3" type="audio/mpeg">
	</audio>
</body>
...

alt

video

...
<body>
	<video controls="controls" width="320" height="240">
		<source src="movie1.mp4" type="video/mp4">
	</video>
</body>
...

alt

태그:

카테고리:

업데이트:

댓글남기기

참고