<a href=" ">
a는 태그이름
href 는 속성이름
" "는 속성값
/* */ 주석
<!-- --> 머릿말 (vscode 에서는 ctrl / 누르면 생김)
<a href = "./파일이름">
./ = 현재있는 폴더에서 파일 찾음
../ = 부모 폴더로 이동후 파일찾음
../../ = 부모폴더의 부모폴더로 이동 후 파일찾음
이건 좀 복잡하기떄문에 최상위 폴더를 기준으로 파일을 찾는데
<a href = "/파일경로와이름">
/ = 최상위폴더에서 시작
나무위키 같은거 생각해보면 한 페이지에서 클릭하면 원하는부분으로 가지게 하는데 그 방법은
먼저 원하는 부분에 id ="ted" 아이디 지정해주고
<a href ="#ted"> 이렇게 써주면 id가 ted인 부분으로 이동함
새탭에서 링크 열리게하기
<a href = "/파일경로나 주소" target="_blank">
기본은 현재창에서 열기
<a href ="/파일경로나 주소" target ="_self">
탭에 이름 붙여줄수도 있음
(처음에 새탭에서 열리고 그탭이 '탭이름'속성을 계속 그 탭에서만 열리게 가능)
<a href ="/파일경로나 주소" target ="_탭이름">
URL 스킴
<a href="mailto:test@example.com"> -> example.com에게 메일을 보내는 프로그램이 열림
<a href="tel:+821012340123"> -> 01012340123으로 전화걸수있게 전화앱켜줌
의미상 강조가 필요할떄 <strong></strong> 태그 사용가능 (글씨 두꺼워짐)
강조 2 <em></em> (글씨 기울어짐)
내용이 제거되었다는걸 알려주는 <s></s> (가운데에 취소선 그어짐)
긴글을 인용했다는걸 알려주는 <blockquote></blockquote> (들여쓰기 됨)
글사이에 짧게 인용하는건 <q><q> (큰따옴표 붙여짐)
위첨자 <sup></sup> (2<sup>3</2sup> -> 2의 3제곱)
아래첨자 <sub></sub> (화학기호 h2o같은거 표현할때 사용)
주제전환 <hr> (내용과 내용 사이에 수평선 쭉 그어짐)
<p> 와는 다르게 html에 쓴 그대로 보여주는 <pre></pre> (코드같은거 쓸때 사용)
<code></code> 글안에서 짧은 코드 작성할때 사용
순서 리스트만들기 (순위)
1. 라라랜드
2. 명량
앞에 숫자가 있는 이런 리스트를 만들려고할떄
<ol>
<li>라라랜드</li>
<li>명량</li>
</ol>
이렇게 적으면 위에서부터 순서대로 숫자를 적어줌
순서가 필요없는 리스트만들기 (카테고리)
<ul>
<li>라라랜드</li>
<li>명량</li>
</ul>
이러면 각 컨텐트 앞에 검정 점 붙음
css규칙으로 리스트 스타일을 바꾸려면
ol {
list-style : none (아무것도 앞에 쓰지않음)
}
ul > li{
display : inline-block; (리스트를 한줄로 쓰기)
border : 1px solid #dddddd;
border-radius: 24px;
}
이런식으로도 꾸며줄수있음
표만들기
(tr = 행나누기, thead = 표의 머릿글, th = 머릿글,바닥글 열나누기 (굵은글씨), tbody = 표내용 ,
td = 내용 열나누기, tfoot = 표의 바닥글 )
<table>
<tr>
<thead>
<th>(빈칸)</th><th>premium</th> <th>standard</th> <th>Basic</th>
</thead>
</tr>
<tr>
<tbody>
<th>TV</th><td>지원</td><td>지원</td><td><미지원></td>
</tbody>
</tr>
</table>
표꾸미기
table {
border : 3px solid red;
border-collapse: collapse; (셀간 여백 없애기) (border-spacing :15px; (셀간 여백 늘리기))
}
th, td{
border : 1px solid blue;
}
이미지
<img src=" 주소" alt="이미지에 대한 설명(화면엔 안뜸(이미지 오류시 뜸))" width = "300">
이미지 사이에 여백 안주려면 태그사이에 엔터나 스페이스 누르지말고 쭉치면됨
비디오
<video src="주소" autoplay muted controls width="480" height="360"> </video>
-> 주소의 동영상을 자동재생, 음소거, 아래에 재생 멈춤 소리 전체화면 등 컨트롤박스 줌
(크롬브라우저의 경우 autoplay 와 muted를 같이써야 자동재생가능)
오디오
<audio src="주소" autoplay controls loop></audio>
다른 html파일 불러오기(다른 웹페이지 불러올때 ex. 결재창, 유튜브)
<iframe class = "id" src="주소" width ="100" height ="200">
서버로 데이터 보내는 폼 만들기 (ex. 회원가입)
<form>
<label>이메일
</label>
</form>
<form action = "원하는 서버 주소" method : "get"> (폼안에서 작성한 내용을 원하는 서버 주소로 보낼것이다, get 대신 post를 넣으면 큰 용량의 정보를 서버에 주기 가능)
<laber for "signup-email">이메일</label> (for을 사용해서 input과 이메일을 연결가능)
<input id="signup-email" name ="email" type ="email">
(name은 input에 적은 내용을 idemail 이란
이름으로 저장한다는것)
<laber for "signup-password">비밀번호</label>
<input id="signup-password" name ="password" type="password"> (비밀번호 적는거 안보이게함)
<laber for "signup-password-repeat">비밀번호확인</label>
<input id="signup-password-repeat" name ="password-repeat" type="password">
<button type ="submit"> (폼 안에 있을때 적은 내용 전송)
확인
</button>
<button type ="reset"> (폼 안에 적은 내용 초기화)
취소
</button>
</form>
인풋의 다양한 타입들
type ="password" -> 칠떄 안보이게 만듬
type ="checkbox" -> 체크하는 경우 name 값에 "on"이라는 문자열로 저장
<label>
액션
<input type = "checkbox" name ="film" value ="action">
</label>
-> 체크하는 경우 name 값에 action이라는 문자열로 저장
type = "date" 선택한 날짜로 name에 저장
<input name = "avatar" type = "file" accept =".mp3, .png" multiple>
파일을 선택할 수 있게 해줌 , mp3 파일과 png 파일만 선택가능, 여러개 선택가능
(multiple 안쓰면 하나만 선택가능)
type = "email" -> 폼을 전송할때 이메일 형식인지 자동 검사해줌
<input type ="number" min"100" max="999" step = "100">
100에서 999사이로만 입력할수있고 버튼을 눌렀을때 숫자 100증가
type ="radio" (체크박스와 달리 같은 name 중에 하나만 선택할 수 있음)
<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>
<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>
<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>
<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</label>
value에 담긴 값으로 feeling에 저장됨
type ="range"
<input id="signup-feeling" name="feeling" min="1" max="10" type="range">
1부터 10 범위 안에서 선택가능
select (미리 정해져 있는 여러 값들 중에서 하나를 선택할 수 있게 해줌)
<label for="genre">장르</label>
<select id="genre" name="genre">
<option value="korean">한국 영화</option>
<option value="foreign">외국 영화</option>
<option value="drama">드라마</option>
<option value="documentary">다큐멘터리</option>
<option value="vareity">예능</option>
</select>
ex. 드라마를 고르면 name에 drama가 들어감
textarea (긴 글을 입력할 수 있게 해주는 인풋)
<textarea name = "content"> </textarea>
input에 아무것도 없을때 원하는 문장 뜨게하는 placeholder =""
placeholder의 디자인을 바꾸려면 css에 input :: placeholder 사용
required가 들어가 있는 경우 만약 인풋이 비어있다면 전송버튼을 눌러도 전송안됨
<input name="email" type="email" required>
autocomplete가 on이면 그전에 적어서 보냈던 값들이 저장됨
<input name="search" type="text" autocomplete="on">
<input name="email" type="email" autocomplete="email"> -> 이메일 저장
<input name="telephone" autocomplete="tel"> -> 전화번호 저장
link 태그 *head태그 제일 마지막에 써주자*
<link rel="stylesheet" href="style.css">
링크와의 관계는 스타일시트고 주소는 style.css이다
<link rel = "icon" href="favicon.ico">
링크와의 관계는 아이콘이고(주소창왼쪽에뜨는 아이콘) 주소는 favicon.ico이다
html에서 자바스크립트를 사용하는방법 (사이트에 여러가지 기능 추가할떄)
<script src="script.js"> </script>
script.js파일에 저장한 자바스크립트를 사용가능
*body태그 제일 마지막에 써줘야함*
의미를 가지는 태그인 시맨틱 태그(div 태그랑 성질같음)
(div 영역을 나누지만 의미가 담기지 않기때문에 시맨틱태그 사용)
시맨틱 태그 종류
<header> </header> -> 홈페이지 위쪽에 로고, 제목, 메뉴 를 담고있는 영역에 사용
<nav> </nav> -> 홈페이지 위쪽에 다른 페이지와 이어주는 메뉴 영역에 사용
<main> </main> -> 홈페이지의 내용 영역에 사용 (한페이지 안에서 한번만 쓸수있음)
<footer> </footer> -> 홈페이지 아래쪽에 홈페이지에 대한 정보나 전화번호를 담는 영역에사용
<article> </article> -> 하나의 완전한 내용(블로그 글 전체), 독립적인부분(블로그에서 댓글) 사용
<section> </section> -> 주제와 내용을 담고있는 article을 여러개 보여줄 떄 사용
<figure> </figure> -> 그림과 그림에 대한 설명에 사용
시맨틱태그를 써야하는 이유
검색엔진최적화SEO ( 잘 정리하면 사이트를 검색엔진 상단에 올릴수있음 )
웹접근성 A11y (시각장애인들이 인터넷을 사용할때 다 div태그면 원하는 부분을 읽기가 힘듬)
개발자관점(개발자가 코드를 읽을때 시멘틱코드사용하면 쉽게 이해할수있음)
'코딩 > HTML' 카테고리의 다른 글
| 1. HTML 기초 (0) | 2023.12.21 |
|---|