회고록 블로그
[공부 필기] 생활코딩 HTML 수업 필기 본문
내가 판단하기에 필요한 내용, 알아두면 유용할 내용들만 별도로 블로그에 필기하기로 했다.
(문법 등은 인터넷으로 찾아볼 수 있으니 생략)
태그 중첩과 목록
<li> 태그 단독으로만 사용하면 보기에는 <ul>을 쓴 것과 같이 보이지만, 그룹핑은 되어있지 않은 상태.
그룹핑을 하고 싶다면 <ul> 또는 <ol> 태그를 함께 쓰면 된다.
<ul>
<li>기술소개</li>
<li>기본문법</li>
<li>하피어텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ul>
HTML 문서의 구조
맨 앞에 <html> 태그가 반드시 들어가고, 맨 뒤에 </html> 태그가 반드시 들어간다.
(사실 가장 맨 앞에는 <!DOCTYPE html>이 들어간다. 적어야하는데 못적었다.)
개발도구
개발도구는 굉장히 중요하다.
처음부터 너무 좋은 개발도구를 학습할 필요는 없다.
(오히려 개발도구의 기능을 학습하는데 많은 리소스가 들어가서 더 복잡도가 커질 수 있음)
HTML 변천사와 통계
opentutorials.org/module/1892/10939
HTML의 변천사와 통계 - HTML 수업
HTML의 변천사와 통계 2015-12-05 23:29:12
opentutorials.org
- 현재(HTML5) 사용하면 안되는 태그들, 더이상 지원하지 않는 태그들 등 공부해두면 유용할 것 같다. (위의 웹사이트 내 링크 있음)
- 사용 빈도가 높은 태그는 알아두고, 사용 빈도가 낮은 태그는 '이런게 있다' 정도만 이해하고 있다가 필요할 때 검색해서 쓰면 좋을 것 같다. (위의 웹사이트 내 링크 있음)
단락 사이의 간격을 늘리고 싶다면?
<br> 태그를 이용하거나, CSS를 이용해서 <p> 태그의 간격을 늘리면 된다.
(CSS를 배울 때 다시 복습해야겠음)
<br> 태그
void element; 내용이 없는 태그.
내용이 없는 태그이기 때문에 열리는 태그 하나만 있으면 된다.
※ 장문의 글의 단락을 나눌 때, <br> 태그를 여러번 써서 시각적으로 단락을 구분해도 되지만 <p> 태그 사용을 권장한다.
시각적으로만 단락을 나누는 것은 좋지 않은 방법이기 때문.
(</br>이 아니라 <br>이 공식 문법인가보다)
<img> 태그
pixabay는 저작권에 구애받지 않고 이미지를 사용할 수 있는 사이트라고 한다.
(다만 이미지의 저작권 확인이 반드시 필요해 보인다 e.g. Public Domain 등)
<!<!DOCTYPE html>
<html>
...
<body>
<img src="img.jpg" width="100px" height="200px" alt="소나무 이미지" title="클릭하지 마십시오">
</body>
...
</html>
alt 속성을 써주는 것이 좋다.
- 이유1. alt = alternative text; 이미지가 깨지거나 문제가 생겼을 때 alt의 값(대체값)이 화면에 출력된다
- 이유2. 시각 장애인분들을 위한 배려
title 속성을 이용하면 마우스를 이미지에 두었을 때 도움말(?)을 표시해준다.
이미지의 너비, 높이는 <img> 태그의 속성으로 설정할 것
(CSS로는 안되려나?)
'2. 프로그래밍 언어 공부 > HTML+CSS' 카테고리의 다른 글
| [공부 필기] 생활코딩 HTML 수업 필기_20210303 (0) | 2021.03.03 |
|---|---|
| HTML method: get 방식 vs post 방식 (0) | 2021.03.03 |
| [공부 필기] 생활코딩 HTML 수업 필기_ table ~ form (0) | 2021.03.02 |
| [공부 필기] HTML의 반복되는 영역은 한번만 쓸 수 없을까 (0) | 2021.02.25 |
| [공부 필기] 메타 뷰포트(meta viewport) 태그 (0) | 2021.02.24 |
