W3 토플형식 심리테스트 사이트 1_html
HTML / JS / CSS를 사용한 ToyProject를 만들고
배포하는 프로젝트 강의를 따라 해 보았다.
HTML / JS / CSS를 이용하여 본인만의 MBTI 테스트 사이트를 제작하고,
배포하는 프로젝트형 강의라고 소개되어 있다.
결과 페이지는 12가지이지만, 강의 영상에서는 1가지 버전만 보여주고,
11가지 유형의 결과는 깃허브에서 다운로드하면 된다고 자막에 뜨는데......
나머지 파일 다운로드하고 약간의 형식만 (예: 업데이트된 참고 코드 형식 등) 수정했는데,
배포하는 과정에서 오류로 인해 보류해두고 1가지 결과의 수만 남겨놓았다.
<! DOCTYPE html> :
모든 HTML 문서는 <! DOCTYPE html> 선언으로 시작한다
선언은 HTML 태그가 아니다.
이것은 브라우저에서 (예상되는) 문서 유형에 관한 ‘정보’다.
<html> : <html> 태그는 HTML 문서의 루트를 나타낸다.
<head> :
<head> 요소는 메타데이터(데이터에 대한 데이터)의 컨테이너다.
<html> 태그와 <body> 태그 사이에 배치된다.
메타데이터는 HTML 문서에 대한 데이터이며, 표시되지는 않는다.
메타데이터는 일반적으로 문서 제목, 문자 집합, 스타일, 스크립트 및 기타 메타정보를 정의한다
<meta charset="UTF-8">
HTML Character Sets = HTML 문자 집합:
모든 현대 컴퓨터 언어는 UTF-8 문자 집합을 기본값으로 사용한다
<meta> :
<meta> 태그는 HTML 문서에 대한 메타데이터를 정의한다.
메타데이터는 데이터에 대한 데이터(정보)입니다.
<meta> 태그는 항상 <헤드> 요소 안에 들어간다
--> name 속성은 메타데이터의 이름을 지정한다. 또한 내용(content) 속성의 정보/값의 이름을 지정한다
--> content 속성은 http-equiv 또는 name 속성과 연관된 값을 제공한다
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport :
뷰포트(웹페이지에서 사용자가 볼 수 있는 영역)를 제어한다. (장치에 따라 달라짐)
<meta> viewport 요소는 브라우저에 페이지의 치수 및 스케일링을 제어하는 방법에 대한 지침을 제공한다
width=device-width 부분은 페이지의 너비를 장치의 화면 너비를 따르도록 설정한다
Initial-scale=1.0 부분은 페이지가 브라우저에 의해 처음 로드될 때 초기 줌 레벨을 설정한다
<meta name="author" content=“ ”> : author [작성자] : 문서 작성자의 이름을 지정한다
<meta name="keywords" content=" ">
keywords : 페이지와 관련된 키워드의 쉼표로 구분된 목록을 지정한다.
(페이지 내용을 검색 엔진에 알린다. 페이지를 카탈로그 화하기 위해 검색 엔진 필요)
<meta name="description" content=" ">
description [서술적 묘사] : 페이지에 대한 설명을 지정한다. 검색 엔진은 이 설명을 검색결과 함께 표시할 수 있다.
<meta property="og:url" content=" /“>
<meta property="og:title" content=" ">
<meta property="og:type" content=" ">
<meta property="og:image" content=" ">
<meta property="og:description" content=" ">
오픈 그래프 태그 (Open Graph Tag : og tag) : SNS에 보일 수 있도록 설정하는 태그다
<title> :
<title> 태그는 문서의 제목을 정의합니다.
제목은 텍스트 전용이어야 하며, 브라우저의 제목 표시줄이나 페이지 탭에 표시됩니다.
검색엔진 최적화(SEO)를 위해서는 페이지 제목의 내용이 매우 중요하다
페이지 제목은 검색 결과에 페이지를 나열할 때 검색 엔진 알고리즘에서 순서를 결정하는 데 사용된다.
<link> :
<link> 태그는 현재 문서와 외부 자원 간의 관계를 정의한다.
<link> 태그는 외부 스타일 시트에 링크하거나 웹 사이트에 즐겨찾기 아이콘을 추가하는 데 가장 많이 사용된다.
<link> 요소는 빈 요소이며 특성만 포함한다.
-> href => URL : 연결된 문서의 위치를 지정한다
-> rel => ‘icon / license / next / preload / prev / search / stylesheet’ etc :
현재 문서와 연결된 문서 간의 관계를 지정합니다
-> type => media_type : 연결된 문서의 미디어 유형을 지정한다
<link rel="icon" href="img/favicon.ico">
웹사이트에 파비콘을 추가하려면, 웹 서버의 루트 디렉터리에 파비콘 이미지를 저장하거나
루트 디렉터리에 이미지라는 폴더를 만든 후 이 폴더에 파비콘 이미지를 저장한다.
파비콘 이미지의 일반적인 이름은 "favicon.ico”이다.
<script> :
<script> 태그는 클라이언트 측 스크립트(JavaScript)를 내장하는 데 사용된다.
<script> 요소는 스크립팅 문을 포함하거나 src 특성을 통해 외부 스크립트 파일을 가리킨다..
-> src => URL : 외부 스크립트 파일의 URL을 지정한다.
-> type => script type : 스크립트의 미디어 유형을 지정한다
<body> :
<body> 태그는 문서 본문을 정의한다.
<body> 요소는 제목, 문단, 이미지, 하이퍼링크, 표, 목록 등 HTML 문서의 모든 내용을 포함한다.
참고: HTML 문서에는 <body> 요소가 하나만 있을 수 있다.
<div> :
<div> 태그는 HTML 문서에서 분할 또는 섹션을 정의한다.
<div> 태그는 HTML 요소의 컨테이너로 사용되며 CSS로 스타일링 되거나 자바스크립트로 조작된다.
<div> 태그는 class 또는 id 속성을 사용하여 쉽게 스타일링할 수 있다.
<div> 태그 안에는 어떤 종류의 콘텐츠라도 넣을 수 있다!
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
section :
section 태그는 문서의 섹션을 정의한다
<section> 태그는 HTML에서 Global Attributes를 지원한다
section id : 요소에 대한 고유 ID를 지정
section class : 요소에 대한 하나 이상의 클래스 이름을 지정한다 (스타일 시트의 클래스를 나타냄)
HTML Headings :
HTML heading(제목)은 웹 페이지에 표시할 제목 또는 자막이다. [<h1>에서 <h6> 태그로 정의]
HTML <h1> to <h6> Tags :
-<h1>에서 <h6> 태그는 HTML 머리글을 정의하는 데 사용한다
-<h1>은 가장 중요한 표제를 정의한다
참고 : 페이지당 하나의 <h1>만 사용 -> 전체 페이지의 주 제목(heading)/주제(subject)를 나타낸다
<img src=" " alt=" "> __ 2가지 필수 속성
<img> 태그는 웹 페이지에 이미지를 내장하는 데 사용된다. 참조된 이미지의 홀딩(보유) 공간을 만든다
<img> 태그는 비어있고 특성만 포함되어 있으며, 닫는 태그가 없다.
src - 이미지의 경로(URL)를 지정한다
alt -
(사용자가 어떤 이유로 볼 수 없는 경우) 이미지의 대체 텍스트를 지정한다
alt 속성의 값이 이미지를 설명해야 한다
<p> :
<p> 태그는 단락을 정의한다.
브라우저는 각 <p> 요소 앞과 뒤에 빈 줄 하나를 자동으로 추가한다.
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
button : <button type=" "> </button>
<button> 태그는 클릭 가능한 버튼을 정의한다
<button> 요소 안에 텍스트(와 <i>, <b>, <strong>, <br>, <img> 등과 같은 태그)를 넣을 수 있다.
<input> 요소로 만든 버튼은 불가능하다
항상 <button> 요소의 유형(type) 속성을 지정하여 브라우저에 버튼의 유형(type)을 알려준다.
<button onclick=" “> </button>
onclick 속성은 요소를 마우스 클릭할 때 발생한다 [사용자가 요소를 클릭한다.]
Syntax [구문] : <element onclick="script">
<ul> :
<ul> 태그는 순서가 없는(괄호가 없는) 목록을 정의한다.
<ul> 태그를 <li> 태그와 함께 사용하여 순서 없는 목록을 만든다.
팁: 순서 목록은 <ol> 태그를 사용한다.
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
<li> : <li> 태그는 목록 항목을 정의한다.
<li> 태그는 순서 목록 <ol> 태그와 순서 없는 목록 <ul> 태그 등에 사용된다.
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
<a> :
<a> 태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의한다.
<a> 요소의 가장 중요한 속성은 링크의 대상을 나타내는 href 속성이다
-> href => URL : 링크가 이동하는 페이지의 URL을 지정한다
<i> :
<i> 태그는 텍스트의 일부를 대체 음성이나 무드로 정의한다.
또한 전문용어, 다른 언어의 문구, 사상, 선박 이름 등을 나타내는 데 자주 사용된다.
-> class 속성 : 요소에 대한 하나 이상의 클래스 이름을 지정한다(스타일 시트의 클래스를 나타냄)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="PandaCoding">
<meta name="keywords" content="십이간지 연애유형">
<meta name="description" content="십이간지 연애유형">
<!-- sns share -->
<meta property ="og:url" content="https://seventype.netlify.app/">
<meta property ="og:title" content="십이간지 연애유형">
<meta property ="og:type" content="website">
<meta property ="og:image" content="img/share.png">
<meta property ="og:description" content="십이간지로 알아보는 연애유형">
<!--favicon-->
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="img/favicon.ico">
<title>십이간지 연애유형</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/qna.css">
<link rel="stylesheet" href="./css/animation.css">
<link rel="stylesheet" href="./css/result.css">
<script src="https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js"></script>
<script>
Kakao.init('5b118bc9e0f058f9e8d82b0e546bed15');
Kakao.isInitialized();
</script>
</head>
<body>
<div class="container">
<section id="main" class="mx-auto my-5 py-5 px-3">
<h1>십이간지로 알아보는 연애유형</h1>
<div class="col-lg-6 col-md-8 col-sm-10 col- mx-auto">
<img src="./img/main.png" alt="mainImage" class="img-fluid">
</div>
<p>
나만의 MBTI 사이트입니다! <br>
아래 시작하기 버튼을 눌러 시작해 주십시오.
</p>
<button type="button" class="btn btn-danger mt-3"
onclick="js:begin()">시작하기</button>
</section>
<section id="qna">
<div class="status mx-auto mt-5">
<div class="statusBar">
</div>
</div>
<div class="qBox my-5 py-3 mx-auto">
</div>
<div class="answerBox">
</div>
</section>
<section id="result" class="mx-auto my-5 py-5 px-3">
<h1>당신의 결과는?!</h1>
<div class="resultname">
</div>
<div id="resultImg" class="my-3 col-lg-6 col-md-8 col-sm-10 col- mx-auto">
</div>
<div class="resultDesc">
</div>
<button type="button" class="kakao mt-3 py-2 px-3" onclick="js:setShare()">공유하기</button>
</section>
<script src="./js/data.js" charset="UTF-8"></script>
<script src="./js/start.js" charset="UTF-8"></script>
<script src="./js/share.js" charset="UTF-8"></script>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="PandaCoding">
<meta name="keywords" content="십이간지 연애유형">
<meta name="description" content="십이간지 연애유형">
<!-- sns share -->
<meta property ="og:url" content="https://seventype.netlify.app"/>
<meta property ="og:title" content="십이간지 연애유형">
<meta property ="og:type" content="website">
<meta property ="og:image" content="../img/share.png">
<meta property ="og:description" content="십이간지로 알아보는 연애유형">
<!--favicon-->
<link rel="shortcut icon" href="../img/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="../img/favicon.ico">
<title>십이간지 연애유형</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" \
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/result.css">
</head>
<body>
<section id="shareResult" class="mx-auto my-5 py-5 px-3">
<h1>당신의 결과는?!</h1>
<div class="resultname">
<p>연애 뭐 식은 죽 먹기죠, 연애 재능 만땅 '쥐'</p>
</div>
<div id="resultImg" class="my-3 col-lg-6 col-md-8 col-sm-10 col- mx-auto">
<img src="../img/image-0.png" alt="0" class="img-fluid">
</div>
<div class="resultDesc">
<p>연애의 프로재능러인 당신! 쥐에 해당하는 당신은 연애의 모든 것들을 알고 있어, 쉽게 연애에 성공하는 스타일이랍니다.
주로 포부가 크고 성격이 낙천적인 성향을 가지고 있고, 논리적이면서 두뇌회전이 매우 빠르다고 할 수 있어요.
말재주 또한 좋아 사교성이 좋고 유쾌하지만 화려한 것을 좋아해 허영심을 부리거나 사치를 부리기 때문에 이 점들을 주의해야 돼요.
뛰어난 능력에 자만하는 경우도 종종 있기 때문에 겸손이 필요하답니다!</p>
</div>
<script type="text/javascript">
function moveHome(){
location.href = "/index.html";
}
</script>
<button type="button" class="gohome mt-3 py-2 px-3" onclick="js:moveHome()">나도 참여하기</button>
</section>
</body>
</html>
[무료] [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기 - 인프런 | 강의
HTML / JS / CSS 만을 가지고 직접 심리 테스트 사이트를 만들고, 배포해보는 Project 사이트를 제작합니다., 하루 10분으로 배우는, 웹 프로그래밍. HTML / JS / CSS 만을 가지고 나만의 MBTI 사이트를 만들
www.inflearn.com
'IT 태그' 카테고리의 다른 글
| W3 토플형식 심리테스트 사이트 3_JavaScript (0) | 2023.11.16 |
|---|---|
| W3 토플형식 심리테스트 사이트 2_CSS (0) | 2023.11.16 |
| 만들면서 알아가는 HTML/CSS (1) | 2023.10.18 |
댓글