매번 실패 하고 있는 html5를 다시 들여다보는 이유
조금 더 이쁘게 내가 그리는 그림을 그리고 싶어서? 그런데 이유는 명확한데 실행하는 건 어렵.....
나에게는 퍼즐 맞추는 게 어렵다.
이해 ㅇㅋ 구조 ㅇㅋ 내가 본 멋진 페이지를 벤치마킹해서 적용해보면
매번 망하기 때문 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그래서 이번에는 결단코 성과를 내야겠다고 마음먹고, 집 앞 도서실에서 2권을 대여해왔다.
이 책만 몇 번을 대여받아오는지 ㅋㅋㅋㅋㅋ 하루 이틀 잠깐 보다가 반납하기를 반복했다. 부끄럽다
첫 장을 넘기면 "HTML5 Cheat Sheet" 페이지부터 나온다.
HTML5 Cheat sheet
<!--주석-->
HTML5 구조 태그
<! DOCTYPE html> block 문서 형태
<html> 문서 자체
<head> 문서 머리
<title> 문서 제목
<meta> 문서 추가 정보
<body> 문서 본문
<link> 외부 파일을 추가합니다
<style> 스타일시트
<script> 스크립트
<div> 블록 형식의 공간
<span> inline 형식의 공간
<시멘틱 구조 태그>
<artcle> 본문
<aside> 수직 목록
<nav> 내비게이션 목록
<section> 구역
<header> 머리
<footer> 꼬리
<hgroup> 제목 그룹
시멘틱 요소 태그
<figure> 그림
<figcaption> 그림 제목
<details> 세부 설명
<summary> 요약
<output> 출력 결과
제목 태그
<h1>~<h6> 제목
글자 태그
<p> 문단
<br> 개행
<hr> 수평선
<ruby> 루비 문자
<rt>루비 문자의 큰 글자
<rp> 루비문자 지원 여부 판별
글자 형태 태그
<b> 굵은 글자
<i> 기울어진 글자
<small> 작은 글자
<sub> 아래에 달라붙는 글자
<sup> 위에 달라붙는 문자
<ins> 밑줄 글자
<del> 가운데 줄이 그어진 글자
리스트 태그
<ul> 순서가 없는 목록
<ol> 순서가 있는 목록
<li> 목록 요소
<dt> 정의 목록
<dd> 정의 글자
<dl> 정의 설명
테이블 태그
<table> 표
<caption> 표제목
<thead> 표 머리
<tbody> 표본 문
<tfoot> 표 꼬리
<colgroup> 표열 그룹
<col> 표열
<tr> 표하아
<th> 표 제목 데이터
<td> 표 데이터
멀티미디어 태그
<img> 이미지
<audio> 음악
<video> 동영상
<source> 멀티미디어 파일 지정
<track> 동영상 자막 지정
<svg> SVG객체
<canvas> Canvas 객체
입력 양식 태그
<form> 입력방식
<fieldset> 입력 양식 그룹
<legend> 범례
<button> 버튼
<label> 입력 양식 설명
<input> 입력 양식 요소
<textarea> 문자 입력 양식
<select> 선택 입력 양식
<optgroup> 옵션 그룹
<option> 옵션
기타 태그
<progress 진행 상태 표시 바
<meter> 상태 표시바
CSS3 Cheat Sheet
폰트 관련 속성
font 폰트
font-family 폰트 종류
font-size 폰트 크기
font-style 폰트 형태
font-variant 폰트변경
font-weight 폰트두께
변환 관련 속성
transform 변환
transfrom-origin 변환 중심
transform-style 변환 형태
perspective 투시 수치
perspective-origin 투시 중심
perspective visibillty 후면 가시성
변형 관련 속성
transtion 변형
transtion-property 변형 대상
tanstion-duration 변형 진행 시간
tanstion-timing-funsion 변형 수치 변환 함수
transion-delay 변형 지연 시간
애니메이션 관련 속성
animation 애니메이션
animation-name 애니메이션 이름
animation- duration 애니메이션 진행시간
animation-timing-function 애니메이션 변환함수
animation-delay 애니메이션 지연시간
animation-itertion-count 애니메이션 반복 횟수
animation-direction 애니메이션 방향
animation-play-state 애니메이션 진행상태
배경 속성
background 배경
background-attachment 배경 부착 방식
background-color 배경 색상
background-image 배경 이미지
background-position 배경 위치
background-repeat 배경 빈복 형식
background-clip 베경 적용 범위
baxkground-origin 배경 중심 위치
background- size 배경 크기
테두리 속성
border 테두리
border-color 테두리 색상
border-style 테두리 형태
border-width 테두리 두께
border-radius 테두리 곡률
border-image 테두리 이미지
border-image-outset
border-image-repeat 테두리 반복 형식
berder-image-silce 테두리 이미지 분활 비율
broder-image-source 테두리 이미지 파일
border-image-width 테두리 이미지 두께
outline 테두리 외각
outline-color 테두리 외곽 색상
outline-width 테두리 외곽 두께
그림자 속성
text-shadow 글자 그림자
box-width 박스 두께
박스 관련 속성
width 너비
heigth 높이
margin 마진
padding 패딩
box-size 크기 지정 방식
가시 속성
dispaly 표시형태
visibilty 가시성
opacity 투명도
overflow 내용물이 넘칠경우의 처리방식
위치속성
position 위치지정 방식
left 왼쪽
top 위
right 오른쪽
bottom 아래
z-index 태그의 스택 순서
float 부유 방식
글자 관련 속성
color 글자 색상을 지정 합니다
direction 글자 진행 방향
letter-spacing 글자 간격
line-heigth 글자 높이
taxt-align 그자 정렬 방식
text-decoration 글자 꾸밈 방식
text-indent 글자 들여 쓰기 크기
text-transform 글자변환
vertical 글자 수직 정렬 방식
whith-space 글자 공백 처리방식
text-overflow 글자가 넘칠 경우의 처리방식
word-spacing 단어간격
word-wrap 단어가 넘칠경우 처리방식
포스팅한줄평
독수리 타자인데 자판 연습도 하고 좋네 (손목 아픔)
컨닝 페이퍼를 보며 퍼즐을 맟쳐보자.