1. HTML 기본 구조
<!DOCTYPE html>
<html>
<head>
<title>My Web</title>
</head>
<body>
<h1>What is Web?</h1>
<p>This is Web.</p>
</body>
</html><!DOCTYPE html> : 현재 문서가 HTML5 문서 타입임을 명시한다.
<html> : HTML 문서의 루트(root) 요소를 정의한다.
HTML로 작성된 모든 내용은 <html>과 </html> 사이에 있어야 한다.
<head> : HTML 문서의 메타데이터(metadata)를 정의한다.
메타데이터란 HTML 문서에 대한 정보로, 웹에는 직접적으로 표현되지 않는 정보이다.
<head> 안에는 <title>, <meta>, <style> 등이 있다.
<title>은 웹의 제목을 나타낸다.
<body> : 웹을 통해 사용자에게 보여지는 내용(content) 부분이다.
2. 목록 태그
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>ul 태그 : 순서가 없는 목록 - 글머리 기호를 붙여서 목록을 만든다.
ol 태그 : 순서가 있는 목록 - 번호 형식으로 순서를 매기며 목록을 만든다.
li 태그 : 목록의 내용이 되는 실질적인 태그로, ul 태그와 ol 태그 내부에서 사용된다.
3. 이미지 삽입
<img src="image.jpg" width="100%">src="image.jpg" width="100%
이 부분은 속성, Attribute라고 부른다.
태그의 이름만으로 정보가 부족할 때는 위와 같은 속성을 사용해서 더 많은 의미를 부여할 수 있다.
4. 링크로 웹 페이지와 웹 페이지 연결하기
<a href="https://www.google.co.kr/" target="_blank" title="Google">Google</a><a> 태그의 속성
(1) href : 연결할 웹 페이지의 주소 지정
(2) target : 연결된 주소로 이동할 때 어떤 방법으로 열 지 지정
target="_self" - 현재 창에서 링크 열기 (설정하지 않을 시 기본값으로 적용)
target="_blank" - 새 창에서 링크 열기
(3) title : 태그에 대한 설명 표시
마우스 오버시 title에 적힌 내용이 보임
5. 웹호스팅
Host : 인터넷이 연결되어 있는 각각의 컴퓨터
Hosting(=Cloud) : 인터넷이 연결되어 있는 컴퓨터를 빌려주는 비즈니스
Web Hosting : 컴퓨터의 웹 서버처럼 웹이 동작하기 위해 필요한 소프트웨어까지 설치해서 빌려주는 비즈니스
'3-2기 스터디 > 프론트엔드 입문' 카테고리의 다른 글
| [6주차] JavaScript (2) (0) | 2022.06.23 |
|---|---|
| [5주차] JavaScript (1) (0) | 2022.06.23 |
| [4주차] CSS (2) (0) | 2022.06.21 |
| [3주차] CSS (1) (0) | 2022.05.04 |
| [1주차] HTML (1) (0) | 2022.04.07 |
댓글