2020. 11. 19. 11:45ㆍ퍼블리싱/HTML
11월 19일 1일차
HTML
웹표준을 구현하는 기술: html css sass javascript jqueary
가독성을 높이는 메뉴의 개수: 7개
웹에디터: 메모장, 드림위버, 에디터플러스, brackets, aptana 등
Brackets: 컴퓨터를 서버화하므로 작업 시작 전 폴더 설정 필수
- 확장 기능 설치 : emmet(자동완성), brackets tree icons(파일별 아이콘 모양), beautify(줄맞추기)
Html5 레이아웃
<!DOCTYPE html> : html 사용하겠다 선언
<html>
<head> : meta, title, link, style, script
<meta charset="utf-8"> : 웹문서의 정보. 인코딩방식, 작성자, 작성날짜 등
<title>제목</title>
</head>
<body>
내용
<!-- 주석 -->
</body>
</html>
* ! 입력 후 탭 키 클릭 시 자동 완성
* ctrl + / : 자동 주석 설정 및 해제
* 자식 태그: 하위 태그
형제 태그: 같은 줄 내의 태그
태그 종류
1. 블럭요소 : 줄이 변경된다.(블럭 요소 안에는 블럭을 넣을수 없다)
h1~h6,p,address,ul,li,ol,dl,dt,dd,div
2. 인라인요소 : 줄이 변경되지 않는다.
a,img,form,input,label,select,textarea,span
글자관련 inline-i,em(html5),strong(html5),b,sup,sub,del,ins,ruby,mark,small(html5-),kbd,dfn
시멘틱태그 :의미를 가지는 태그로 태그를 구분한다.
블럭 - header, footer, nav,aside, section,article
audio,video
* 포토샵 : pixel(도트) 기반 구성
일러스트 : 벡터 기반 구성 (좌표 간 선으로 연결) 확대/축소 시 용량 변화x, 깨짐x 확장자.svg ->최근 애플에서 주로 사용
폰텔로(fontello) : 문자 작성후 CSS 조작-> 그림으로 표현, 깨짐x
* html validator : 작성한 웹의 접근성이 유효한 지 확인
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
블럭 태그
h# 제목, 현재는 중요도를 나타냄, 항상 순차적으로 사용할 것
h1 로고, h2 메뉴( html5의 navi 태그 생성으로 요즘은 생략하기도 함), h2~6 본문 제목으로 사용
(html5 section 태그의 제목은 h2사용)
p (paragraph)문단
br (break)예전 버전에서는 <br/>
hr (horizental)구분선, 의미적으로 구분 in html5
address 유일하게 p태그 사용 가능*
목차
부모 ul (unorder list) 순서가 없는 목차를 만들때 (html5 - 메뉴, 배너)
부모 ol (order list) 순서가 있는 목차를 만들때
자식 li (list) 목차 항목
* ul, ol은 li만 자식태그로 허용, li는 ul, ol 태그를 자식으로 가질 수 있음
부모 dl (definition list)
자식 dt (definition term)
자식 dd (definition description)
div (division) 의미x, 요소 묶어 영역 표시
* ctrl + d : 커서 위치의 태그 복사
* ' li*6 ' 입력 후 탭 = <li></li>*6
* ctrl 클릭 동시에 커서 선택하고 v : 선택한 각 위치로 붙여넣기
* ' p{문단$}*30 '
* ' ul>li*3>a[href="#"] '
인라인 태그 (같은 줄에 있음)
a (anchor) #=임시링크(현재페이지의 top 화면), #void 현재페이지의 현재 화면
절대주소: 웹주소/파일위치지정, 상대경로: 현재 폴더 안의 파일명
traget="_blank" (웹표준 권장사항은 아님)
무료 호스팅 사이트
닷홈 - 호스팅은 닷홈
닷홈은 무제한 웹호스팅, 무료호스팅, 도메인, 홈페이지빌더, 무제한메일, SSL보안인증서, 서버호스팅, 코로케이션 서비스를 제공하고 있습니다.
www.dothome.co.kr
ftp 프로그램
https://filezilla-project.org/
FileZilla - The free FTP solution
Overview Welcome to the homepage of FileZilla®, the free FTP solution. The FileZilla Client not only supports FTP, but also FTP over TLS (FTPS) and SFTP. It is open source software distributed free of charge under the terms of the GNU General Public Licen
filezilla-project.org
'퍼블리싱 > HTML' 카테고리의 다른 글
| html: favicon 파비콘 태그와 meta메타 태그, 시멘틱 태그 활용하여 마크업 실습 (0) | 2020.11.26 |
|---|---|
| 클론코딩 with html5: header,section,footer,aside (0) | 2020.11.25 |
| html: audio, 지도 api, 공간 분할 태그, 시멘틱 태그, markup 실습, 홈페이지 레이아웃 짜기 (0) | 2020.11.25 |
| html: form 태그와 속성, input, label, select, fieldset (0) | 2020.11.23 |
| 이미지 태그, 이미지맵, 글자 태그, 테이블 태그 (0) | 2020.11.20 |