클라이언트 파트에는 HTML, CSS, JS 가 있다.
HTML : 문서의 기본 틀을 만드는 도구
CSS : 꾸미는 도구
JS : HTML, CSS에 동적인 효과를 주기 위한 도구
HTML
head----------------------------------------------------------------------------------------------------------------------------------------------------------
<html lang="en"></html>
-> html 문서의 범위를 알려주는 태그
-> lang은 문서가 어떤 언어로 작성되어있는지 명시
<head></head>
-> 문서에 대한 메타데이터를 넣는 태그
-> 메타데이터란 데이터의 데이터
<body></body>
-> 실제 화면에 표시되는 내용을 넣는 태그
<meta 속성=값 />
-> 메타데이터를 설정하기 위한 태그
-> author: 문서 작성자/회사명, description: 서비스에 대한 설명, keywords: 검색엔진에서 잡을 만한 키워드, viewport: 보여지는 화면 영역 설정
<link rel=관계 href=경로 />
-> CSS, 파일을 가져오기 위해서 사용하는 태그
-> rel: 현재 html 문서와 관계를 정의, href: 데이터 경로
<title></title>
-> 문서 제목을 설정하는 태그
<script src=경로></script>
-> 자바스크립트 파일을 연결하기 위해 사용하는 태그
-> src: 자바스크립트 파일 경로 표시
body----------------------------------------------------------------------------------------------------------------------------------------------------------
<div></div>
-> 네모난 박스
-> class, id 속성을 함께 사용하는 것이 일반적
<h1~h6></h1~h6>
-> 제목이나 강조하고 싶은 부분을 나타내는 태그
-> 숫자가 작을수록 크기가 커짐
<img src="" alt="" />
-> 이미지를 보여줄 수 있는 기능을 하는 태그
-> alt: 경로가 잘못되었을 때 대신 띄워주는 이미지
<input type="" />
-> 사용자의 입력을 받는 태그
-> type에는 text, button, checkbox, password, number, radio 등이 들어갈 수 있다.
<button></button>
-> 사용자가 클릭할 수 있는 버튼을 만드는 태그
<a href="" target=""></a>
-> 다른 구획/페이지로 이동할 때 사용하는 태그
-> href: 이동할 페이지의 링크, target: 어떤 방식으로 이동할 것인지
<span></span>
-> CSS,JS를 적용시키기 위한 보이지 않는 의미상 존재하는 태그
-> div 와 비슷한 역할을 하지만 div는 줄바꿈을 하고 span을 줄바꿈을 하지 않는다는 차이점이 있다.
<ul,ol>
<li>1</li>
<li>2</li>
</ul,ol>
-> 리스트를 표현하기 위해 사용하는 태그
-> ol: 순서가 있는 태그, ul: 순서가 없는 태그, li: list 요소
<form action="" method="" target=""></form>
-> 사용자 입력을 받아 서버에 네트워크 요청을 할 때 사용하는 태그
-> action: 입력받은 데이터를 처리할 URL, method: HTTP 메서드, target: 링크 이동 방법 설
'프로젝트' 카테고리의 다른 글
| 맛집지도 만들기 - 서버 (2) | 2025.01.22 |
|---|---|
| 맛집지도 만들기 - Javscript 비동기 처리 (2) | 2025.01.22 |
| 맛집지도 만들기 - javascript (1) | 2025.01.22 |
| 맛집지도 만들기 - client(3) (1) | 2025.01.20 |
| 맛집지도 만들기 - client(2) (0) | 2025.01.16 |