HTML 주요 태그

span, p

 주로 텍스트를 넣어줍니다. <p>태그는 <span>태그와 달리 줄바꿈이 일어납니다.
 

a

<a> 태그는 클릭하면 화면이 이동합니다.
<a> 태그의 href 속성(attribute)에 이동해야 하는 주소를 써주면 됩니다. 
target 속성에 "_blank" 값은 클릭하면 새창으로 뜨게 해주는 값입니다.

 <a  target ='_blank' ></a>	 새 윈도우 창을 열어 웹페이지를 여는것. 기존의 창은 그대로 남겨져 있다. 
 <a  target='_self' ></a>	 현재 윈도우창에 그대로 웹페이지를 연다.
 <a  target='parent' ></a>	 현재 프레임의 부모 프레임에서 새 웹페이지가 열린다.
 <a  target='top' ></a>	 최상위 프레임에 열린다. 
 _parent와 비슷하지만
 _parent는 바로 이전창(부모창)에서 열리는 반면, 
 _top은 최상위 (가장최고 부모창)에 열린다.

div

<div>를 사용하는 이유는, 비슷한 부분끼리 그룹지어주고
디자인에 맞게 레이아웃을 분리해주고,각 <div>에 class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있기 때문입니다.
예를 들어 헤더, 메뉴, 주요 내용, 푸터.. 이렇게 나누어 div로 묶어 줍니다.

meta name="viewport" content="width=device-width"

디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미입니다. 
모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보입니다. 
해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타납니다.

dl dt dd

dl 정의 설명하는 목록을 만듬

<dl>
  <dt>정의</dt>
  <dd>정의를 설명합니다.</dd>
</dl>

 <a  target ='_blank' ></a>	 새 윈도우 창을 열어 웹페이지를 여는것. 기존의 창은 그대로 남겨져 있다. 
 <a  target='_self' ></a>	 현재 윈도우창에 그대로 웹페이지를 연다.
 <a  target='parent' ></a>	 현재 프레임의 부모 프레임에서 새 웹페이지가 열린다.
 <a  target='top' ></a>	 최상위 프레임에 열린다. 
 _parent와 비슷하지만
 _parent는 바로 이전창(부모창)에서 열리는 반면, 
 _top은 최상위 (가장최고 부모창)에 열린다.

animation

@keyframes

keyframes

keyframes vs transition( 마우스 갖다대면 변하는 :hover 나, :checked )

키프레임은 시작과 끝 값 정해주면 알아서 자연스럽게 움직이는 게 핵심

@keyframes 애니메이션이름 {
from{}                    0%{}
           로 쓰거나 
to{}                      100%{}
 } 

이렇게 해놓고,

<div class = "hello"> 로 들어갈 곳에 class 지정해놓고

css에 

.hello {animation : 애니메이션이름 3s linear } 로 설정 

애니메이션 속성

• animation-name : 내가 만들 애니메이션 이름(숫자나 특수문자로 시작하면 안됨)
• animation-duration : 애니메이션이 작동하는 시간 지정 ( 1s = 1초 0.1s = 0.1초 100ms = 0.1초)
• animation-delay : 애니메이션의 지연 시간, 3초로 설정하면 로드되고 3초뒤 애니메이션 실행됨
• animation-direction : 애니메이션의 진행 방항(normal. reverse, alternate 등)
• animation-iteration-count : 애니메이션의 진행 횟수 혹은 무한 반복 ( 3, infinite 등)
• animation-play-state : 멈추거나 다시 진행 (paused, running)
• animation-timing-function : 전환속도조절 ( linear, ease in, ease out, ease in-out, ease 등)
• animation-fill-mode: 애니메이션 끝난 후 끝에 있을지 앞에 있을지 지정 (forwards, backwards, none 등)

너무 길어지니까,

{animation : name duration timing-function delay iteration-count direction ; }

이 순서로 6개 적으면 된다.