* 본 포스팅은 생활코딩/opentutorials의 web1- HTML&internet 수업을 기본으로 하여
HTML에 대해 공부한 내용들을 정리한 내용입니다 *
기획 | 코딩과 HTML
✏️ 기획이란 " 뭔가를 만들기 전에 무엇을 만들 것 인가 미리 상상하고, 계획해보는 과정"
✏️ 코딩이란 사람이 어떤 원인을 만들고, 컴퓨터가 그 결과를 제공하는 것.
원인은 Code, Source, Language, 결과는 Application, App, Program, Webpage, Website 등으로 표현할 수 있다.
✏️ HTML : 웹페이지라는 결과를 만드는 코드(원인). 배우기 쉽고, 중요하다!
실습환경 준비 - ATOM
웹브라우저에서 다른 사람의 컴퓨터에 저장된 웹페이지를 들어갈 때는 주소를 입력하지만, 해당 브라우저와 같은 컴퓨터에 있는 파일인 내 html 파일을 읽으려고 할 때는 브라우저에서 해당 파일을 찾아서 (cmd+ O) 열면 됨
🧐 생활코딩 강의에서는 ATOM이 best html editor 로 소개가 되었으나, 수강 당시(21년 말) 대세는 visual studio code 라는 의견에 따라 ATOM 설치 후 실습을 하다가 vsCode로 갈아타게 되었다!
기본문법 태그 | 통계에 기반한 학습
html 태그는 150여개 이상이 존재하는데, 일반적인 웹사이트는 대개 20-25개 정도의 태그를 사용하고 있음. (🔗참고)
어렵고 복잡해 보인다고 항상 중요하고, 잘 사용되는 것은 아니라는 것을 기억하고, 처음에 배우는 간단한 것들이 더 중요한 것들이라는 것을 생각하고 의기소침하지 않기! 🙅🏻♀️
html 이 중요한 이유
1. 비즈니스적 측면
: 아래 두 코드는 '겉보기에는' 동일하지만, 웹브라우저는 hi라는 검색어에 대해 제목이 hi 인 (h3태그의) 웹사이트를 먼저 검색.
→ 올바른 태그 사용은 비즈니스 측면에서 유리
<h3>hi</h3><span style="font-size:24px">hi</span>2. 접근성 측면 : 시각장애인의 접근성을 높이는 것은 올바른 html를 작성하는 것부터 시작한다!
<img>
이미지를 넣기 위한 태그. <img>와 같은 태그는 태그 자체만으로는 정보를 전달할 수 없기 때문에 속성을 필요로 한다.
<img src="filename.jpg" width="100%" >위 코드에서 src, width가 속성을 의미. src는 이미지 파일의 source를, width는 이미지 파일의 가로 길이를 나타내는 속성.
부모자식과 목록
목록을 나타내는 <li> 태그는 복수의 목록을 구분하기 위해 (묶어주기 위해) 부모 태그를 사용.
목록 앞에 순서를 자동으로 붙이고 싶을 때는 <ol></ol>을, 목록을 있는 그대로 나타낼 때는 <ul></ul>을 사용
(ol은 ordered list, ul은 unordered list를 의미)
문서의 구조
<!doctype html>
<html>
<head>
<title> 제목 </title>
<meta charset = "utf-8">
</head>
<body>
본문
</body>
</html>
하이퍼링크 <a>
링크를 걸려면 해당 링크로 연결할 텍스트를 <a> 태그로 열고 닫아준다. target 이라는 속성을 통해 링크를 클릭할 때 해당 페이지가 새 탭으로 열릴지, 현재 탭에서 열릴 지를 제어할 수 있고, title 이라는 속성을 통해 해당 링크에 커서를 올렸을 때 제목이 나타나게 할 수 있다.
<a href="주소"> 링크 연결할 텍스트 </a>
<a href="주소" target="_blank" title="링크의 제목">
<!-- target attribute : 링크를 클릭 시 새 탭으로 열림 -->
<!-- title attribute: : 해당 링크에 커서를 올리면 "제목" 표출-->'Frontend > HTML' 카테고리의 다른 글
| [html] 브라우저 탭 아이콘 설정하는 방법 (a.k.a. favicon) (0) | 2022.03.08 |
|---|---|
| HTML 기본 - HTML이란? / 태그와 속성 / HTML 문서의 기본 구조 (0) | 2022.03.08 |
댓글