Home

2018
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라는 원근감을 주는

0
HTML & CSSCSS

CSS 선택자

CSS 선택자 알아보기연결 선택자combination selector라고도 부른다. 하위 선택자 : 지정한 하위 요소에 스타일 적용하기 예제 코드를 살펴보자 div p { color: blue } 여기서 div는 상위 요소 p는 하위 요소이다. 이 코드를 해석하자면 div 태그안에 있는 모든 p태그에 css 요소를 적용하겠다는 의미이다. 예제를 보

0
HTML & CSSHTML

HTML 멀티 미디어

HTML 멀티미디어 관련 태그들과거에 사용하던 플러그인은 문제가 많았다. 확장자 지원 문제도 그렇고 원하지 않는 툴바 등이 설치되는 경우도 있었다. 하지만 최근 플래시 플레이어가 거의 차단 된 만큼, html5에도 그와 관련된 태그가 생겨났다. object 태그, embed 태그이 태그들은 사실 플러그인을 지원하는 태그이지만, 아직 html5를 지원하지 않

0
JavascriptES6

ES6의 변수와 블록 레벨 스코프

ES6의 변수 선언과 블록 레벨 스코프요즘 핫한 JS 관련 문법은 Typescript이다. 타입 선언이 가능할 뿐만 아니라 js의 모든 문법을 사용할 수도 있고, 제네릭 등의 기타 편리한 요소가 추가되었다. 이를 익히기 위해선 기본적으로 ES6에 대한 지식이 필요하다. 그래서 오늘부터 며칠간 ES6의 기본 문법에 대해 알아보고자 한다. let, conste

0
HTML & CSSCSS

HTML5 시맨틱 태그

시맨틱 태그많은 웹 사이트를 분석하여 웹 문서 레이아웃의 표준화를 하는 태그가 많이 추가되었다. (물론 아직 많이 사용하진 않는다.)‘semantic’은 의미가 통한다는 의미이기 때문에 태그만 보면 ‘아 여기구나’라고 알 수 있다. 우리가 흔히 쓰는 의미 없는 상자 태그인 div 대신에 각 구역의 의미가 담긴 태그를 사용하는 것이다. HTML5의 시맨