728x90
반응형
Frontend 프론트엔드 HTML CSS 수업에서 현대자동차 홈페이지를 보면서
간단한 HTML index file 작성, 주석확인하면서 복습 필요함.
HTML
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body style="min-height: 5000px">
<!-- header: semantic tag (element 의 이름이 목적을 의미한다.) -->
<header>
<!-- heading: 제목 을 작성할 때 주로 쓴다. -->
<h1>현대자동차 공식홈페이지</h1>
<p>당신의 모든 세상</p>
</header>
<!-- nav : navigation, 메뉴 -->
<nav>
<h2>메뉴</h2>
<!-- ul: unordered list: 순서가 중요하지 않은 리스트를 만든다. -->
<ul>
<!-- li: list item: 리스트의 아이템을 만든다. ul과 li는 보통 함께 쓰인다..-->
<li>
<!-- a: anchor 링크를 만든다. -->
<!-- non-sementic tag 로 대체 할 수 없다. -->
<!--href: elememt 의 속성/ (attribute) 이동할 주소(id or url)를 입력한다. -->
<a href="#showcase">현대자동차 쇼케이스</a>
</li>
<li>
<a href="#model">모델 소개</a>
</li>
<li>
<a href="#table">모델 비교표</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<!-- hr : horizontal rule : 수평선 -->
<!-- 닫힘 태그가 없으면 컨텐츠(태그 안에 text 또는 element)를 가질 수 없다. -->
<hr />
<!-- main: main contanct가 주로 온다. -->
<main>
<!-- 현대자동차 쇼케이스 -->
<section id="showcase">
<h2>현대자동차 쇼케이스</h2>
<!--iframke : 다른 html 문서 안에 html 문서를 추가한다.-->
<iframe
width="436"
height="245"
title="IONIQ 6 | 디지털 월드 프리미어 | 현대자동차"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</section>
<!-- 모델 소개 -->
<section id="madel">
<h2>모델 소개</h2>
<article>
<h3>제네시스</h3>
<!-- div: divide 다양한 목적으로 사용 될수 있다. 대표적인 none- sematic tag -->
<div>
<!--img: 이미지를 추가한다. src (source): 이미지의 경로, alt(alternative)
이미지에 대한 설명-->
<!--이미지에 source를 추가하는 방법 : 절대경로와 상대경로가 있다.-->
<!-- 절대경로 : root부터 접근한다 (C드라이브부터 접근한다.) -->
<!-- 상대경로: 현재 파일의 위치를 기준으로 접근한다. -->
<img
src="C:\Users\spark\OneDrive\바탕 화면\Jinny\Frontend\Korea IT\Gimoni\basic\img\bunny.jpg"
alt="제네시스"
width="200px"
/>
<p>
<!-- span: 문자열 안에서 특정한 효과를 줄 때 사용한다. -->
<span style="font-weight: bold"
>Lorem ipsum dolor sit amet consectetur,
</span>
adipisicing elit.
<!-- br: breaking rules //self closing (줄바꿈) -->
<br />
Obcaecati, aperiam similique tempore consequuntur illo ipsa
<br />
eligendi voluptates placeat dolore id inventore a atque natus
eius.
<br />
Numquam quos et sint saepe!
</p>
</div>
</article>
<article>
<h3>스타리아</h3>
<div>
<img src="../img/cat.jpeg" alt="스타리아" width="200">
<p>
<span style="font-weight: bold">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
<br>
Deleniti assumenda facilis commodi voluptate magni sapiente,
<br>
cum dolore corrupti quidem harum numquam a eligendi alias
<br>
nesciunt ratione reiciendis incidunt aliquid nam.</p>
</div>
</article>
<article>
<h3>캐스퍼</h3>
<div>
<img src="../img/duck.jpeg" alt="캐스퍼" width="200">
<p>
<i>Lorem ipsum dolor sit, </i>
<br>
amet consectetur adipisicing elit. Accusamus, dicta.
<br>
Totam in quibusdam aspernatur enim repellendus illum
<br>
reprehenderit sed, neque consectetur provident
<br>
aut perspiciatis itaque recusandae velit cumque, illo nesciunt.
</p>
</div>
</article>
</section>
<!-- 모델 비교 -->
<section id="table">
<h2>모델 비교표</h2>
<!-- table:표, 행과 열로 구성되어 있다. -->
<table border="1">
<!-- tr: table row (행) -->
<tr>
<!-- tr: table head 제목 -->
<th>모델명</th>
<th>컬러</th>
<th>연비</th>
<th>가격</th>
</tr>
<tr>
<!-- td:table data -->
<td>제네시스</td>
<td>블랙, 화이트</td>
<td>15/1</td>
<td>1000원</td>
</tr>
<tr>
<td>스타리아</td>
<td>블랙, 실버</td>
<td>12/1</td>
<td>800원</td>
</tr>
<tr>
<td>캐스퍼</td>
<td>카키, 레드, 화이트</td>
<td>13/1</td>
<td>600원</td>
</tr>
</table>
</section>
<!--Contact-->
<section id="contact">
<!-- 오시는 길 -->
<div>
<h2>오시는 길</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12661.03481205323!2d126.72162966977542!3d37.50181610000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b7dadae102b2f%3A0xe60e9558b9fd9172!2z7ZiE64yA7J6Q64-Z7LCoIOu2gO2PieygkA!5e0!3m2!1sko!2skr!4v1658141107256!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- 연락하기 -->
<div>
<!-- form: 양식, 서버에 제출하는 데이터 예) 로그인, 회원가입, Contact 등 -->
<form action="/contact.php">
<h2>연락하기</h2>
<div>
<!-- label: input에 대한 설명을 입력한다. 대체 가능 -->
<!-- label for: 어떤 input에 연결된 label인지 나타낸다 (element의 id 를 작성한다.) -->
<label for="">성함</label>
<!-- input: 사용자로부터 데이터를 입력받는다. -->
<input type="text" placeholder="이름을 입력하세요.">
</div>
<div>
<label for="">이메일</label>
<input type="text" placeholder="username@exmple.com">
</div>
<div>
<label for="">성별</label>
<!-- select: 유저로 부터 데이터를 입력받는다. -->
<!-- option: 유저가 선택할 수 있는 옵션 -->
<!-- name, value 는 서버에서 데이터를 처리하기 위한 속성이다. -->
<!-- id는 JavaScript 에서 주로 사용한다. -->
<select name="gender" id="">
<option value="male">남</option>
<option value="female">여</option>
<option value="private">비공개</option>
</select>
</div>
<div>
<h3>관심분야</h3>
<input id="car" type="radio" name="interests" value="자동차 구매">
<label for="">자동차구매</label>
<input id="branch" type="radio" name="interests" value="대리점 개설">
<label for="">대리점 개설</label>
</div>
<div>
<textarea name="message" id="" cols="30" rows="10" placeholder="내용을 입력하세요."></textarea>
</div>
<div>
<input type="checkbox" name="agree" id="" checked>
<label for="">
<!-- target=_blank : 새로운 창에서 링크를 연다 -->
<!-- target=_self : 현재 창에서 링크를 연다. 기본값 -->
<a href="www.google.com" target="_blank">개인정보 처리방침</a>
예 동의합니다.
</label>
</div>
</form>
</div>
</section>
</main>
<br>
<hr>
<!-- footer: 웹페이지 가장 하단에 위치한다.
웹페이지의 기타 정보들 (sns adress, 회사의 정책, 서비스 이용약관 등..) -->
<footer>
<!-- small: 기본 폰트 사이즈보다 약간 작다. -->
<!-- © : 엔티티 네임 (Entity name) -->
<!-- &(ampersand) + name -->
<!-- html내에서 특수문자를 사용할 수 있다. -->
<small>2022 & copy; 현대자동차</small>
<p>😄</p>
<!-- ol: ordered list : 리스트에 자동으로 번호가 붙는다. -->
<ol>
<li>이용약관</li>
<li>개인정보 처리방침</li>
<li>사이트맵</li>
</ol>
<!-- 엔티티넘버 (Entity number) -->
<!-- &# + number
html 내에서 특수한 문자를 사용할 수 있다. / 특수문자 사용 -->
</footer>
</body>
</html>
CSS 기초 설명 주석과 작성..
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>Hello CSS</h1> -->
<!-- 반응형 (responsive) : 모바일 또는 태블릿에 맞춰서 보여지는 웹-->
<!-- 화면의 크기에 맞게 콘텐츠의 배치가 자동으로 조절된다 -->
<!-- 스크롤이 생기지 않는다. -->
<!-- 퍼센트를 많이 사용한다. -->
<!-- 비반응형 (non responsive) : 웹 데스크탑 웹의 형식으로 보여지는 웹-->
<!-- 고정된 px 값을 많이 사용한다. -->
<!-- <h1>CSS Selector</h1> -->
<!-- <p>html element 를 선택한다. 스타일 속성을 주기 위한 시작단계</p> -->
<!-- element, class, id, children, direct children, .... -->
<!-- element 선택자 -->
<!-- html 내에서 style 태그로 style 속성을 줄 수 있다. -->
<!-- 속성을 주고자하는 element 보다 위에 있어야 한다. -->
<!-- <style>
h1{
font-weight: normal;
}
p{
color: #888;
}
a{
color:#000;
text-decoration: none;
}
</style>
<h1>Heading 1</h1>
<p>paragraph...</p>
<a href="">Link</a> -->
<!-- # class 선택자 // 가장 많이쓴다...-->
<!-- class로 html element 를 선택한ㄷ. -->
<!-- <style>
div{
width: 200px;
height: 200px;
border: 2px dashed;
display: inline-block
}
/* .class 으로 선택한다 */
.red{
background-color: red;
}
.orange{
background-color: orange;
}
.blue{
background-color: blue;
}
</style>
<div class="red"></div>
<div class="orange"></div>
<div class="blue"></div> -->
<style>
div{
width: 100px;
height: 200px;
border: 1px dashed;
display: inline-block
}
/* .class 으로 선택한다 */
.oregano{
background-color: green;
}
.mozzarella{
background-color: #fff;
}
.tomato-sauce{
background-color: tomato;
}
</style>
<div class="oregano"></div>
<div class="mozzarella"></div>
<div class="tomato-sauce"></div>
<p> <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>
Aperiam ipsa, qui ab, nobis pariatur at perspiciatis molestiae
<br>
quo sint ducimus excepturi, laudantium atque quis provident
<br>
nemo dicta aliquam velit iure.</p>
</body>
</html>
728x90
반응형
'Hello World > Frontend Study' 카테고리의 다른 글
| JavaScript - javascript basic 자바스크립트 node.js 라이브러리 다운로드. [개발스터디 기몬] (0) | 2023.05.04 |
|---|---|
| JavaScript - javascript basic memo [개발스터디 기몬] (0) | 2023.05.04 |
| CSS - CSS 기초 이론 정리 [개발스터디 기몬] (0) | 2023.04.24 |
| HTML 기초 [개발스터디 기몬] (0) | 2023.04.19 |
| Frontend Beginner : vs code download / Visual Studio Code _ HTML _ Hello World (0) | 2022.07.17 |
댓글