HTML 핵심개념
링크의 상대주소
현재 폴더는 점 한개(./)로 표시하고, 상위 폴더는 점 두개(../)로 표시한다.
최상위 폴더는 경로 맨앞에 그냥 (/)로 시작하면 된다. 특별히 index.html파일은 이름을 생략하고 폴더이름만 쓸 수 있다.
URI프래그먼트
페이지의 특정 부분을 가리키는 주소이다. 원하는곳에 id속성을 지정해두고, 링크 주소로 사용할때는 맨끝에 #으로 시작하는 #id_name을 쓰면 된다.
인터넷 사용 자체가 인권 <a href="#id_name"></a>이라고 말했다.target 속성
새 창(새 탭)으로 열거나 현재창으로 열 수 있다.
<a href="www.naver.com" target="_blank">naver</a> <!--새 탭에서 열기-->
<a href="www.daum.net" target="_self">daum</a> <!--현재창에서 열기-->++ 이런 기능도 있다.
<a href="mailto:example@naver.com">메일 보내기</a>
<a href="tel:+821011124565">전화 걸기</a>태그정리
제목 : <h1>~<h6>
본문 : <p>
줄바꿈 : <br>
중요 : <strong>
강조 : <em>
주제전환 : <hr> // 줄 생김
인용한 말 : <q>
순서리스트
항목들 사이에 순서가 있는 목록을 작성할 때 <ol>이라는 태그를 감싸고, 그 안에 항목은 <li>태그를 쓴다. 순서없는 리스트는 <ol>이 아닌 <ul>을 사용한다.
<ol>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ol>리스트 스타일링
list-style이라는 css속성으로 변경이 가능하다.
ul {
list-style : disc; // 동그라미로 순서를 보여줌
list-style : none; // 기호가 아예 없어짐
list-style : none; // 리스트를 한줄로 쓰고 싶을때
display : inline-block; // 활용할 수 있다.
}테이블
정보를 표로 나타낼 때는 <table>이라는 태그를 사용한다. 테이블의 행은 <tr>(table row)태그로 감싼다.각 데이터들은 <td>(table data)태그로 넣는다.
머리글
표에서 머리글은 <thead>로 감싼다. 행은 <tr>태그로 감싸주면 된다. 각 행안에 있는것들은 제목이기 때문에, <td>가 아닌, <th>라는 태그를 넣는다. 본문에 해당하는 행들은 <tbody>라는 태그로 감싸주면 된다.
바닥글
표에서 바닥글은 <tfoot>이라는 태그로 감싼다. <thead>와 마찬가지로 행은 <tr>로 감싸고, 제목으로 쓰는 칸은 <th>태그를 넣는다.
테이블 스타일링
border 속성을 사용해서 테두리를 넣을 수 있다. 이때 표 전체에 테두리를 넣고 싶으면, <table>태그에 적용하고, 각 셀에 적용하고 싶으면 <td>태그 등에 적용하면 된다.
border-collapse : collapse; (간격을 없앰)
border-spacing : 10px; (간격을 10px만큼 줌)
<table>
<thead>
<tr>
<th></th>
<th>Premium</th>
<th>Standard</th>
<th>Basic</th>
</tr>
</thead>
<tbody>
<tr>
<th>맨 왼쪽 첫번쨋 줄 요소</th>
<td>맨 왼쪽 첫번쨋 줄 요소의 설명</td>
<td>맨 왼쪽 첫번쨋 줄 요소의 설명</td>
<td>맨 왼쪽 첫번쨋 줄 요소의 설명</td>
</tr>
<tr>
<th>맨 왼쪽 두번쨋 줄 요소</th>
<td>맨 왼쪽 두번쨋 줄 요소의 설명</td>
<td>맨 왼쪽 두번쨋 줄 요소의 설명</td>
<td>맨 왼쪽 두번쨋 줄 요소의 설명</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>요소들의 가격 등</th>
<th>요소들의 가격 등</th>
<th>요소들의 가격 등</th>
</tr>
</tfoot>
</table># style.css
table {
border : 1px solid black;
border-collapse : collapse; // 간격제거
width : 520px;
}
th, td {
border : 1px solid black;
text-align : center;
width : 25%; // 열 너비를 동일하게 설정
height : 50px; // 행 높이를 동일하게 설정
}멀티미디어
이미지 <img>
파일 주소는 src속성으로 지정한다. 크기는 width와 height 속성으로 px단위 없이 지정할 수 있고, 이미지에 대한 설명은 alt라는 속성을 사용한다.
<img src="image.jpg" alt="이미지입니다." width="720" height="720">
비디오 <vidoe>
파일 주소는 src속성으로 지정한다. 크기는 width와 height속성으로 px단위 없이 지정할 수 있고, 그 외에 자동재생을 하는 autoplay속성, 자동재생시, 음소거를 하는 muted속성, 영상을 조작할 수 있는 버튼을 보여주는 controls속성이 있다. 특히 자동 재생은 불쾌감을 줄 수 있기 때문에 일부 브라우저에서는 반드시 muted와 함께 써야 작동한다.
<video src="video.mp4" autoplay muted controls width="720" height="720"></video>
오디오 <audio>
파일 주소는 src속성으로 지정한다. 자동재생을 하는 autoplay 그리고 조작하는 버튼을 보여주는 controls속성이 있다.
<audio src="audio.mp3" autoplay controls></audio>
iframe <iframe>
인라인 프레임이라는 뜻으로, 다른 HTML문서를 문서안으로 집어 넣을때 사용한다. src로 불러올 문서의 경로를 지정해주면 된다. 이미지, 비디오, 오디오와 마찬가지로 크기를 width, height라는 속성으로 지정할 수 있다.
<iframe src="description.html" width="750" height="530"></iframe>
폼
기본적인 폼의 형태는 이러하다.
<form>
<label for="username">아이디</label>
<input id="username" name="username">
<label for="password">패스워드</label>
<input id="password" name="password" type="password">
<button>로그인</button>
</form>label for는 id를 바라보는데, 해당하는 '아이디'라는 라벨을 누르게 되면 id가 username인 input으로 포커싱이 된다.
name은 input태그의 이름을 지정하는건데, 아무거나 해줘도 상관없다.
type="password"는 input하는곳에 들어가는 input값을 흔히 알고있는 password방식으로 가려준다.
type도 여러가지가 있는데
email : 이메일 형식
password : 비밀번호 형식
date : 날짜 선택
file : 파일 업로드
checkbox : 체크 박스(여러개 선택 가능함)
radio : 체크 박스(한개만 선택 가능함)
select : 옵션 선택
textarea : 긴 글
등이 있다.
input태그의 속성에는 여러가지가 있는데, 유용한것 몇가지를 알아보자면
<input name="username" placeholder="username을 입력하세요.">
placeholder로 값이 비어있는곳에 설명을 적어놓을 수 있다.
css로 이것을 꾸며주려면
input::placeholder {
color : #e12345;
}이렇게 하면 된다.
<input name="email' type="email" required>이렇게 required를 해주면 필수입력칸으로 만들 수 있다.
<input name="search" type="text" autocomplete="on">을 해주면 입력한 값을 브라우저에 저장해두고, 나중에 인풋에 값을 입력할 때 자동으로 추천해준다.
link태그
외부에 있는것을 불러올 때 사용하는 태그이다. 어떤 목적인지를 rel속성에 적고, 위치는 href로 지정하면 된다. 주로 head태그 안에서 마지막에 써준다.
<head>
...
<link rel="icon" href="favicon.ico">
</head>script태그
자바스크립트 파일을 불러올때 사용하는 태그이다. 파일의 위치는 src로 적어준다. 주로 body태그 안에서 맨 마지막에 써준다.
<script src="like.js"></script>
의미있는 HTML
head태그는 페이지에 대한 정보를 담고 있는 태그이다. 주로 이 페이지에 대한 데이터를 담고 있는데, 화면에 보여주기 보다는 웹 브라우저가 읽어서 처리하는 용도이다.
<head>
...
<title>사이트의 이름</title>
<link rel="stylesheet" href="style.css">
...
</head>시맨틱 태그
div태그와 기능은 완전히 같지만, 의미가 담겨있는 태그들을 시맨틱 태그라고 한다. 엄격한 사용법이 존재하는것은 아니지만, 검색 엔진 최적화나 접근성을 높이는데 많은 도움을 준다.
<header> : 영역 위쪽에서 로고나 제목, 메뉴 같은것을 담고 있는 도입부
<nav> : 메뉴바 등
<main> : 사이트의 본격적인 내용으로 한 페이지에서 딱 한번만 사용가능하다.
<footer> : 영역 아래쪽에서 여러가지 연락처나 관련 정보들을 담고 있음
<article> : 하나의 완성된, 독립적인 내용을 나타내는 영역
<section> : 어떤것의 일부분을 나타내는 영역
<figure> : 이미지와 이미지 설명을 담고 있는 영역