[html] 기본 구성
2022. 2. 12. 20:03ㆍ개발의 흔적/웹
개미가 머리, 가슴, 배로 이루어져있듯이
웹 프로그래밍 역시 기초적으로 3개로 이루어져 있다!
1.html : 뼈대를 이루는 코드
웹 페이지 내의 텍스트, 버튼, 구역등을 나타내는 코드!
2.css : 페이지내를 꾸며주는 파일들!
html의 각 구역, 텍스트를 쉑시하게 만들어주는 역할!
3.java script: 웹 페이지 내의 함수, 기능등을 담당해주는 역할!
html파일을 크게 다음과 같은 태그(구역)들로 나타 낼 수 있다!
<!doctype html> : 파일이 html임을 알려주는 시작 명령어
<head> : 외부자료들을 import하는 코드들, 웹의 정보(<title>, <meta>)등을 담은 부모 태그
<style> : css파일들을 import해주는 태그
<script> : java script 코드를 import해주는 태그
<body> : 웹페이지에서 실제로 보이는 부분!
body내의 태그들은 <p>, <div>, <button>, <h1>~<h6>, <a>, <hr>, <input>, <img>, <span>을 포함해서 여러가지가 존재한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0.html의 구성</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
이 둘을 비교해서 보자!
'개발의 흔적 > 웹' 카테고리의 다른 글
| [js] 1-2 홈페이지 들어갔을 때 로딩 되자마자 update값 표시 방법 (0) | 2022.02.14 |
|---|---|
| [js][ajax] 1.ajax의 기본 구조 & 간단한 활용 예시 (0) | 2022.02.14 |
| [js]1. json과 서버 (0) | 2022.02.14 |
| [js] jquery 기초 메소드 (0) | 2022.02.14 |