HTML, CSS #1
HTML (HyperText Markup Language)
웹 페이지의 구조를 표현하는 마크업 언어
구조를 잘 짜놓으면, 자바스크립트로 개발할 때 더욱 직관적인 코드를 작성할 수 있다
- 의미가 있는 (Semantic, 시멘틱) 태그
- 다른 사람이 이해하기 쉽다
- Opening tag, closing tag, self-closing tag
HTML은 tree structure
<div> ~~~ </div>
Opening tag closing tag
<img ~~ /> <img ~~>
self-closing tag
자주 쓰는 HTML 요소 (Element)
div, span
내용을 담을 공간(container)을 만드는 태그
<div>div 태그는 한 줄을 차지합니다</div>
<div>div 태그2</div>
<span>span 태그는 내용 크기만큼 차지합니다</span>
<span>span 태그2</span>
<span>span 태그3</span>
div 태그는 한 줄을 차지합니다div 태그2span 태그는 내용 크기만큼 차지합니다 span 태그2 span 태그3
img
이미지를 넣는 태그, 닫는 태그가 없음
<img src="https://cdn.pixabay.com/photo/2021/08/21/21/10/animal-6563620_640.jpg">
a
하이퍼텍스트 링크를 넣는 태그
<a href="https://www.google.com/">GOOGLE</a>
li, ul, ol
목록을 만드는 태그
- li - list
- ul - unordered list (정렬되지 않은 목록), li와 비슷
- ol - ordered list
<li>목록 1</li>
<li>목록 2</li>
<li>목록 3</li>
목록 1 목록 2 목록 3
<ol>목록 1</ol>
<ol>목록 2</ol>
<ol>목록 3</ol>
- 목록 1
- 목록 2
- 목록 3
input
다양한 입력을 받는 태그
<input type="text"> 일반 텍스트
<input type="password"> 입력 내용이 보이지 않는 텍스트
<input type="checkbox"> 체크박스, 각자 선택 가능
<input type="radio", name="choice", value="value"> radio 체크박스
<!-- radio 박스들은 같은 이름을 가진 것들 중 하나만 선택이 가능하다 -->
<!-- 입력을 받는 다른 태그들 -->
<textarea></textarea> 여러 줄을 입력가능한 공간
<button>Button</button> 누를 수 있는 버튼
Author And Source
이 문제에 관하여(HTML, CSS #1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alskfl/HTML-CSS-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)