◎ html 의 구성
html 문서는 head 태그와 body 태그로 이루어져 있다. head 부분에는 페이지의 제목이나 문서의 형태와 같은 정보가 들어가고, body 부분에는 웹페이지에 실제로 출력되는 내용이 들어간다. head 부분을 살펴보면, <meta charset = "utf-8"/> 이라고 되어 있는데, 이는 한글을 출력하기 위함이다. 영어나 숫자와 같은 문자는 ascii 코드로 출력할 수 있지만 한자, 한글과 같은 문자들은 utf-8을 이용해야 한다.
<html>
<head> <!-- tag 주석-->
<meta charset="utf-8"/>
<title>나의 첫번째 타이틀</title>
</head>
<body>
hello world,,
bye world,,
</body>
</html>위 코드를 실행하면 아래와 같은 페이지가 생성된다. 웹페이지의 주소를 보면 127.0.0.1:5500이 보이는데, 여기서 127.0.0.1은 자기 자신을 가리키고, 5500은 포트 번호를 가리킨다.
vscode에서 html 코드를 작성한 후, Live Server를 다운 받아서 실행해 줬다.
open with live server를 실행하게 되면 vscode 에서 작은 웹서버를 돌려서 작성한 html을 chrome 브라우저에 띄워준다.
◎ html 동작 원리
먼저 웹브라우저와 웹서버에 대해 알아보자.
웹브라우저는 html 문서를 출력하는 그래픽 사용자 인터페이스 기반의 소프트웨어로, 그 예시로는 chrome, whale 등이 있다.
웹서버는 웹 브라우저로부터 http 요청을 받아들이고, html 문서와 같은 웹 페이지를 반환하는 프로그램으로, 그 예시로는 naver ,google 등이 있다.
웹브라우저에서 웹서버에게 페이지 요청하면 웹서버에서 html로 기술된 문서를 준다.
이걸 웹브라우저가 받아서 html 코드를 이해해서 그려주는데, 이를 렌더링이라고 한다.
heading
링크 태그
인풋
헤딩과 다르게 줄바꿈이 자동으로 되지 않음
전체 코드
<html>
<head></head>
<body>
<!-- input -->
<input type="text">
<button> 가입 </button>
<!-- heading h1, h2, ... h6 -->
<h1>H1 입니다.</h1>
<h2>H2 입니다.</h2>
<h3>H3 입니다.</h3>
<h4>H4 입니다.</h4>
<h5>H5 입니다.</h5>
<h6>H6 입니다.</h6>
<!-- anchor tag의 attribute, href : hypertext reference -->
<a href="https://www.google.co.kr"> 구글 </a>
</body>
</html>
ul - unordered list (순서 없는 리스트)
ol - ordered list (순서 있는 리스트)
hr( 수평 나눔선 추가)
img
alt 자리에는 사진을 표시하지 않을 때 표시할 내용을 적으면 된다.
이는 tts로 웹사이트를 읽는다고 할 때, 사진을 대체하여 읽어줄 때 사용하거나,
사진을 띄우지 않고 누르면 이미지를 띄우거나 다운로드 받도록 하는 일부 웹사이트에서 사용된다.
'CS' 카테고리의 다른 글
| 클라우드 관련 용어 정리 (0) | 2023.02.17 |
|---|---|
| 클라우드의 분류 (0) | 2023.02.10 |
| 클라우드의 정의 (0) | 2023.02.07 |
| javascript 기초 (0) | 2022.07.07 |
| HTML 기초 (0) | 2022.07.05 |