생활코딩 html 강의 정리 편
기본 구조
<!doctype html>
<html>
<head>
<title>웹 페이지 제목</title>
<meta charset="utf-8">
</head>
<body>
<h1>WEB</h1>
</body>
</html>처음에 <!doctype html> 써주고 <html></html>이라는 태그 안에 <head></head>와 <body></body> 태그가 들어가 있는 구조로 작성한다.
<head> 태그는 본문의 부가적인 내용이라고 할 수 있다. 위에 예시에 들어가 있는 코드를 보면 <title>과 <meta> tag가 있는데,
<title> 태그는 웹 페이지의 제목을 가리킨다.
<meta>는 강의에서 배운 charset이라는 속성만 알고 있는데, 저 속성은 이제 저 html 파일의 글들을 utf-8로 표현? 디코딩? 하라는 내용이다. 아톰의 오른쪽 아래를 보면은
이런 부분이 있다. utf-8로 작성 중이라는 얘기로 보이고, 그렇기 때문에 이 파일이 utf-8로 작성되었다는 것을 표기하기 위한 속성으로 보인다.
이제 실제 페이지에 나타나는 부분인 <body> 태그 안쪽을 볼 것이다.
제목을 나타내는 태그 h1, h2, h3...
<h1> h1 </h1>
<h2> h2 </h2>
<h3> h3 </h3>h1
h2
h3
그다음, 링크 태그인 <a>
<a href="경로"> 하이퍼 링크 될 문자 </a>이런 식으로 써주면 저 <a></a> 안에 있는 문자열에 해당 파일에 대한 링크가 걸린다.
이러한 링크로 웹 페이지들이 연결돼 웹 사이트가 이루어지는 것이다.
책 한 페이지, 한 페이지가 모여 책 한 권을 이루는 것처럼.
and then, 리스트 태그
<li> list1 </li>
<li> list2 </li>
<li> list3 </li>
<ul>
<li> list1 </li>
<li> list2 </li>
<li> list3 </li>
</ul>- list1
- list2
- list3
잠깐만, 저거 <ul></ul>이 이제 unordered list인데 꼭 저거 안에 list를 넣어줘야 하는 건지 까먹었다. 이건 추후 강의를 다시 살펴봐서 고쳐놓겠다.
ordered list tag <ol>
<ol>
<li> list1 </li>
<li> list2 </li>
<li> list3 </li>
</ol>- list1
- list2
- list3
문단 태그 <p>
<p> 첫번째 문단입니다. </p>
<p> 두번째 문단입니다. </p>
<p> 세번째 문단입니다. </p>첫번째 문단입니다.
두번째 문단입니다.
세번째 문단입니다.
이미지 태그 <img>
<img src="/이미지 경로/이미지.jpg" width="100%">src 속성 안에는 이미지의 경로를 넣어주고, width는 이미지의 크기를 가리킨다. 숫자를 넣어가며 조절해도 좋고, 100%라고 적어주면 창의 크기에 딱 맞게 해 준다.
이제 추가적인 내용 정리를 하겠다.
unsplash라는 사이트는 저작권 없는 이미지 사이트이다.
그리고 웹 페이지를 만들 때에 accessibility를 고려해서 작성해야 한다.
웹 페이지를 시각적으로 보지 못하는 사람들을 포함한 모든 사람들의 접근성으로 고려하기 위해서,
html tag를 정확히 알고 그 의미에 맞게 사용할 줄 알아야 한다. 끝.
'Web > html' 카테고리의 다른 글
| html 공부 시작! (0) | 2022.04.03 |
|---|
