HTML 핵심 개념

링크

• 링크의 상대 경로
  < a href="movies/" >
  현재 상영작
  < /a >
  < a href="movies/contents.html" >
  현재 상영작
  < /a >
  둘 다 같다
  ./는 현재 폴더
  ../는 부모 폴더
  /를 붙이면 최상위 폴더로 이동
  (< a href="/" >홈페이지로 가기< /a >) 이런식으로 가능
  

• 링크 fragment
  아이디 속성에 이름을 지정해 놓으면 주소 맨 마지막에 fragment로 사용할 수 있다
  ex)ko.widipedia.org/wiki/한국영화#codeit(#codeit이 부분이 fragment이다)
  아이디 값을 주소에 써야 하기 때문에 띄어쓰기는 사용 불가하다
  ex)<h2 목차 /h2>
  < a href="#인터넷의__역사" > 인터넷의 역사< /a >
  < a href="#대한민국의__인터넷__역사" > 대한민국의 인터넷 역사< /a >
  < a href="#인터넷__이용자__수" > 인터넷 이용자 수< /a >
  
  < h2 > id="인터넷의역사">인터넷의 역사< /h2 >
  < h2 >id="대한민국의인터넷역사">대한민국의 인터넷 역사< /h2 >
  < h2 >id="인터넷이용자수">인터넷 이용자 수< /h2 >
  이런식으로 해주면 a태그를 클릭했을 때 해당 제목 #으로 이동한다.

• 새 창 열기
  a태그에 target="_blank"를 추가해주면 새 창에서 열린다
  a태그에 target="_self"를 추가해주면 현재 창에서 열린다(default 값이다)
  href="mailto:~~~"(메일 보내기)
  href="tel:+0000"(전화 걸기)

링크 상대 주소 예시

(최상위 폴더가 blog이고 그 안에 about.html, contact.html, index.html이 있을 때 현재 페이지가 about.html일 때 index.html로 연결하는 링크 주소)

• < a href="index.html" >홈페이지< /a >
  index.html이기 때문에, 현재 폴더에서 index.html을 가리킵니다. 즉 blog/index.html을 가리키므로 올바른 주소
• < a href="./index.html" >홈페이지< /a >
  ./가 현재 폴더, 즉 blog/를 가리키기 때문에 blog/index.html을 가리키는 올바른 주소입니다.
• < a href="./" >홈페이지< /a >
  이때 index.html 파일은 주소에서 생략이 가능하기 때문에 2번에서 index.html을 생략한 주소입니다. 그래서 blog/index.html을 가리키는 올바른 주소입니다.
• <a href="/" 홈페이지 /a>
  최상위 폴더는 blog/이고, index.html이라는 경로는 생략할 수 있기 때문에 blog/index.html을 가리키는 주소입니다.

자주 쓰는 태그

• 제목 태그 h1~h6
  
• 본문 p
  
• 줄바꿈 br
  
• 중요 strong(두꺼운 글씨)
  
• 강조 em
  
• 취소 s (가운데 줄 그어진다)
  
• 인용 blockquote (글 안에서 짧게 인용할 때는 q)
  
• 위 첨자, 아래 첨자(H< sub > 2 < /sub >O / 3< sup > 2 < /sup >)
  (H20 / 3의2제곱)
  
• 주제 전환 hr (닫는 태그 X)
  
• 미리 서식이 정해진 텍스트 pre(코드에 적혀있는 그대로 보여줌)

리스트

• 순서 리스트
  ol태그로 먼저 감싸준 후
  li태그 사용
  
  
• 순서 없는 리스트
  ul태그로 먼저 감싸준 후
  li태그 사용
  
  
• 리스트 스타일링
  ol type="a" (a b c로 된다)
  ol type="A" (A B C로 된다)
  ol type="i" (i ii iii로 된다)
  ol type="I" (I II III로 된다)
  
  style태그를 추가하고 ol {list-style: disc;} 이렇게 해주면 ul처럼 나온다
  f12를 눌러서 뭐가 있는지 확인할 수 있다.(각 나라별 순서, 한글(가,나,다)등등 가능)
  
  ul {list-style: none;} 이렇게 해주면 앞에 아무것도 없다.
  ul > li {
  display: inline-block;
  border: 1px solid #dddddd;
  border-radius: 24px;
  padding: 8px;
  }
  이런식으로 하는 것도 자주 사용하니 알아두는 것이 좋다

테이블

• 테이블 태그(표로 정리된 정보를 나타낼 때 사용)
  table태그: 표 전체를 감싸는 태그
  tr태그: 각 줄을 감싸는 태그(행을 나누는 태그 table row)
  td태그: tr로 나눠져 있는 것을 세로로 나눠주는 태그, 다른 tr안에 있는 td들과 개수 맞춰주기 빈태그로라도 해놓기(표에서 한칸에 해당 table data cell)
  
  
• 머리글 바닥글
  머리글은 thead태그로 감싸주기
  thead태그 안에 있는 것들 중 제목을 나타내는 것은 td가 아닌 th로 바꿔준다
  바닥글이 아닌 나머지는 tbody태그로 감싸준다
  바닥글은 합계같은 것들 이다 tfoot태그로 감싸준 후 td가 아닌 th태그를 써준다
  
  
