생활코딩 HTML5 3일차이후 - 2021.05.11.화 ~ 2021.05.27.목
생활코딩 HTML 강의에서 다룬 내용들을 복습과 기억 목적으로 적어둔다.
오늘부터는 그냥 태그와 속성을 여기에 한번에 정리
[tag(태그)]
현재 약 140개 정도 (cf.1990년에 팀버너스리가 처음 고안 시 18개~20개 태그 존재 후 퇴출 추가 의미변경 등 이루어짐)
* 입력할 때 항상 닫히는 태그도 처음에 같이 입력하자! 까먹을 수 있으니까~!!
1. <!DOCTYPE html> : document type declaration (문서 형식 선언)
자신이 작성한 HTML 코드가 어떤 방식의 HTML 코드로 작성되었는지를 선언.
표준을 브라우저에게 알려주는 문자.
2. <html></html>가 기본 : 모든 태그를 이 안에
3. <head></head>
· <title>: 탭 제목
· <meta> [charset] 캐릭터(문자)세팅 cf) 닫히는 태그가 꼭 필요하지 않음 안닫아도 됨. 이런 태그가 몇개가 있음.
ex) <meta charset="utf-8"> : 글씨 깨질 때
[name]="description", "keywords", "author", "viewport"(content="width=device-width, initial-scale=1.0(원본사이즈)" : 모바일에서 볼 때 사이즈 조절해주는 거) : [content]랑 같이 씀
[http equiv]="refresh" : [content]랑 같이 씀
html은 정보!!
· <style>
4. <body></body> : 본문
· <a>: 링크 걸기 cf) 속성과 함께 사용 <a href=""></a>
· <p>: 단락 나누기 표시 정보 표현이기 때문에 쓰는게 좋음. 근데 줄바꿈 간격 정해져있음 간격조절하려면 br태그 이용하거나 css랑 같이
· <br>: 강제로 줄바꿈 a forced line-break 내용없는거니까 cf) 닫히는 태그 필요 없음.
· <img>
[src]
[alt]: 이미지 깨졌다는 표시옆에 같이 나오는 말 (대체)
[title]: 마우스 대고 있으면 나오는 말
cf) 닫히는 태그 필요 없음
ex) <img src="">
높이나 넓이 중 한가지만 지정하면 알아서 예쁘게 해줌
· <table> 표만들기 근데 과거에는 이걸로 레이아웃을 만들기도 하였음
※ thead/tbody/tfoot 구분은 안해도 되긴 하는데 보기 좋으라고 구조 잡아줌
<thead>/<tbody>/<tfoot> : 얘네들은 만약 프로그래밍 시 순서 바꿔적어도 각각 위치가 정해져 있음.
<tr>: 행 table row
=<th>: 헤드부분에서 셀 내용 진하게 표시해줌 (=<td>: 셀 table data)
[border=""]: 표 테두리
[rowspan=""]: 셀 병합 (행) (이거 쓰고 병합당하는 해당 셀 <td>는 지워준다.)
[colspan=""]: 셀 병합 (열) (이거 쓰고 병합당하는 해당 셀 <td>는 지워준다.)
· <form>
[action]: 폼 제출시 여기 링크로 보냄 "submit"누르면 전송.
[method] = "get" (기본, 보여주는거) "post"(안보여주는거) : submit시 url에 전송하는 내용 보여주는 방식
보통 폼이용시 거의 post
Cf) get 은 url에 보여주고 post는 숨겨서 다른서버에서 보는 걸로 이해
[enctype] multipart/form-data
· <input>: 입력 칸 만들어줌 버튼도 이걸로 만듦
[type] = "text" "password" "submit" "hidden" "file" "number" "date" "month" "week" "time" "email" "search"(그냥 검색창이라고 알려주는 정보) "tel" "url" "range" 등등
cf) 버튼 "submit", "button"(단독으로는 아무일도 안일어남. 자바스크립트랑 써야 됨.), "reset"("text"리셋)
cf) "hidden" 은 UI가 없지만 서버로 값을 전송하고 싶을 때 이용
cf) "file"은 name 안하면 에러나는 경우도 있고 <form method="post" enctype="multipart/form-data"> 로 무조건 해야 됨.
[name]: 링크 연결 시 url주소창에 이름 나옴
[value]: 기본 문구
[placeholder]: 배경 문구
[autocomplete]: 자동완성
[autofocus]: 커서 자동
[required]: 필수 입력 항목
[pattern]="[a-zA-Z][a-zA-Z]" "[a-zA-Z].+[0-9](.:어떤 문자든 가능 +:이상) "등으로 정규표현식 제약
· <textarea> : 여러 줄 입력가능한 것
[cols] 열 폭
[rows] 행 폭
※ 기본 문구 value 속성 x 그냥 <textarea>여기에씀</textarea>
· <select>
[name]
[multiple]: 다중선택
· <option>
[value]: 여기선 기본 문구가 아니고 url에 표시되는 문구
· font 는 퇴출당함 중복사용등으로 가독성을 해치고 정보로서의 html의 역할을 방해해서 css로
cf) 정보저장: 인코딩
정보를꺼내서화면에표시하는과정: 디코딩
5. 의미론적 웹 만드는 태그 (semantic element)
기능이 있는게 아니고 정보만 알려줌
<header> 헤드섹션
<footer> 아래섹션
<article> 본문
<section> 본문들, 섹션 묶기 애매한것들 이걸로 각각 묶어줌
<nav> 문서의 내비게이션 li들이 여러개니까 알기 어려우니까 이걸로 표시
6. 검색엔진 최적화: 어떻게 연결되는지
· 크롤링: 검색엔진이 사이트 정보를 가져가는 것
웹의 도로는 하이퍼텍스트(링크)로 페이지 정보를 가져감. 링크가 잘 되어있어야함
HOME페이지에 다른 웹페이지로 이동할 수 있는 링크들이 잘 되어있어야 한다는 의미 - 만약 이 부분이 콤보박스같은(<option>) 자바스크립트 등을 연결하게되면 검색엔진이 인식하기는 너무 어려움. 페이지 이동은 하이퍼텍스트로!!~~~!!
· 상위항목들 내부링크 잘 정리
· 페이지 오류 시 단순 오류 표시 보다는 상위 디렉토리로 이동시키는 것도 하나의 방법! (동선 제공)
· Title태그의 내용이 검색 결과의 제목으로~!!!
· Meta name="description" 태그가 검색 결과의 본문영역에 표시 됨.
· url (html 파일 이름) 도 내용과 관련된 내용으로
· <link rel="canonical" href="">를 쓰면 같은내용을 가졌지만 이름은 다른 파일이 검색엔진에 읽히도록 설정할 수 있다. 얘가 진짜야~!! 이런 느낌.
[개발도구 ATOM (확장기능 emmet)] 사용했음.]
[단축키]
· tab키로 바로 닫히는태그까지 나옴
cf) > * 를 이용하여 여러개의 태그를 한번에도 가능
· ctrl+alt+오른쪽화살표: 편집포인트 이동
· 그냥 tab 하면 들여쓰기