HTML 핵심 요소 정리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 핵심 요소 정리</title>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"> -->
<link rel="stylesheet" href="/main.css">
<style>
span {
color: aqua;
}
</style>
</head>
<body>
<div>
<!-- 주석 단축키 Ctrl + / -->
<!--(블록) Heading -->
<h1>오늘의 날씨</h1>
<!--(블록) 문장을 의미하는 요소 Paragraph-->
<p>중부 집중호우, 남부는 열대야, 12호 태풍 북상 중 ... </p>
<!--(인라인) 이미지를 삽입하는 요소-->
<img
src="https://images.unsplash.com/photo-1500740516770-92bd004b996e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c3Rvcm18ZW58MHx8MHx8&auto=format&fit=crop&w=700&q=60"
alt="12호 태풍">
</div>
<!--(블록) 순서없는 목록의 집합 Unordered List-->
<!-- ul>li*4 -->
<ul>
<!--(블록) 목록 내 항목 List item-->
<li>사과</li>
<li>딸기</li>
<li>수박</li>
<li>오렌지</li>
</ul>
<!--(인라인) 하이퍼링크를 지정하는 요소 Anchor-->
<a href="https://www.google.com" target="_blank" title="구글로 이동">Google</a>
<p>
<!--span : (인라인) 구분만을 위한 요소-->
<span>동해물</span>과 <span class="red">백두산</span>이 마르고 닳도록<br>
<span class="red">하느님</span>이 보우하사 <span id="abc">우리나라</span> 만세
</p>
<p>
<!--(인라인/블록) 사용자가 데이터를 입력하는 요소-->
<!--요소가 수평으로 쌓이지만, 상하좌우 여백을 지정할 수 있다-->
<input type="text" value="000" placeholder="이름을 입력하세요!">
<input type="text" disabled>
</p>
<!--(인라인) 라벨 가능 요소(input)의 제목-->
<label>
<input type="checkbox"> Apple
</label>
<label>
<input type="checkbox" checked> Banana
</label> <br>
<label>
<input type="radio" name="fruits"> Apple
</label>
<label>
<input type="radio" name="fruits" checked> Banana
</label>
<p>
<!--(블록-테이블) 행row과 열column의 집합-->
<table>
<tr> <!--tablw row-->
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</p>
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>
<!-- 자바스크립트는 맨 아래두거나, defer 속성 사용 -->
<script>
const els = document.querySelectorAll('div')
els.forEach(el => {
console.log(el.dataset.fruitName)
})
</script>
</body>
</html>CSS
table {
}
tr {
}
td {
border: 1px solid red;
padding: 10px;
}
.red {
color: red;
}
#abc {
color: blue;
}CSS 선언 방식
- <link rel="stylesheet" href="/main.css">
- <style></style>
- <태그 style="스타일"></태그> 작성
전역속성
- class : 요소를 지칭하는 중복 가능한 이름
- id : 요소를 지칭하는 고유한 이름
- data : 요소에 데이터를 지정 (자바스크립트에서 이용)
[내일배움카드취업], [국비지원교육]
'[패스트캠퍼스] 프론트엔드 강의 정리' 카테고리의 다른 글
| [패스트캠퍼스] 프론트엔드 강의 #7 (1) | 2022.09.25 |
|---|---|
| [패스트캠퍼스] 프론트엔드 강의 #6 (0) | 2022.09.23 |
| [패스트캠퍼스] 프론트엔드 강의 #4 (1) | 2022.09.21 |
| [패스트캠퍼스] 프론트엔드 강의 #3 (0) | 2022.09.19 |
| [패스트캠퍼스] 프론트엔드 강의 #2 (0) | 2022.09.16 |