728x90
※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음.
웹 개발자라면 기본적으로 알아야 할 HTML의 기본 구조를 아래 HTML 문서와 코드를 통해 알아보자.
Welcome to Suzuworld
이것은 p입니다. p는 문단 단위로 공간을 차지합니다.
이것은 div입니다. div는 줄 단위로 공간을 차지합니다.
p와 div는 줄바꿈이 됩니다.
이것은 span입니다.
span은 단어 or 문장 단위로 공간을 차지합니다.
span은 줄바꿈이 안됩니다.
그림 예시
스즈월드 들어가기
ol일 때
- Item A
- Item B
- Item C
ul일 때
- Item A
- Item B
- Item C
체크박스(중복선택 가능) O X
ID :
Password :
선택 A B
문의하기
html로 구현한 웹사이트 스즈몰
<!DOCTYPE html> <!--웹 문서의 유형이 html임을 명시함-->
<html lang="ko"> <!--html을 시작태그로, 언어는 한국어로-->
<head> <!-- 메타데이터를 입력하는 헤더 영역-->
<meta charset="UTF-8"> <!--메타데이터-->
<title>Suzumall</title> <!--문서의 제목이자, 브라우저 탭이름-->
<h1>Welcome to Suzuworld</h1>
</head>
<body> <!--문서내용-->
<p> <!--paragraph-->
이것은 p입니다. p는 문단 단위로 공간을 차지합니다.
</p>
<div>이것은 div입니다. div는 줄 단위로 공간을 차지합니다.</div>
<div>p와 div는 줄바꿈이 됩니다.</div>
<span>이것은 span입니다. </span>
<span>span은 단어 or 문장 단위로 공간을 차지합니다. </span>
<span>span은 줄바꿈이 안됩니다.</span>
<p> 그림 예시 </p>
<img src="https://i1.daumcdn.net/thumb/C264x200/?fname=https://blog.kakaocdn.net/dn/bGHLrR/btrKlpnSiE3/5A2wsKw6ujI5jIT670ycuk/img.jpg">
<!--이미지 삽입-->
<a href="https://suzuworld.tistory.com/" target="_blank">스즈월드 들어가기</a>
<!--a : anchor, 하이퍼링크 삽입 / href : 링크 주소 삽입 / target="_blank" : 새탭에서 열기-->
<h3>ol일 때</h3>
<ol> <!--ordered list-->
<li>Item A</li> <!--list-->
<li>Item B</li>
<li>Item C</li>
</ol>
<h3>ul일 때</h3> <!--h1~h6, h1이 제일 큼-->
<ul> <!--unordered list-->
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<p>
체크박스(중복선택 가능)
<input type="checkbox" > O <!-- input : type 속성을 text, radio 등으로 설정해서 다양한 형태로 생성 가능-->
<input type="checkbox" > X
</p>
<div>ID : <input type="text" placeholder="아이디를 입력하세요."></div> <!--텍스트 삽입-->
<div>Password : <input type="password" placeholder="비밀번호를 입력하세요."></div>
<div><button style="background-color : yellow; border-color : black;"> 로그인 </button></div> <!--버튼 삽입-->
<p>
선택
<input type="radio" name="choice" value="A"> A <!--name을 같은 이름으로 하여 그룹핑을 해야 단일 선택이 가능-->
<input type="radio" name="choice" value="B"> B
</p>
<p>
문의하기 <textarea>내용 :</textarea> <!--텍스트를 입력할 수 있음(줄바꿈 가능)-->
</p>
</body>
</html>웹사이트 스즈몰의 html 코드
시멘틱 태그
시멘틱(Semantic) 태그의 Semantic은 '의미론적인'라는 뜻이 있다. 쉽게 얘기하여 코드를 짤 때 코드에 언어적인 의미를 부여하여 개발자들간의 의사소통을 보다 쉽고 빠르게 하기위한 일종의 언어 약속인 것이다. 코드는 혼자 개발하기보다는 여러 사람과 협업하여 개발하는 경우가 많으므로 태그에 언어적인 의미를 부여하여 코드를 짠다면, 다른 사람의 코드를 봐도 전체적인 맥락이 한 눈에 들어온다는 장점이 있다.
예를 들어, 위치에 따른 태그인 <header> 페이지 상단, <nav> 네비게이션 링크, <article> 글이 많은 부분, <aside> 페이지의 측면, <footer> 페이지의 하단 등이 있음
기타 태그
<form>
form 태그는 사용자가 입력한 값을 다른 페이지로 전송하는 역할을 한다. 목적이 명확하므로 semantic하다고 말할 수 있으며, 페이지 전환이 이루어지기 때문에 사용에 주의가 필요하다.
728x90
'[FrontEnd] > HTML' 카테고리의 다른 글
| HTML이란? (0) | 2022.08.23 |
|---|