• 테이블 스타일링
  style태그 안에
  table {border: 1px solid red;} 전체 태두리에 적용된다
  th, td {border: 1px solid blue;} 모든 셀에 적용된다
  table {border-collapse: collapse;} 셀들 사이의 여백이 사라진다
  table {border-spacing: 15px;} 셀들 사이의 여백이 커진다

멀티 미디어

• 이미지
  < img src="" alt="영화 명량 포스터" width="300" height="428" >
  alt: 이미지에 대한 정보를 text로 적는 속성
  width: 너비
  height: 높이
  이미지 다운에 실패해도 크기를 알 수 있다
  
  
• 비디오
  < video src="" autoplay muted controls width="480" height="300" >< /video >
  autoplay: 페이지가 로딩되면 자동으로 재생
  muted: 자동재생이 되었을 때 소리가 크게 되어 있을 경우 거부감이 들기 때문에 설정(보통 autoplay와 같이 쓴다)
  controls: 재생버튼, 소리조절 등이 생긴다
  width: 너비
  height: 높이
  

• 오디오(기본적으로 화면에 보이지는 않는다)
  < audio src="" controls autoplay >< /audio >
  controls: 이것을 추가하면 화면에 보인다
  autoplay: 크롬에서는 동작하지 않지만 사파리에서는 동작한다
  
• iframe
  html문서 안에서 다른 html문서를 보여주는 태그
  
  < iframe src="....html" width="200" height="160" >< /iframe >
  다른 웹페이지를 불러와서 보여줄 때 사용(지도, 결제창 등등)
  

폼(form)

• form태그 안에 input태그를 써주면 입력창이 생긴다
  (< form > < input > < /form >
  
  label태그 안에 input을 써주면 이메일을 클릭해도 입력창을 클릭한 것 처럼 된다
  < form >
  < label > 이메일 < input > < /label >
  < /form >
  
  

  < form >
  < label for="signup-email" >이메일< /label >
  < input id="signup-email" >
  < /form >
  같다
  

  < input id="signup-email" name="email" >
  name속성을 쓰면 입력창에 입력을 하고 엔터를 누르면 주소창에 email=입력한 내용이 나온다

  < input id="signup-email" name="password" type="password">
  비밀번호같은 것을 입력할 때에는 type에 password를 써주면 입력하는 내용을 가릴 수 있다
  

• 버튼(button)

  < form >
  < button >
  확인
  < /button >
  < /form >
  확인 버튼이 생긴다(버튼을 누르면 내용이 전송된다)
  

  < button type="button" >
  아무동작도 하지 않는 버튼이다
  

  < button type="reset" >
  내용을 초기화하는 버튼으로 바뀐다
  

  form태그 밖에 button태그를 만들면 눌러도 아무것도 일어나지 않는다
  

• value

  input태그 안에 사용하는 value속성을 통해 미리 지정된 값을 설정해 놓을 수 있으며 글을 적어놓을 수 있다.
  

• select, option

  option은 value속성과 같이 써준다
  

• required

  반드시 입력해야 하는 값이 있다면 required속성을 써준다
  required인 input의 값이 비어있다면 전송 버튼을 눌러도 전송되지 않는다
  

• autocomplete

  autoconplete="on" 이렇게 써준다
  입력한 값을 웹 브라우저에 저장해 두고 나중에 인풋에 값을 입력할 때 추천해준다
  

  autocomplete="email" 이메일을 채워 넣게 하고 싶다면
  autocomplete="tel" 전화번호를 채워 넣고 싶다면
  

다른 코드를 불러오는 태그

• link(css파일이나 아이콘 등을 불러올 때 사용)
  < link rel="stylesheet" href="style.css" >
  rel: 불러올 파일이 어떤 용도인지(stylesheet, icon)
  href: 불러올 파일의 주소
  

• script(자바 스크립트를 실행할 수 있는 코드 / 주로 body태그 안에서 맨 마지막에 써준다)
  < script >
  console.log('제주 앞바다에서 코딩하자!')
  < /script >
  안에 있는 문장을 console창에 출력하라는 코드
  < script src="script.js" >< /script > 이렇게도 가능

의미있는 HTML

• 시맨틱 태그(영역을 의미있게 나눌 때 사용, div와 기능은 같다, 작성하는 사람의 의도가 중요)

  • header(영역 위쪽에서 로고나 제목, 메뉴 같은 것을 담고 있는 도입부)
  • nav
  • main(한 페이지에서 딱 한번만 쓴다)
  • footer(영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음)
  • article(하나의 독립적인 내용을 나타낼 때 사용)
  • section
  • figure(이미지와 이미지에 대한 설명)

• 시맨틱 태그를 사용하면 좋은 점

  • 검색 엔진 최적화(Search Engine Optimization)
    사람들이 검색해서 들어올 때 딱 맞게 보여주는 것(상단에 위치하는 것)
    head태그 안에 meta태그를 꼼꼼하게 작성하고 시맨틱 태그를 작성하면 된다
    

  • 웹 접근성(Web Accessibility)
    장벽 없는(Barrier-Free) 인터넷을 만드는데 중요하다
    

  • 유지보수성
    개발자의 생산성을 높여준다