IT/따로 공부
[HTML] 기본 정리(1)
ziasu
2021. 8. 18. 13:49
반응형
HTML(HyperText Markup Language)이란...?
- 웹을 통해 볼 수 있는 문서를 만들 때 사용
- Hypertext: 다른 문서를 연결하고 있는 문서의 일부분
ex) 네이버 영어사전에 happy를 검색하여 보다가 동의어인 delighted단어를 클릭하면 delighted에 관한 정보가 있는 페이지로 이동 가능
- Markup Language: Mark 혹은 Tag로 둘러싸인 언어로 Mark 혹은 Tag를 통해 문서나 데이터 구조를 명시
ex) <h1>오늘의 목표 </h1>이면 '오늘의 목표'가 큰 제목임을 의미
<a> 태그
- <a href ="_________"> 여기로 </a>이런 느낌으로 코드를 작성했을 때, '여기로' 텍스트를 클릭하면 밑줄 친 곳으로의 이동이 가능합니다.
상대 경로: 현재 웹페이지의 html 문서를 기준으로 경로를 인식
My name is <strong>Jisu</strong>(<a href = "school/school1.html">클릭</a>)이 코드에서 '클릭' 텍스트를 클릭하면
같은 디렉터리에 있는 - school 폴더에 있는 - school1.html로 이동
절대 경로:외부 사이트 페이지로 이동
My name is <strong>Jisu</strong>(<a href = "https://www.tistory.com/">클릭</a>)이 코드에서 '클릭' 텍스트를 클릭하면
이 티스토리 블로그로 이동
<li> 태그
- 목록을 표시해주는 태그
- 항목의 성격이 비슷한 목록들을 <ul> 태그(unordered list)로 묶어줌
- 순서가 필요할 것 같은 목록들은 <ol> 태그(ordered list)로 묶어줌
<ol>
<li>몸풀기</li>
<li>조깅하기</li>
<li>근력운동하기</li>
</ol>
<ul>
<li>철수</li>
<li>영희</li>
</ul>기본적인 문서 구조
<html>
<head>
<title>운동하자</title>
<meta charset="utf-8">
</head>
<body>
<h1>운동순서</h1>
<ol>
<li>몸풀기</li>
<li>조깅하기</li>
<li>근력운동하기</li>
</ol>
<h2>운동의 중요성</h2>
오래살기 위해서는 운동해야 한다.
</body>
</html>- 본문이 아닌 태그들은 <head> 태그 안에 ex)<title> 태그
- 본문인 태그들은 <body> 태그 안에
- <head> 태그와 <body> 태그는 <html> 태그로 감싸져있음
반응형