1. 핵심 요소 정리
- div(Division)
- 블록요소
- 특별한 의미가 없는 구분을 위한 요소이다.
<div>
<h1>...</h1>
<p>...</p>
</div>- h1 - h6 (Heading)
- 블록요소
- 제목을 의미하는 요소
- 숫자가 작을수록 더 중요한 제목을 정의한다.
(제목의 중요도를 생각해 숫자를 선택하면 된다)
<h1>오늘의 날씨</h1>- p (Paragraph)
- 블록요소
- 문장을 의미하는 요소
<p>중부 집중호우, 남부는 열대야, ...</p>- img (Image)
- 인라인요소
- 이미지를 삽입하는 요소
- src : 이미지의 경로, alt : 이미지가 없을경우 표시할 대체 텍스트 (필수속성)
<img src="img/weather.jpg" alt="태풍"/>- ul (Unordered list)
- 블록요소
- 순서가 필요 없는 목록의 집합을 의미한다.
- ol 태그는 순서가 있는 목록이지만 자주 사용하지는 않는다.
- li (List Item)
- 블록요소
- 목록 내 각 항목을 의미한다.
<ul>
<li>사과</li>
<li>딸기</li>
<li>수박</li>
</ul>- a (Anchor)
- 인라인요소
- 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소이다.
- Anchor는 닻을 의미하는 단어로 하이퍼링크를 건다는 행위와 유사하다는 특징이 있다.
- href : 이동할 경로를 명시, target=”_blank” : 링크의 브라우저 위치를 지정한다.(_blank는 새탭)
<a href="www.naver.com">NAVER</a>
<a href="www.google.co.kr" target="_blank">GOOGLE</a>- span
- 인라인요소
- 특별한 의미가 없는 구분을 위한 요소
- 특정한 글자에 다른 처리를 하고 싶을 경우에 사용한다.
(요소를 어떤 요소로 묶어주는 행위를 Wrapping(래핑)이라고 한다)
<p>
<span>동해물</span>과 백두산이 마르고 닳도록
</p>- br (Break)
- 인라인요소
- 줄바꿈 요소
동해물과 백두산이<br/>마르고 닳도록- input
- 인라인요소, 블록요소(= inline-block) 인라인요소지만 블록요소의 특징도 갖고 있다.
- 수평으로 쌓이는 인라인요소의 특징을 갖고 있고, 가로, 세로의 길이 지정과 여백이 정상적으로 적용되는 블록요소의 특징도 갖고 있다.
- 사용자가 데이터를 입력하는 요소
- type : 입력받을 데이터의 타입을 명시
- value : 미리 입력될 값을 지정한다.
- placeholder : 사용자가 입력할 값에 대한 힌트를 명시한다.
- disabled : 입력요소를 비활성화한다.
<input type="text" value="HEROPY!"/>
<input type="text" placeholder="이름을 입력하세요!"/>- input type=”checkbox”
- 사용자에게 체크여부를 입력받는다.
- type=”checkbox” : type속성을 checkbox로 지정한다.
- checked : type이 체크박스일경우 해당 체크박스에 체크가 되있게끔 한다.
- label
- 인라인요소
- 라벨 가능 요소(input)의 제목
- label요소를 사용하게 될경우 체크박스 부분 뿐만이 글자를 선택해도 체크박스가 선택이 된다.
<label>
<input type="checkbox"/>Apple
</label>
<label>
<input type="checkbox"/> Banana
</label>- input type=”radio”
- 사용자에게 체크여부를 그룹에서 1개만 입력받는다.
- name : 그룹을 명시한다. name 속성의 값이 같은 input끼리는 같은 그룹에 속하게 된다.
<label>
<input type="radio" name="fruits"/>Apple
</label>
<label>
<input type="radio" name="fruits"/> Banana
</label>- table
- 표 요소, 행(Row)과 열(Column)의 집합
- tr (table-row)
- 행을 지정하는 요소
- td (Table Data)
- 열을 지정하는 요소
<table>
<tr>
<td>A</td><td>B</td>
</tr>
<tr>
<td>C</td><td>D</td>
</tr>
</table>2. 주석
<!--애국가-->
<p>
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
</p>주석처리를 원하는 부분 앞뒤로 ‘<!—’와 ‘—>’를 붙여주면 해당 부분은 메모처리가 되어 코드에 영향을 미치지 않게 된다.
단축키
윈도우에서는 Ctrl + / 로, 맥에서는 Command + / 로 주석처리가 가능하다.
3. 전역속성
title
title 속성은 전역속성으로써 html의 모든 태그에 대해서 사용할 수 있는 속성이다.
요소의 정보나 설명을 지정한다.
아래와 같이 코드를 작성할경우 링크에 해당하는 부분에 커서를 올리면 title속성으로 지정한 텍스트가 커서부분에 나타난다.
<a href="https://naver.com" title="네이버로 이동하세요">NAVER</a>style
요소에 적용할 스타일(CSS)을 지정한다.
class
요소를 지칭하는 중복가능한 이름이다.
<p>
<span>동해물과</span> <span class="red">백두산</span>이 마르고 닳도록
하느님이 보우하사 <span class="red">우리나라</span> 만세
</p>만약 위의 html코드에서 ‘백두산’, ‘우리나라’를 빨간색으로 표현하고 싶어 아래와 같이 span태그의 스타일을 지정해주었다면 앞의 ‘동해물과’부분도 같이 변경되게 된다.
span {
color: red;
}‘백두산’, ‘우리나라’만을 변경하고 싶을 경우 각 span 태그에 class=”red”와 같이 class 전역속성을 지정해준다음 해당 class에 스타일을 지정해주면 된다.
class에 스타일을 지정해줄경우 class 선택자인 “.”을 class이름 앞에 붙여주어야 한다.
.red {
color: red;
}id
요소를 지칭하는 고유한 이름이다.
<p>
<span id="blue">동해물과</span> <span class="red">백두산</span>이 마르고 닳도록
하느님이 보우하사 <span class="red">우리나라</span> 만세
</p>id는 고유한 이름이므로 중복해서 사용해서는 안된다. 사용한다고 해서 특별히 오류가 나지는 않지만 이는 표준으로 지정되어 있으므로 사용해서는 안된다.
class와 마찬가지로 id도 선택자가 있는데 id는 “#”을 앞에 붙여 css스타일을 지정해줘야 한다.
#blue {
color: blue;
}data
요소에 데이터를 지정한다.
해당 속성을 지정한 태그에 지정한 데이터를 잠시 저장해둔다는 의미이다.
나중에 자바스크립트를 사용할 때 유용하게 사용된다.
<태그 data-이름="데이터"></태그>예시
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>‘data’뒤에 ‘-’(하이픈)을 붙이고 원하는 이름을 지정한다. (fruit-name)그리고 값으로 원하는 값을 지정한다.(기본적으로 문자열)
const els = document.querySelectorAll('div')
els.forEach(el => {
console.log(el.dataset.fruitName)
})자바스크립트에서 해당 속성을 선택해 저장한 데이터를 가져와 사용할 수 있다.
(단 fruit-name에서 ‘-’은 없어지고 ‘fruitName’처럼 사용해야 한다, 카멜표기법)
예시2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="./main.js"></script>
</head>
<body>
<div data-fruit-name="apple">apple</div>
<div data-fruit-name="banana">banana</div>
</body>
</html>script태그에 defer속성을 주지 않고 js파일을 연결해서 사용할 경우 js파일은 script태그 윗줄까지의 내용만을 읽은 상태에서 실행하게 된다.
따라서 모든 html문서를 읽은 상태에서 실행하기 위해 defer 속성을 주어야 한다.
(HTML구조가 준비된 후 (문서 분석 이후)에 JavaScript를 해석하겠다는 의미가 있다)
