1. Secondary-content
설계
이름을 적을수 있는 텍스트
드롭다운 목록
월에서 날짜를 선택하여 고를수 있는
플러스 마이너스로 승객 인원을 조정할수 있음 최대 20명?
입력하고 값을 보내는 sumit 버튼
사진과 어딘지 설명해주는 사진 두개 수평정렬
(1) input text 입력
text 선을 없애는 방법
<input type="text" style="border:0 solid black;">
(2) 드롭다운 목록!
❓❓❓❓❓
드롭다운 목록의 종류가 2가지가 있다.
와 겉으로 보기엔 다 비슷해 보이는데 무슨 차이가 있을까?
select는 사용자가 선택할 수 있는 선택 항목을 제공하고, 그 범위내에서만 선택이 가능하다.
datalist는 옵션에 없는 값도, 사용자의 입력을 받을 수 있다.
사용자가 입력창에 타이핑을 하면, 옵션 목록에서 일치하는 값을 찾아서 자동완성 기능을 제공한다.
자동완선 기능을 제공하기 때문에, 사용자각 선택해야 하루 목록이 매우 많을 경우 유용하다.
사용자가 자동 완성 기능으로 쉽게 원하는 값을 찾을 수 있다.
그럼 내가 구현 해야 되는 것은 select 이다!
(3) 날짜 선택 구현
맨 처음에 place holder처리를 하고 싶음
알아보니
data-placeholder="날짜 선택”
input type="date" 달력 아이콘 바꾸기 / placeholder 설정하기 / html, css, 웹퍼블리셔, 실무팁
(4) 숫자 입력 필드를 나타내는 승객 수!
<div class="select-4">
<label for="detail">PASSENGERS</label>
<input type="number" step="5" value="5" max="20" min="5" />
</div>숫자 입력 필드 종류 2가지
number 과 range
넘버는 스핀 박스가 나타나면서 숫자를 선택 가능
랜지는 슬라이드 막대를 움직여 숫자를 입력 가능
속성
min- 최솟 값 지정 기본-0
max- 최댓값 지정 기본 -100
step- 숫자 간격을 지정
value- 필드에 표시할 초깃값
(5) 정보 전달한 버튼
(6) 이미지 2개
<figure> & <figcaption>
<figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다.
<figcaption> 태그는 <figure> 요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용됩니다. ‘Caption’이라는 단어 자체가 이미지에 대한 간략한 설명을 의미하는 만큼, <figcaption>은 <figure>에 대한 간략한 설명입니다.
시멘틱 태그를 잘 활용을 해보는 것이 목표여서
피규어 태그를 써서 해봤음
2. Third-content
아티클 안에 여러가지 설명이랑 이미지 리스트 가 들어감
사이드에 따로 빼서 글 있음
<section class="third-content">
<article class="trust">
<section>
<h4>Don't know Who we Are?</h4>
<h2>
Let us Gain <br />
Your Trust
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
mollis turpis ac libero interdum, id fringilla purus feugiat.
Etiam malesuada mattis nibh at bibendum.
</p>
</section>
<section id="load">
<ul>
<li><h3>100%</h3></li>
<li class="small">Succesful londing</li>
</ul>
<ul>
<li><h3>NO.1</h3></li>
<li class="small">Fight company in the world</li>
</ul>
<ul>
<li><h3>163</h3></li>
<li class="small">New locations added</li>
</ul>
</section>
<section>
<p>Top quality resources from brand like</p>
<div class="brand">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
</section>
</article>
<aside class="features">
<p>suit features</p>
<h5>Costomly tailored nand suit</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam
malesuada mattis nibh at bibendum.
</p>
</aside>
</section>3. four-content
설계
소제목 있고 설명 있고
밑에 더보기 버튼 있어서 링크 연결 하면 됨
오른쪽 상단쪽에 가운데 사진 옆으로 넘기는 버튼이 있음 (오른쪽 왼쪽 다있음)
<section class="four">
<div class="features-2">
<h4>Don't know Who we Are?</h4>
<h3>
Let us Gain <br />
Your Trust
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam
malesuada mattis nibh at bibendum.
</p>
<button type="button" class="learnMore">
<a href="#"> LEARN MORE</a>
</button>
</div>
<div class="side-btn">
<button type="button" class="left">></button>
<button type="button" class="rights">></button>
</div>
</section>4.five-content
왼쪽에 있는 비디오 재생 버튼과 몇초 영상인지 알려주는 것이 있음
오늘쪽에는 소제목과 사람에 대한 설명 과 프로필이 있음 오른쪽에 옆으로 넘길수 있는 버튼이 있음
❓❓❓❓❓
비디오를 넣어야 되는데 인풋에 넣어야 되나 하고 알아보니 비디오 태그가 있었다.
<video>
`*video*`는 HTML 문서에 동영상을 삽입하는 태그이다. HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않는다.
## 문법
<**video** autoplay controls loop muted poster="aaa" preload="bbb">
<**source** src="xxx" type="yyy">
zzz
</**video**>
*autoplay*: 동영상을 자동으로 재생한다.*controls*: 재생, 정지 등 조작 메뉴를 보여준다.*loop*: 동영상을 반복 재생한다.*poster*: 동영상 재생 전에 보여줄 이미지이다.*preload*: 페이지를 열 때 무엇을 로드할지 정한다.*auto*: 동영상, 메타데이타 모두 로드한다.*metadata*: 메타데이타만 로드한다.*none*: 로드하지 않는다.
*source**src*: 동영상 위치를 입력한다. 웹브라우저가 가장 많이 지원하는 형식은 MP4이다.*type*: 동영상 타입을 알려준다. 만약 MP4 파일이라면 video/mp4라고 적는다.
- zzz : 웹브라우저가 video 태그를 지원하지 않을 때 출력될 텍스트이다.
상충되거나 혼자서는 작동하지 않는 속성이 있다. 예를 들어 autoplay로 정하면 preload는 무시된다. 크롬 등 일부 웹브라우저에서는 muted와 autoplay를 같이 사용해야 자동 시작이 작동한다.
• 크기, 배치 등은 CSS로 조절하는 것이 좋다.
비디오 넣은 다음에는 그 전에 있는 것이랑 똑같아서 함
5.Footer
h2 로 제목들 적혀져 있고 헤더에 있는 목록들
인포 안에 ul 3개 정도 수직 정렬 되어 있음
우선 html 은 다 씀
