[HTML5] HTML5 정리

[HTML5] HTML5 정리


1. HTML5의 새로운태그

HTML5에서는 기존 div태그에 의미를 부여해 HTML문서를 보다 논리적으로 작성할 수 있다.

  • header : 문서의 헤더부분
  • nav : 문서의 네비게이션
  • figure :  문서의 멀티미디어요소
  • section :  특정콘텐츠 그룹화
  • article : 작은의미단위의 콘텐츠
  • footer :  문서의 푸터부분
  • aside :  문서의 사이드 콘텐츠

2. video태그

외부플러그인 없이 순수 웹표준기술로 동영상콘텐츠삽입

  • preload : 해당동영상을 재생전 미리불러오기
  • autoplay : 비디오를 자동재생
  • loop : 비디오를 무한반복 
  • controls : 비디오의 컨트롤패널을 생성

3.  nth-child()

원하는 순서값에 해당하는 태그를 선택하는 CSS선택자
태그명:nth-child(순서값){css}
ex ) li:nth-child(1){color:blue}

4. text-shadow, box-shadow

글자와 박스에 그림자생성

text-shadow, box-shadow : 가로축 세로축 퍼짐도 색상;


5. border-radius

사각형의 모서리를 둥글게하기

border-radius : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래


6. gradient 

배경에 그라디언트 색상과 모양지정
background : 그라디언트모양(방향, 색상1, 색상2)
ex ) div:nth-child(1){background:linear-gradient(to right, blue, red);}
ex ) div:nth-child(1){background:linear-gradient(45deg, blue, red);}
ex ) div:nth-child(1){background:radial-gradient(blue, red);}

7. background-size

배경이미지의 크기조절
background-size: 넓이값 높이값;

8. box-sizing 

블록요소의 넓이와 높이값 안에 padding과 border값 포함하기

box-sizing : border-box;


9. transform(2D)

특정요소의 모양을 평면상에서 자유롭게변형하기

translate : x축이나 y축으로이동
transform : translateX(x축이동거리);
transform : translateY(y축이동거리);
transform : translate(x축이동거리,  y축이동거리);

skew : 기울기
transform : skewX(각도)
transform : skewY(각도)
transform : skew(x축각도, y축각도)

scale : x축이나 y축으로 확대/축소
rotate : 평면상에서의 회전
transform : rorate(15deg);

transform-origin : 해당요소의 모양을 변경시 , 변경의 기준점 변경
각각 요소의 중심점이 가운데가 기준이나 이 기준점을 변경하는 것.
transform-origin : left top;
transform-origin : 20px  30px;
transform-origin : 0%  100%;

10. transform(3D)

특정요소의 모양을 3차원공간에서 입체적으로 변형하기

perspective : 원근감 설정하기
perspective의 수치가 작아질수록 왜곡이 커지며, 수치가 커질수록 왜곡은 작아진다.

이 속성을 사용할때는 부모, 자식태그가 필요하며 부모태그에 perspective 속성을 적용한다.

translateZ: Z축으로 이동하기 (사용자시점에서 앞,뒤로움직인다)
부모태그에 perspective 를 적용한후 자식태그에 transform:translateZ(-500px) 식으로 적용한다.

마이너스값은 사용자시점을 기준으로 멀리이동
플러스값은 사용자시점을 기준으로 가깝게 이동한다.

rotateX, rotateY : 3d 공간상에서 x축 y축을 기준으로 회전하기.


11. transition : CSS속성변화값을 일정시간동안 모션으로 효과주기

transition : 속성명 전환시간 가속도설정 지연시간;


12. animation : 미리지정해둔 설정값에 따라 자동으로 실행되는 모션만들기

animation / @keyframes 속성을 통해 움직임

@keyframes 모선이름 {
   0%{ 모션의 시작점의 CSS설정 }
  100%{ 모션의 끝점의 CSS설정 }
}
animation : 모션이름호출 시간 가속도 지연시간 반복횟수 방향지정(normal0~100반복/alternate 0~100~100~0);


13. mediaquery : 반응형웹, 해상도별로 원하는 CSS적용

@media screen and (min-width : 최소넓이폭) and (max-width : 최대넓이 폭){
  해당조건에 부합하는 CSS적용
}

댓글

댓글 쓰기

이 블로그의 인기 게시물

[파이썬] #2-모듈설치 및 스파이더(spyder)사용

