티스토리 뷰
웹개발
- HTML: 구조
- CSS: 스타일
- JavaScript: 기능(상호작용)
HTML은 트리 구조Tree Structure로 설계됨
- 부모 요소 안에 자식 요소
여는 태그- 닫는 태그
<html> </html> 문서 전체의 틀을 구성
<head> </head> 문서의 메타데이터를 선언
<title> </title> 문서의 제목, 브라우저 '탭'에 보여짐
<body> </body> 문서의 내용을 담음
<h1> </h1> heading. 글자크기, 여백에 따라 h1~h6이 있음
<div> </div> content division. 줄바꿈. 여백은 없음
div 태그는 구역만 나눌뿐 아무 의미가 없기 때문에 큰 구역을 구분하기 위해 사용하는 것이 지양됨.
최후의 수단(->p 태그, 시맨틱요소section/form)
<span> </span> 줄바꿈이 없는 content 컨테이너
<p> </p> 줄바꿈, 약간의 여백
- div, span, p 차이(공간 차지)
div는 한 줄을, span은 컨텐츠 크기 만큼, p는 한 줄+ 여백만큼 공간 차지
<a href="링크" target="_blank"> </a>
link(하이퍼링크)
href에 파일을 직접 연결하는 경우 href="./파일.html" (./는 현재 위치를 의미, 생략 가능)
target의 기본값은 "_self" 현재 프레임에서 오픈, "_blank"는 새 윈도우나 탭에서 오픈
* 위 href, target 등을 속성(attribute)라고 하는데
href, target을 attribute name, 속성 이름, 키
값을 attribute value, 속성 값, 밸류 라고 부름.
<textarea> </textarea> 여러줄 입력할 수 있는 인풋 박스,
속성값 cols(너비;기본값20)와 rows(줄 수;기본값2)로 크기 지정 가능
maxlength로 최대 문자 수 지정 가능
<button> </button> 버튼
<ol type="A" start="3"> </ol> 정렬된 목록(1,2,3,...)
type="" 숫자1, 대문자A, 소문자a, 로마자I, 로마자i 지정 가능
start="" 어디서부터 시작할지 지정
<ul> </ul> 정렬되지 않은 목록(가운뎃점●) unordered list
<li> </li> 목록의 항목
ol과 ul은 자식요소로 li만 가능,
li 내부에서는 다른 자식 요소 가능
(마커를 없애는 css list-style: none;)
드롭다운 만들기: 셀렉트 태그 내부에 옵션 태그들을 넣어 드롭다운을 만들 수 있음
<select> </select>
<option value=""> </option>
<script src="파일.js"> </script>
내부에 자바스크립트 코드를 작성하여 사용할 수 있으나, 보통 직접 입력하지 않고 js파일을 연결함
self-closing Tag(닫는 태그가 없음)
<img src="링크/파일" alt="이미지가 안나올 경우 나올 메세지" value="화면에 남기고 싶은 데이터"/> '/' 생략 가능
<input type="checkbox"> 데이터를 입력할 필드
<input>의 type값 type=" "
* 속성 placeholder="입력 예시" 사용 가능
text 기본값. 한줄 입력
password 값이 가려진 텍스트 필드. 한줄 입력 ●●●●●
button 버튼(<input type="button">은 버튼에 배경을 지정할 수 없는데 <button></button>은 배경을 넣을 수 있음)
checkbox 체크박스. 여러 값 동시에 선택 가능
체크박스 사용 시
<input type="checkbox"> 운동
위처럼 만들 경우 글자를 누르면 체크가 되지 않고 체크박스를 눌러야만 체크가 된다.
글자를 눌러도 체크 표시를 하고 싶은 경우 아래와 같이 <label> </label>태그를 같이 사용(인풋 태그에 id 지정 후 라벨 태그에 for로 연결해주어야함)
<input id="todo_workout" type="checkbox">
<label for="todo_workout">운동</label>
radio 같은 name값을 가진 여러 선택지 중 하나의 값만 선택 가능
color 색 지정 컨트롤
date 날짜 지정 컨트롤
email 이메일 주소, 유효성검증/ 보기에는 text처럼 보임
file 파일 지정 컨트롤, 속성 accept를 이용하여 파일 유형을 정할 수 있음(.png, .jpg, .pdf 등)
number 숫자 입력 컨트롤
등등
<form> // 서버로 데이터를 보낼 때 form태그로 감싸야 함
<label for="name"> ID: </label> // for속성에 input의 id값을 지정하여 input과 연결
<input type="text" id="name" oninvalid = "this.setCustomValidity('hi') required/>
// required 유효성검사 oninvalid 유효하지 않을 때 나올 메세지
<button type="submit">
</form>
* id와 class
id
: "유일". 고유한 이름을 붙일 때(Selector #)
class
: "반복". 같은 class값을 지정해줌으로써 동일한 유형임을 알 수 있다.(Selector .)
Selector를 이용하여
<div id="writing-section">를 div#writing-section
<li class="comment">를 li.comment로 표현할 수 있음
시맨틱 요소 Semantic
: 의미를 가진 요소
시맨틱 요소를 사용하는 이유
1. 검색 엔진이 시맨틱 요소를 더 좋아하기 때문에
- 시맨틱 요소를 주요한 키워드로 봄
= 시맨틱 요소에 담긴 의미에 따라 상위 노출이 결정될 수 있음
2. 여러 개발자가 함께 작업할 때 <div> 요소 탐색보다,
의미있는(시맨틱) 코드 블록을 찾는 것이 편리, 요소 안의 데이터 유형을 예측하기도 쉬움
=> html 태그 작성 시, 페이지의 데이터를 가장 잘 설명할 수 있는 요소가 무엇일지 고려해야 함.
시맨틱 요소의 종류
<article>
독립적이고 자체 포함된 콘텐츠를 지정
<aside>
본문의 주요 부분을 표시하고 "남은 부분"을 설명하는 요소
- 보통 사이드바나 광고창 등 주요하지 않은 부분에 사용
<footer>
일반적으로 페이지나 해당 파트의 가장 아래 부분에 위치
- 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용
<header>
일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치
- 사이트의 제목/ 선택적으로 상단바나 검색창이 들어갈 수 있음
<nav>
navigation의 약자로 보통 안에 <ul>를 넣어 목록 형태로 사용
- 상단바 등 사이트를 안내하는 요소에 사용
<main>
문서의 주된 컨텐츠 표시
<section>
제목, 컨텐츠가 포함된 구획을 나눌 때 사용
<form>
사용자 입력을 제출하는 용도(입력한 값을 다른 페이지로 전송)
보통 컨트롤(input, button 등)을 포함 -> 화면을 전환시키기 때문에 사용 시 주의 필요
22.10.27
코스 S1U4
'코드스테이츠(SEB_FE_42)' 카테고리의 다른 글
| [CSS] Flexbox (0) | 2022.10.28 |
|---|---|
| [CSS] 문법, Selector (0) | 2022.10.27 |
| [JS] 제곱, 제곱근, 소수 구하기 (0) | 2022.10.25 |
| [JS] 조건문, 문자열 (0) | 2022.10.24 |
| [JS] 변수, 타입, 함수 (0) | 2022.10.21 |