HTML, CSS/day22 / 23.09.21(목) / (핀테크) Spring 및 Ai 기반 핀테크 프로젝트 구축
day01_text
00_struct.html
<!-- 01_text/00_struct.html -->
<!-- html 주석 -->
<!DOCTYPE html><!-- HTML 문서임을 표기 -->
<html><!-- 모든 태그는 html 태그 내부에 작성 -->
<head><!-- 메타데이터, 문서 제목 ... -->
<meta charset="UTF-8"><!-- 웹페이지 추가 정보-->
<title>struct</title><!-- 웹페이지 제목-->
</head>
<body>
<!--
# HTML ( HyperText Markup Language )
- 웹페이지가 어떻게 구조화 되어 있는지 브라우저에게 알 수 있도록 하는
마크업 언어
# html 태그
- <html>, <hrad>, <body> 등과 같은 명령어의 형태가 '<>' 로 되어 있음
- 태그를 하나의 요소라고 함
# html 태그 구성
- |-------- 요 소 --------|
<p align='center'> text </p>
시작태그 속성 속성값 종료태그
* 태그 : 시작태그<> 와 종료태그 </> 한쌍으로 구성
시작태그만 사용되는 것도 있음
속성 : 태그에 사용되는 추가 정보
속성값 : 속성에 부여하는 값 / " " 또는 ' ' 를 사용
# html 주의사항
- 태그는 대소문자를 구분하지 않으나 '소문자 권장'
-->
</body>
</html>
01_h-tag.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h-tag</title>
</head>
<body>
<!--
# <h1> ~ <h6> 태그
- 제목을 표현하는 태그
- 숫자가 높아 질수록 글자가 작아짐
-->
<h1>h1 제목</h1>
<h2>h1 제목</h2>
<h3>h1 제목</h3>
<h4>h1 제목</h4>
<h5>h1 제목</h5>
<h6>h1 제목</h6>
</body>
</html>02_p_hr_br-tag.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p, hr, br tag</title>
</head>
<body>
<!--
# p 태그
- 하나의 문단을 생성하는 태그
# br 태그
- 줄바꿈 태그
# hr 태그
- 수평라인 표시 태그
-->
<h2>p 태그</h2>
<p>p 태그는 하나의 문단을 생성하는 태그</p>
<p>문단과 문단 사이에 공간 생성</p>
<br>
<h2>br 태그</h2>
<p>줄바꿈 할 때 사용하는 태그</p>
<p>html<br>css</p>
<br>
<hr>
<p>수평라인을 표시 </p>
</body>
</html>03_특수문자.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>특수 문자</title>
</head>
<body>
<!--
# html 특수 문자 ( Entity Code )
-->
<h2>특수 문자 ( Entity Code )</h2>
<br>
<p>&amp; -> and 기호 &</p>
<p>&nbsp; -> 공 백</p><!-- 띄어쓰기는 1번만 적용-->
<p>&lt; -> 작다 <</p>
<p>&gt; -> 크다 ></p>
<p>&quot; -> 쌍따옴표 "</p>
<p>&#64; -> at @</p>
<p>&copy; -> 저작권 표시 ©</p>
</body>
</html>04_글자모양.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자모양</title>
</head>
<body>
<h2>글자모양 태그</h2>
<br>
<p>b 태그는 글자를 <b>굵게</b> 표현</p>
<p>strong 태그는 <strong>중요 부분</strong>을 표현</p>
<p>i 태그는 글자를 <i>기울여서</i> 표현</p>
<p>em 태그는 <em>강조</em>하는 곳에 사용</p>
<p>small 태그는<small>작게</small> 표현</p>
<p>del 태그는 <del>삭제 글자</del>를 표현</p>
<p>mark 태그는 글자에<mark>하이라이트</mark>를 표현</p>
</body>
</html>05_a-tag.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a-tag</title>
</head>
<body>
<!--
# a 태그
- 웹페이지에서 지정된 페이지로 이동할 때 사용
- <a href='' target=''> 텍스트 or 이미지 </a>
* href : 이동하는 url
target : 연결된 페이지 출력
-->
<h2>a 태그</h2>
<br>
<p>url : <a href="https://www.w3school.com"></a></p>
<p>내부페이지 : <a href="01_h-tag.html">01_h-tag</a></p>
<p>내부페이지 : <a href="./03_특수문자.html">03_특수문자</a></p> <!--./ 하면 내부주소 나옴 ㅋㅋ-->
<br>
<h2>target 속성</h2>
<!-- 기존 tab 에서 열림 -->
<p><a href="https://www.naver.com/">NAVER</a></p>
<!-- 새로운 tab에서 열림 -->
<p><a href="https://www.naver.com/" target="_blank">NAVER</a></p>
<p></p>
</body>
</html>06_a-inbase.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 내부 이동</title>
</head>
<body>
<!--
# 페이지 내부 이동
- a 태그를 사용해서 문서 내부의 특정 위치로 이동할 가능
- 원하는 위치의 a 태그에 id 속성을 부여
- href 속성에 이동하는 곳의 '#id' 를 작성
-->
<h2>페이지 내부 이동</h2>
<br>
<p>
<a href="#list">[ 해적단 목록 ]</a><br>
<a href="#character">[ 캐릭터 ]</a><br>
<a href="#ranking">[ 현상금 순위 ]</a>
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id = "list">[ 해적단 목록 ]</h3>
<p><a href="#top"> TOP </a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id = "character">[ 캐릭터 ]</h3>
<p><a href="#top"> TOP </a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id = "ranking">[ 현상금 순위 ]</h3>
<p><a href="#top"> TOP </a></p>
</body>
</html>07_quiz.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_quiz</title>
</head>
<body>
<!--
# 즐겨찾기 목록이 있는 페이지 (07_quiz-favorites.html) 로 이동하는 링크를 만드세요
링크를 클릭하면 새 탭에서 오픈됩니다
# 위 즐겨찾기 목록 페이지에 3개의 링크를 추가하세요
링크를 클릭하면 현재페이지에 오픈됩니다
-->
<h3>Quiz</h3>
<br>
<p><a href="07_quiz-favorites.html" target="_blank"> 즐겨찾기 페이지</a></p>
</body>
</html>07_quiz-favorites.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>즐겨찾기</title>
</head>
<body>
<h2><b>즐겨찾기 페이지</b></h2>
<h3>[즐겨 찾기 목록]</h3>
<p><a href="https://www.naver.com/"> 네이버 </a></p>
<p><a href="https://velog.io/@bh7852/"> 내 벨로그 </a></p>
<p><a href="https://www.google.co.kr/?hl=ko"> 구글 </a></p>
<p><a href="./07_quiz.html"> quiz로 돌아가기 </a></p>
</body>
</html>08_img-tag.html
해당 작업 폴더에 이미지 폴더 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img 태그</title>
</head>
<body>
<!--
# img 태그
- 웹페이지에 이미지를 표시할 때 사용
- <img src="" alt="" title="" width="" height=""/>
* src : 이미지 파일 경로
* alt : 대체 텍스트
* title : 이미지 간단한 설명
* width/height : 이미지 가로, 세로 크기
-->
<h2>ing 태그</h2>
<br>
<h3>이미지 태그 기본</h3>
<!--
eclipse
<img src="http://localhost:8080/Web/image/img/html5.jpg">
-->
<img src="http://localhost:5500/image/img/html5.jpg" alt="html5 로고 이미지" title="난 5지롱"
height="300" width="300"/>
<!--
eclipse
터미널처럼 .. 상위폴더 이동
<img src="../../image/html5.jpg">
-->
<img src="image/img/html5.jpg" title="5로고" alt="html 로고 이미지"/>
<br><br>
<h1>이미지 크기 지정</h1>
<img src="image/img/html5.jpg" width="200px" height="300px"/>
<!-- %를 사용하면 브라우저 크기에 따라서 조정됨
반응형 웹에서 사용됨
svg 파일을 써야함 : 점으로 되어있어 확대를 해도 깨지지 않음
-->
<img src="image/img/html5.jpg" width="30%" height="40%"/>
<br><br>
<h3>이미지 링크</h3>
<a href="https://www.w3.org" target="_blank"><img src="image/img/html5.jpg"
title="w3c 사이트로 이동" width="30%" height="40%"/></a>
<h3>가상 이미지</h3>
공간확보용
<img src="https://via.placeholder.com/500x400"/>
</body>
</html>
Fintech