이미지
[파이썬] #2-모듈설치 및 스파이더(spyder)사용 1. 모듈설치 conda list #설치된 모듈확인 conda install 모듈명1 모듈명2 .. #설치 [설치한 모듈] numpy :  pandas :  matplotlib :  spyder : 코드작업 도와주는 개발도구 모듈 2. spyder 사용 > spyder #프롬프트에서 spyder 명령어를 입력하면 실행됨. # -*- coding: utf-8 -*- """ Created on Mon Nov 18 21:03:01 2019 @author: ZZZPANDA """ # 주석 : 소스코드의 설명을 위해서 사용되는 설명문 (#, """-실제로는 주석이 아님, 메모리낭비) # 자동완성 : crtl + space # 단축키 : ctrl+1 # run(실행) : 단축키 F5 # Run selection or current line (선택된곳만 실행) : 단축키 F9 #변수선언 number = 10 number = 15 #출력문사용 # print 함수사용 # python은 '' , "" 둘다 가능. print(number) print("Hello Python~~!") print('') print("오늘은 {0}월 {1}일 입니다.".format(11,18)) import tkinter as tk window=tk.Tk() window.title('Hello Python Window') window.geometry('300x300+300+300') window.resizable(False, True) window.mainloop()
자세한 내용 보기

[Tool-Tip] 에디트플러스에서 자동정렬기능 추가하기

이미지
에디트플러스에서 자동정렬기능 추가하기 처음 코딩을 접할때 에디트플러스로 시작했다. 퍼블리싱을 할때 가볍기로는 제일 좋은 듯하고 (개인취향임.. 다른 에디터는 조금 버벅이는게 느껴진다. ) FTP 쓰기에도 간편하다. 몇 년간 에디트 플러스를 자주 쓰다가 다른 에디터( vscode , atom, eclipse 등..)를 쓰다보니 자동정렬 기능이 항상 아쉬웠다. 다른 에디터로 갈아타려다가 혹시 자동정렬기능이 있을까하여 구글검색을 해보니 어떤 개발자분이 올려둔 정렬 기능이 있더라... 왜 지금찾아봤을까( 검색을 생활화 하자 ) [설정과정] 1. htmlarg.exe 파일을 다운로드한다.  사용환경 : Windows , Editplus / 개발자 : http://www.killrain.net(현재 닫혀있다) 2. 에디트플러스 실행 -> 도구 -> 사용자 도구 구성 -> 추가 -> 다운받은 프로그램(htmlarg.exe) 선택 명령 : 다운로드 받은 htmlarg.exe 파일의 경로 지정 인수 : 정렬을 위한 인수 설정 [ ex : tt? D,head,body,header,footer,nav,section,li,ol,ul D D $(CurSel) ] 동작 : 텍스트 필터로 실행(바꾸기) 3. 적용 -> 확인 으로 완료. 4. 그룹1에 설정했다면  CTRL + 1 ( + 영역선택 ) 단축키로 실행 [인수설정방법] [들여쓰기][서버스크립트][코드들여쓰기] [태그리스트1] [태그리스트2] [태그리스트3] ($CurSel) 들여쓰기 : 0~9까지의 숫자, 탭문자를 이용하고 싶으면 t를 사용 코드들여쓰기 : 0~9까지의 숫자, 탭문자를 이용하고 싶으면 t를 사용 서버스크립트 : 아무것도 적지 않으면 php로 설정 (? 와 동일) , jsp, asp 의 경우 %를 쓴다. 태그리스트1 - 들여쓰기할 태그리스트 : D를 이용하면 기본태그(tr,td,d...
자세한 내용 보기

[파이썬] #1- 아나콘다 설치, 아나콘다 파이썬 환경 만들기

이미지
[파이썬]#1- 설치 1. 아나콘다(Anaconda)설치 수학과 과학 분야에서 사용되는 여러 패키지들을 묶어 놓은 파이썬 배포판 https://www.anaconda.com/ Python 3.7 version(현재최신) [download] - Anaconda.exe 파일 Install  중 all user(C드라이브안에 설치) / just me(사용자계정안에 설치) 선택 - Add Anaconda to my PATH enviroment variable 체크해제 ( 환경변수추가 : 기존파이선과 충돌가능성있음 - 체크해제권장 ) - just me 선택시 C:\Users\[사용자명]\.anaconda 경로에 설치 2. Anaconda navigator 시작 - 실행이 무거워서 Prompt 로 개발 3. Anaconda Prompt 실행 (base) C:\Users\사용자>conda --version #아나콘다 버전확인 conda 4.7.12 (base) C:\Users\사용자>python --version #파이썬 버전확인 Python 3.7.4 (base) C:\Users\사용자>conda info --envs #아나콘다 환경확인 # conda environments: # base * C:\Users\사용자\Anaconda3 (base) C:\Users\사용자>conda create -n test python=3.5 #아나콘다 파이선 환경 3.5버전 만들기 Collecting package metadata (current_repodata.json): done Solving environment: failed with repodata from current_repodata.json, will retry with next repodata source. Collec...
자세한 내용 보기