유튜브로 생활코딩 HTML 강의 영상을 보면서 필기한 내용이다.
내용이 얼마나 나올지는 모르겠으나 그냥 기억해둘만한 내용을 적겠다.
JS를 공부하기 전에 선행적으로 HTML 과 CSS 를 훑고 넘어가려고 한다.
그래서 일단은 VSCODE 로 플러그인 대충 설치하여 따라하고 있다.
일단 HTML 특징으로는 엄청 쉽다.
.html 파일을 만들어주기만 하면 끝이다.
바로바로 피드백도 가능하다. 웹브라우저로 열어도 되고 IDE 상에서 바로 프리뷰 해도 된다.
----------------------------------------------------------------------------------------------------
태그
또한 복잡한 문법 대신 태그라는 것이 쓰인다.
예를 들어 제목을 나타내는 태그는 <h1></h1> 부터 <h6></h6> 까지 있다.
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
위의 코드는
Hello World!
Hello World!
Hello World!
Hello World!
Hello World!
Hello World!
위와 같은 결과를 낸다.
평문과는 글자의 크기, 볼드체, 줄바꿈 등의 차이가 있다.
이외의 태그들은 검색으로 손쉽게 찾아낼 수 있다.
알아두면 좋을 태그들로는
HTML Study | Advanced Web Ranking
HTML Study
Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The
www.advancedwebranking.com
위의 사이트에 태그의 사용 빈도나 보편적인 태그수에 대한 통계가 나와 있다.
이를 참고해서 자주 쓰이는 태그들을 숙지한다면 효율적인 작성이 가능하다.
이런 태그들로 HTML 의 전체적인 틀을 만들고 CSS 를 이용해 세부적인 디테일을 수정하는 것으로 보인다.
그리고 지금까지의 학습 내용들로 블로그 등의 글을 쓸 때 유의점이 있는데,
바로 html 태그를 이용해 글을 작성하는 것이다.
단어를 하나 하나 볼드체, 문자 크기 등을 설정해주는 것과 태그를 이용해 간단히 같은 결과를 내는 것은
누적될수록 점점 더 큰 차이가 발생하게 된다.
----------------------------------------------------------------------------------------------------
속성 & img
<img> 태그를 이용해 이미지를 삽입할 수 있다.
또한 이 태그와 함께 태그의 속성을 함께 적어주는데 이미지의 경우
<img src="이미지 주소" width="n or n%">
src와 width가 img 태그의 속성을 나타낸다. 이러한 속성들은 정해진 순서가 없어 아무거나 먼저 쓰여도 상관 없다.
----------------------------------------------------------------------------------------------------
부모자식/목록
부모자식은 보통 자주 쓰이는 쌍이 있다.
예시로 목차를 나타내는 태그 또한 부모자식의 쌍이 있다.
바로 <li></li> 태그와 <ul></ul> 또는 <ol></ol> 태그이다.
<ul>, <ol>태그로 그룹을 만들고, <li> 태그로 항목을 만들 수 있다.
<ul>
<li>ABC</li>
<li>DEF</li>
<li>IGH</li>
</ul>
<ol>
<li>123</li>
<li>456</li>
<li>789</li>
</ol>
위의 코드는 아래와 같은 결과를 낸다.
- ABC
- DEF
- IGH
- 123
- 456
- 789
보이는 것과 같이 <ul> 태그와 다르게 <ol> 태그는 자동으로 항목에 번호를 붙여준다.
여기까지가 HTML 문법의 모든 것이다. 더이상 복잡한 내용이 없다고 한다.
----------------------------------------------------------------------------------------------------
웹 페이지 제목 / 인코딩
<title></title> 태그로 웹 페이지의 제목을 달아줄 수 있다.
<title>Hello World!</title>
직접 만든 html 파일에 위 코드를 작성하고 열어보면 브라우저 탭의 제목이 바뀐 것을 확인할 수 있다.
또한 인코딩 방식도 전달해 줄 수 있다.
<meta charset="utf-8">
위 코드는 해당 파일이 utf-8로 인코딩 되었다는 것을 전달해준다.
여기까지 내용을 익혔다면 반드시 알아둬야할 규칙이 있다.
제목, 인코딩 형식 등을 표기한 내용들은 <head></head> 속에 들어가야 하며
본문의 내용들은 <body></body> 속에 들어가야 한다.
또한 위 두 항목을 포함한 전체 코드들은 <html></html> 속에 들어가야 하며
관용적으로 코드의 맨 윗줄에는 <!doctype html> 을 적어준다고 한다.
아래 코드블럭을 보면 이해가 쉬울 것이다.
<!doctype html>
html 파일이라는 것을 알려준다.
<html>
html로 코드를 전부 묶어준다
<head>
head 영역
</head>
<body>
body 영역
</body>
</html>
아직 들여쓰기 규칙이나 코드스타일을 몰라서 들여쓰기는 대충 해뒀다.
위도우 버전의 vscode는 원하는 부분 선택 후 ctrl+k 입력 후 ctrl+f 로 알아서 들여쓰게 만들 수 있으니
코드 적당히 작성 후 정리를 틈틈이 해두는 것이 깔끔할 것이라 생각한다.
-------------------------------------------------------------------------------------------------
<a> 태그
anchor 의 첫글자를 딴 <a> </a> 태그는
링크와 관련된 일을 한다.
<a> 태그로 감싼 부분이 링크가 되는 것이다.
단, 링크에 대한 정보(속성) 또한 적어 줘야 우리가 생각하는 링크가 완성되는데,
이는 일반적으로 아래와 같이 쓴다.
<a href="Link Address" target="_blank" title="Link ToolTip"> Link </a>
Link 를 클릭하면 "Link Address" 로 이동하게 되는 링크를 만든 코드이다.
이에 추가적으로 target="_blank" 로 클릭했을 시 새 탭을 열도록 하거나,
title="Link ToolTip" 으로 마우스를 갖다 댔을 때 나오는 툴팁을 설정해줄 수 있다.
----------------------------------------------------------------------------------------------------
웹 사이트 완성
생활코딩 강의가 정말 쉽고 명확한 것 같다.
html이 쉽기도 하지만 컴팩트하게 필요한 내용이 순서대로 잘 들어있다.
이번 항목에선 우리가 흔히 보는 웹사이트와 유사한 형태의 웹사이트를 구성하는 방법에 대해 알려준다.
간단히 요약하자면 위의 링크를 이용해 html 파일간의 이동을 구현하는 것인데,
마치 이 블로그처럼 맨 위의 홈 버튼, 오른편의 분류 이동 등과 같은 기능의 구현이다.
이 이후의 내용들은 영상을 참조하는 편이 글보다 이해가 빠를 것이라 생각한다. (글로 적기 어려운 내용이기도 하다)
여기까지 따라왔다면 그럴듯한 웹사이트를 만들 수 있다.
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| 생활코딩 CSS 강의 요약정리 (0) | 2022.03.09 |
|---|
댓글