Archive: 2018

2018
0
ProjectJS30

HTMLCanvas

HTML Canvas 만들기이 동영상과 코드는 Javascript 30 동영상 강의를 참조하였습니다. Javascript30 동영상 보기 깃허브 보기

0
HTML & CSSCSS

플랙서블 박스 레이아웃에 대해 알아보자.

Flex box layoutflexible box layout은 그리드 레이아웃을 기본으로 하여 플랙스 박스를 원하는 위치에 배치하는 것이다. 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있고 화면 크기에 따라 에이아수의 배치나 크기를 조절할 때 편하게 이용 가능하다는 장점이 있다. flexbox를 사용하기 위해서는 부모 요소의 displa

0
HTML & CSSCSS

미디어 쿼리

미디어 쿼리미디어 쿼리는 CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 그에 맞는 css 스타일링을 하게 해준다. 즉, 다른 기기로 접속할 때마다 레이아웃이 바뀐다. 구문 구문은 @media [only | not] 미디어 유형 [and 조건] * [and 조건] 이런 식으로 작성한다. 대소문자 구별이 없고 style 태그 내에서 사용한다. 여기

0
HTML & CSSCSS

가변 레이아웃과 가변 요소

가변 레이아웃과 가변 요소가변 글꼴보통 우리는 텍스트 크기를 px단위로 지정한다. 하지만 px단위로 지정하게 되면 화면에 크기가 고정되기 떄문에 작은 기기에서 매우 작게 표시되는 상황이 발생한다.가변 그리드 레이아웃을 사용할 때는 글자 크기도 유동적으로 변해야 하는데 그 때 사용하는 것이 ‘가변 글꼴’이다. em 단위 em단위는 부모 요소에서 지정한 폰

0
HTML & CSSCSS

반응형 웹이란?

반응형 웹이란 무엇일까?많은 웹 사이트가 데스크탑 위주로 만들어 지긴 하지만, 모바일 시장이 점점 발전하고 스마트폰 보급이 많아지면서 어디서 접속하든 화면을 보는데 불편함이 없게 만들고자 하는 디자인 형태가 늘어나고 있다. 이를 반응형 웹 디자인이라고 한다. 모바일 기기와 웹 디자인스마트폰에서 웹을 사용하는 일이 더 많아지면서 반응형 웹은 이제 흔히 볼 수

0
HTML & CSSCSS

애니메이션

애니메이션 알아보기트랜스폼과 트랜지션 등으로 애니메이션 효과를 만들 수도 있지만, animation 속성을 이용하면 더욱 쉽게 애니메이션을 만들 수 있다. CSS와 애니메이션자바스크립트나 플래시 대신에 웹 요소에 애니메이션을 추가하는 기능이다. 트랜지션과 비슷한 점은 시작부터 끝 스타일까지의 스타일을 지정한다는 점이다. 하지만 애니메이션은 원하는 곳에 스타

0
HTML & CSSCSS

트랜지션

트랜지션과 애니메이션 살펴보기트랜지션?트랜지션은 웹 요소의 배경 색, 도형 테두리 변경 등 스타일 속성을 변화시키는 것을 말한다. 예를 들어 마우스를 올려 놓았을 때 배경색이 바뀐다던지, 테두리가 사격형에서 원형으로 바뀐다던 지의 변화들을 말하는 것이다. transition-property : 트랜지션을 적용할 속성 지정 트랜지션을 어느 속성에 적용할

0
HTML & CSSCSS

CSS 애니메이션 - 변형

CSS Transform특정 요소의 크기나 형태가 변하는 것을 변형이라고 한다. 웹에서도 마찬가지로 css를 이용하여 텍스트나 이미지 등을 움직이게 할 수 있다. 2차원과 3차원 변형2차원 변형은 x,y 축, 즉 수평 혹은 수직으로 이동하고 회전시키는 것을 말한다. x축은 오른쪽으로 y축은 아래쪽으로 이동한다.3차원 변형은 x,y 축에 z라는 원근감을 주는