<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/10000hours.css" />
<title>1만 시간의 법칙</title>
</head>
<body>
<section id="contents">
<div class="wrapper">
<div class="title">
<img class="clock_img" src="img/clock.png" alt="background" />
<div class="title_img">
<img src="img/title.png" alt="1만 시간의 법칙" />
</div>
</div>
<div class="intro">
<div class="intro_saying">
"연습은 어제의 당신보다 당신을 더 낫게 만든다."
</div>
<div class="explain">
<div class="quotes">
<img src="img/quotes.png" alt="따옴표" />
</div>
<p>
<span>1만 시간의 법칙</span>은<br />어떤 분야의 전문가가 되기
위해서는<br />최소한 1만 시간의 훈련이 필요하다는 법칙이다.
</p>
</div>
</div>
<div class="inputs">
<div class="field">
<p>나는</p>
<input id="field_value" type="text" placeholder="예)프로그래밍" />
<p>전문가가 될 것이다.</p>
</div>
<div class="time">
<p>그래서 앞으로 매일 하루에</p>
<input id="time_value" type="number" placeholder="예)5" />
<p>시간씩 훈련할 것이다.</p>
</div>
</div>
<div class="start">
<div class="btn_wrap">
<button class="start_btn">
나는 며칠 동안 훈련을 해야 1만 시간이 될까?
</button>
<div class="click_img">
<img src="img/click.png" alt="클릭" />
</div>
</div>
</div>
<div class="result_loading">
<div class="img_wrap">
<img src="img/loading.png" alt="로딩 중" />
</div>
</div>
<div class="result">
<div class="result_wrap">
<div>
당신은<span class="field_result"></span>전문가가 되기 위해서
</div>
<div>
대략<span class="time_result"></span>일 이상 훈련하셔야 합니다! :)
</div>
</div>
<div class="buttons">
<div class="go">
<button class="modal_btn">훈련하러 가기 GO!GO!</button>
</div>
<div class="share">
<button class="share_btn">공유하기</button>
</div>
</div>
</div>
</div>
</section>
<section id="modal">
<div class="modal_wrap">
<div class="cheer">
<h1>화이팅!!♥♥♥</h1>
<h3>당신의 꿈을 응원합니다!</h3>
</div>
<div class="licat_img">
<img src="img/licat.png" alt="응원하는 라이캣" />
</div>
<div class="btn">
<button class="close_btn">종료하고 진짜 훈련하러 가기 GO!GO!</button>
<p>(그냥 닫기 버튼입니다.)</p>
</div>
</div>
</section>
<section id="copyright">
<div class="logo_img">
<img src="img/logo.png" alt="weniv" />
</div>
<p>
※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 WeNiv에 있습니다.<br />
수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.
</p>
</section>
<script type="text/javascript" src="js/10000hours.js"></script>
</body>
</html>최대한 불필요한 태그를 사용하지 않는다.
- - HTML에는 id나 class를 사용해서 지정한 장소만 스타일을 적용.
id는 같은 이름을 동일 페이지 안에서 여러 곳에 사용 불가.한 곳만 사용 가능.
class는 동일 페이지 안에서 몇 번이라도 사용 가능.
따라서 CSS와 JS에서 반복적으로 사용되는 것은 class. 고유한 스타일을 지정할때는 id.
#id .class
고유한것 id, 반복적인 것 class
- class wrapper사용하는 이유? why? ->찾아야함
- 이미지 태그안 alt
alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시.
시각장애인이 볼때에는 alt안의 값을 읽어줌. alt="" 공백으로 처리해도됨.
- <div></div>
Division의 약자로, 레이아웃을 나누는데 주로 쓰임.
다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 사용.
- <span></span>
<span> 태그는 <div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰임.
<div> 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점인데, 이는 CSS display 항목에서 세부 정보 확인.
이 둘의 차이를 쉽게 설명하자면, <div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않는다.
- <button></button>
<button> 태그는 클릭할 수 있는 버튼을 정의할 때 사용.
'Front-end > Javascript 실습' 카테고리의 다른 글
| 윈도우에서 마우스 커서 좌표 찾기 업그레이드 버전 (0) | 2022.03.28 |
|---|---|
| 1만시간의 법칙 -클론 CSS 코드 리뷰 (0) | 2022.03.23 |
| H/T count/delete (0) | 2022.03.21 |
| 버튼으로 지정된 곳으로 이동하기 (0) | 2022.03.17 |
| 윈도우에서 마우스 커서 좌표 찾기 (0) | 2022.03.16 |
