html: 구조를 만드는 마크업언어
css: 스타일을 담당하는 디자인 언어
java script: 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용할수있게 해주는 프로그래밍 언어
<HTML 기본 구조와 문법>
HTML(HyperText Markup Language)
-웹페이지의 구조를 짜는 마크업언어 (프로그래밍 언어 아니다.)
-tag들의 집합 (tag:부등호로 묶인 html의 기본구성요소)
-트리 구조
<!DOCTYPE html> 이문서가 html문서임을 명시
<html > html 시작태그로, 문서 전체의 틀을 구성
<head> 문서의 메타데이터를 선언
<title>: page title </title> 문서의 제목, 브라우저의 탭에 보여짐
</head>
<body> body태그는 문서의 내용을 담는 곳
<h1> hello world </h1> heading을 의미하며 크기에 따라 h1~h6까지 있음
<div> contents here content division을 의미하며, 줄바꿈됨
<span> here too </span>
</div>
</body>
</html>
#self closing tag
태그 내부에 내용이 없다면 <tag/>와 같이 표현가능
<p class="paragraph">This is a paragraph.</p>
* class="paragraph" : 속성(attribute)
* class: attribute의 name (html속성의 이름)
paragraph: attribute의 value (html 속성의 값)
* <p class="paragraph"> :시작태그(opening tag)
* </p> :종료태그(closing tag)
* This is a paragraph. :콘텐츠(contents)
*전체다: HTML요소(element)
<자주사용하는 HTML요소>
# div, span, br
div태그는 한줄을 차지한다.
div는 콘텐츠 길이와 상관없이 한줄 전체를 차지하는 요소이다.
span태그는 컨텐츠 크기다. 줄바꿈가능. 형광펜칠할때사용.
br : 줄바꿈을 의미
# section vs div
- 기술적인것은 같다. 의미가 다르다
- div는 아무런의미가 없는 메모일때
section은 구분을 하고 싶을때
div로 막 써도된다.
# img :이미지삽입
-img뒤의 src같은건 속성이다.
-닫는 태그가 없다
<img src=" ">
# src : 이미지
alt : 대체텍스트이다. 이미지안나오는경우 설명
# a : 링크삽입
<a href="주소"> 코드스테이츠 </a>
-새로운 창에서 열고싶으면
<a href="주소" target="_blank">코드스테이츠</a>
# li, ul, ol:리스트
ol은 숫자가 들어간 리스트 (orderedl list)
ul은 그냥 동그라미나 그런 모양으로 들어간 리스트 (unordered list)
<ul>
<li>item1</li>
<li>item2</li>
</ul>
# input, textarea: 다양한 입력폼
<input type="text" placeholder="type here'>
입력상자가 생기고 text형식을 쓸수 있고 그안에 type here이라고 써있다.
<input type="password">
입력상자가 생기고 password형식을 쓸수있다
<input type="checkbox">다음에 들어올때 ID기억하기
체스박스가 생기고 그 뒤에 다음에들어올때ID기억하기 글자가 나온다.
radio버튼과 checkbox의 차이는
radio버튼은 둘중하나 (name속성 설정해줘야한다. 하나의그룹으로 설정을해줘야한다.)
checkbox는 여러개가 선택이 가능하다.
<input type="radio" name="option1">옵션A
<input type="radio" name="option1">옵션B
radio는 name으로 그룹화를 해줘야 그중에서 선택하는게 된다. 안그러면 중복선택된다!
# textarea :글상자 만드는거
닫는태그 꼭해줘야한다. <textarea></textarea>
그 안에서 줄바꿈이 된다.
# button: 버튼
닫는태그 있어야한다.
<button>로그인</button>
<로그인 페이지 만들기>
<input type="text" placeholder="ID"/>
<input type="password" placeholder="password"/>
<button>로그인</button>
<label><input type="checkbox">로그인유지하기 </label>
<시맨틱요소>
#시맨틱요소를 사용해야하는이유
-검색엔진이 웹페이지들을 방문할때 시맨틱 요소를 중요한 키워드로 고려한다.
즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될수 있다는 것이다.
-여러 개발자가 함께 작업할때 div요소를 탐색하는 것보다 훨씬 더 편리하고, 요소안에 채워질 데이터 유형도 예측하기 쉽다
# header
-페이지나 해당섹션의 가장 윗부분에 위치
-보통 사이트의 제목이 들어간다
-선택적으로 상단바나 검색창 등이 안에 들어갈수 있다
# nav
-내비게이션의 약자
-상단바 등 사이트를 안내하는 요소에 사용
-보통은 안에 <ul>을 넣어 목록 형태로 사용
# main
-문서의 주된 콘텐츠를 표시
# footer
-페이지나 해당파트의 가장 아랫부분에 위치
-사이트의 라이선스, 주소, 연락처 등을 넣을때 사용
# article
-독립적이고 자체 포함된 콘텐츠를 지정한다
# aside
-본문의 주요부분을 표시하고 남은부분을 설명하는 요소
-특별한일 아니면 사이드바, 광고창 등 중요하지않은부분에 사용
ex>네이버 첫번째창에서 쇼핑광고창 자리부분
# P
- <p>요소는 paragraph(문단)의 약자
- 하나의 문단을 표현하기 위하여 사용됩니다.
# section과 article 관계는 사이트마다 다르다.
*VS code에서 html 이용시 꿀팁 = ! + tap
*select : 직업 보기중 고르는 그런 모양 만들때
option value 같이 이용해서 사용
<div>
ID <input type="text" placeholder="type here">
</div>
<div>
password <input type="password">
</div>
<div>
<input type="checkbox"> 다음에 들어올때 id기억하기
</div>
<div>
<input type="radio" name="option1"> 남
<input type="radio" name="option1"> 여
</div>
<textarea></textarea>
<div>
<button>로그인</button>
</div>
출처
- https://www.w3schools.com/html/html5_semantic_elements.asp
'부트캠프교육중 > HTML' 카테고리의 다른 글
| 리플로우와 리페인트 (0) | 2023.03.16 |
|---|---|
| 브라우저 렌더링 (0) | 2023.03.16 |
| 브라우저의 구조 (0) | 2023.03.16 |
| 브라우저 (0) | 2023.03.16 |
| HTML의 id와 class (0) | 2022.12.21 |
