fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
- <!DOCTYPE html> : 문서의 HTML버전을 지정. 웹브라우저가 어떤 HTML버전의 해석방식으로 페이지를 이해하면 되는지를 알려주는 용도
- <html></html> : HTML문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할
- <head></head> : 문서의 정보를 나타내는 범위. 웹 브라우저가 해석해야할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위
- <body></body> 문서의 구조를 나타내는 범위. 사용자 화면을 통해 보여지는 로고, 헤도, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹페이지의 보여지는 구조를 작성하는 범위
<div>
<h1>오늘의 날씨</h1>
</div>
- <div> : 블록요소로 특별한 의미가 없는 구분을 위한 요소. (Division)
<h1>오늘의 날씨</h1>
- <h1> : 블록요소로 제목을 의미하는 요소. h1 ~h5(숫자가 작을수록 더 중요한 제목)까지 사용할 수 있음. (Heading)
<p>중부 집중호우, 남부는 열대야, 12호 태풍 북상 중..</p>
<p>
<span>동해물</span>과 백두산이 <br />마르고 닳도록
</p>
- <p> : 블록요소로 문장을 의미하는 요소. (Paragraph)
- <span> : 인라인 요소로 특별한 의미가 없는 구분을 위한 요소
- 동해물 : "동해물"이라는 글자만 처리하고 싶을 때 span으로 묶어 스타일 처리를 할 수 있다.
- <br /> : 인라인 요소로 줄바꿈 요소.(Break)
<img src = "img/weather.jpg" alt = "12호 태풍" />
- <img> : 인라인요소로 이미지를 삽입하는 요소(Image)
- src 속성 : img의 필수 속성으로 삽입할 이미지의 경로를 입력
- alt 속성 : img의 필수 속성으로 삽입할 이미지의 이름을 입력, 이미지가 화면에 출력되지 않을 때 해당 이미지의 이름이 출력
<ul>
<li>사과</li>
<li>딸기</li>
<li>수박</li>
<li>오렌지</li>
</ul>
- <ul> : 블록요소로 순서가 필요없는 목록의 집합을 의미. (Unordered List)
- <li> : 블록요소로 목록 내 각 항목(List Item)
<a href = "https://www.naver.com" target="_blank" title = "네이버로 이동">NAVER</a>
- <a> : 인라인요소로 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. (Anchor)
- href 속성 : 링크 URL입력
- target 속성 : 링크 URL의 표시(브라우저 탭)위치를 나타내는 속성으로 '_blank'로 값을 입력하면 새로운 탭에 열린다.
- title 속성 : 요소의 정보나 설명을 지정. 마우스로 가리킬 시 뜨는 내용
<input type = "text" />
ex)
<input type = "text" value = "Hello!" />
ex)
Hello!
<input type = "text" placeholder = "이름을 입력하세요" />
ex)
이름을 입력하세요
- <input> : 인라인-블럭요소로 베이스는 인라인 요소지만 블럭요소 특징도 가지고 있다. 사용자가 데이터를 입력하는 요소
- type 속성 : 입력받을 데이터의 타입
- value 속성 : 미리 입력된 값(데이터)
- placeholder 속성 : 사용자가 입력할 값(데이터)의 힌트. 마우스로 클릭하면 사라진다.
- disabled 속성 : 입력요소 비활성화
<label>
<input type ="checkbox" />Apple
</label>
<label>
<input type ="checkbox" /> Banana
</label>
- <label> : 인라인 요소로 라벨 기능요소의 제목
- checkbox : 사용자에게 체크 여부를 입력받음
- checked 속성 : 체크박스 입력요소 체크됨
<label>
<input type = "radio" name ="fruits" /> Apple
</label>
<label>
<input type= "radio" name = "fruits" /> Banana
</label>
- radio : 사용자에게 체크여부를 그룹에서 1개만 입력받음
- fruits란 이름의 그룹
▶ Class 와 Id 그리고 data-이름
◎ Class
- 요소를 지칭하는 중복 가능한 이름
- CSS에서 .class이름{ }으로 호출
◎ id
- 요소를 지칭하는 고유한 이름(중복사용 불가)
- CSS에서 #이름으로 호출
◎ data-이름 = "데이터"
- 요소에 데이터를 지정
- 나중에 javascript에서 사용
'Frontend' 카테고리의 다른 글
| 10. 상속되는 CSS 속성들 (0) | 2021.07.25 |
|---|---|
| 9. CSS 문법 정리 (0) | 2021.07.25 |
| 8-1 HTML 문법 정리하기 - 태그 (0) | 2021.07.24 |
| 7. 브라우저 스타일 초기화 하기 (0) | 2021.07.23 |
| 6. 웹에서 페이지 구성 후 테스트 해보기(codepen.io) (0) | 2021.07.23 |
