2020. 4. 1. 03:20ㆍ생활코딩/생활코딩웹
HTML
html은 Hyper Text Markup Language의 약자입니다 여기서 hyper text는 문서와 문서를 링크로 연결되어 있으며 이 링크를 통해서 서로 연결되어있는것을 웹이라고 합니다.
TAG
Markup을 이해하기위해서는 tag를 이해하여야합니다 tag은 예를들어 옷이 있다면 그옷의 치수 세탁방법 원산지 등을 기술해서 그 옷에대해서 자세한 정보소비자에게 알려주는것을 tag라고 합니다.
여기서 "안녕하세요 만나서 반갑습니다" 에서 강조가되있습니다 이것을 표현해보겠습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
안녕하세요 <strong>만나서</strong>반갑습니다.
</body>
</html>이렇게 입력한후 만나서 사이에<strong></strong>이 있는데 이것은 문장을 강조하는데 사용하는것입니다 여기서
<strong>이 tag를 시작하는 첫부분 </strong>이 tag를 마치는 끝부분입니다 이렇게 tag를 사용하여 강조를 할수있습니다.
속성
이번에는 속성을 배워볼것입니다
위에있는 사진처럼 글자위에 다른 주소로 이동이 가능한것을 링크라고하는데요 링크를 설정할떄에사용하는 이번에는 태그인 a태그를 사용할것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
안녕하세요. <a href="http://www.naver.com" target="_blank">생활코딩</a>입니다.
</body>
</html>여기서 <a>링크</a>를 입력시 링크테그를 사용가능하지만 정확한 위치를 지정해주어야 하기떄문에 속성인 href를 사용하여 www.naver.com주소를 가진 사이트를 지정해주면 링크를 통해서 www,naver.com로 갈수있게됩니다.
태그의 중첩
다음으로 list라고하는 항목을 배치해주는 li태그를 사용하여 봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ol>
<ul>
<li>김민수</li>
<li>최재우</li>
<li>한재일</li>
</ul>
</body>
</html>이렇게 할경우에는 각각의 태그로 분활하고싶을때에는 <ul>태그와 <ol>태그를사용합니다<ul>태그같은경우에는 순서가 없는 리스트를 표현할떄 사용하며 <ol>은 순서가 있는 리스트를 표현합니다
각각 위의 사진처럼 나오게됩니다.
html정리
마지막으로 html이 어떻게 변화하는가에 대한 절차를 알아볼것입니다. html이 중요한 언어가되면서 개인에의해서만 관리되는것이 한계가 오게됩니다. 그래서 html 체계적으로 국제 기구가W3C(world wide web)가 만들어집니다 이는 html의 표준을 정의 하여줍니다 이는 필요하다판단하면 추가하며 필요없는부분을제거하기도 합니다.
그리고 html을 표기하기전에 doctype를 입력하는데 이것은 문서가 어떤 표준안에 따라서 작성됬는지를 웹브라우저가 알수있도록 표기하는것입니다
참고한 링크
'생활코딩 > 생활코딩웹' 카테고리의 다른 글
| 개발도구 (0) | 2020.04.01 |
|---|---|
| HTML 실습 (0) | 2020.04.01 |
| 서버 제어 와 프로그래밍 언어 (0) | 2020.03.31 |
| 윈도우에 웹서버 설치 (0) | 2020.03.31 |
| 서버와 클라이언트 (0) | 2020.03.29 |