본문 바로가기

분류 전체보기433

<HTML5+CSS3>반응형 웹 사이트 만들기 반응형 웹 디자인- 브라우저 화면 크기에 따라 웹 페이지 각 요소의 크기나 위치를 변화시키는 웹 디자인 기법 원래 웹사이트 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹사이트를 표시할수 있는 방법이 반응형 웹 디자인이다. 대표적인 사이트 : http://colly.com 이 사이트는 브라우저 창의 크기를 조절하면 화면이 바뀐다.기기에 맞는 사이트를 따로 제작하지 않고 화면 크기에“반응”하여 화면 요소들을 자동적으로 바꾸어 사이트를 구현하는 것이 반응형 웹 디자인 이다. 미디어 쿼리-CSS3모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해 주는 기능. 미디어 쿼리 구문-미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 줍니다.. 2018. 10. 24.
<HTML5+CSS3> 애니메이션 속성 애니메이션 속성 트랜지션 속성: 한 스타일에서 다른 스타일로 바뀔 때 진행 시간을 지정해 변화.애니메이션속성: 트랜지션보다 애니메이션을 더 쉽게 만들 수 있다.animation속성과 transition 속성-이 속성은 트랜지션속성과 비슷한 점이 많다. 시작 스타일과 끝나는 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 전체적으로 부드럽게 변화하는 애니메이션 효과를 만들어 낸다. %애니메이션과 트랜지션의 공통점과 차이점 공통점 : 애니메이션에 소요되는 시간이나 지연시간 등 지정차이점 : 애니메이션의 시작에서부터 끝날 EO까지 어느 지점이는 @keyframe속성을 사용해 애니메이션 정의 가능 animation-duration속성 – 애니메이션 실행 시간-이 속성은 애니메이션을 얼마 동안 재생할 .. 2018. 10. 22.
<HTML5+CSS3>시간에 따른 변화를 만들어 주는 트랜지션 트랜지션이란 한 스타일에서 다른 스타일로 바뀌는 것을 말합니다. 트랜지션 속성은 브라우저 접두사를 붙여 사용해야 합니다 "transition-property 속성 – 적용할 트랜지션 지정하기" -트랜지션 효과를 만드는 첫 번째 단계는 CSS 속성 중 어떤 속성에 트랜시션을 적용할 것인지 선택 하는 것입니다. 그 결정을 이 속성이 합니다. 속성 값(1) none : 트랜지션 동안 아무 속성도 바뀌지 않습니다.(2) all : all값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 됩니다. 기본 값입니다.(3)속성이름: 트랜지션 효과를 적용할 속성 이름을 지정합니다. ex) 배경색만 바꿀것인지 width값을 바꿀것인지 원하는 것을 골라 지정 가능 쉼표로 구.. 2018. 10. 22.
<HTML5+CSS3>변형과 관련된 속성들 transform-origin속성 –변형 원점 설정하기-이 속성은 지정한 요소의 변형 원점을 설정하는 것이다. transform속성과 함께 사용한다. 속성 값(1) x축:원점에서 x 좌표값으로, 길이 값이나 백분율 left,center,right중에서 사용가능 (2) y축:원점에서 y 좌표값으로, 길이 값이나 백분율 top,center,bottom중에서 사용가능(3) z축:원점에서의 z좌표값으로, 길이 값만 사용 가능 예를 들어 왼쪽 윗 부분을 기준으로 회전이나 왜곡 같은 변형을 실행하려면 다음처럼 지정한다.ex)trnasform-origin:left top; ->트랜스폼의 기준을 왼족 윗부분으로 perspective-원근감 표현하기-원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대 방향으로 잡아당기.. 2018. 10. 22.
<HTML5+CSS3>변형 2차원 3차원 좌표계-변형이랑 웹 요소의 위치를 옮기거나 크기를 조절하고 회전,왜곡 시키는 것을 변형이라고 한다. 단순히 수평이나 수직으로 이동하고 회전하는 것뿐만 아니라, 원근감을 추가한 3차원 변형도 가능하다.2차원 좌표: x축과 y축 이동 가능3차원 좌표:원근감을 더한 것 (z 축에서 앞뒤로 이동하는 것) transform속성 – 웹 요소 변형하기--예를 들어 수평으로 50px 수직으로 100px 이동시키려면 translate라는 변형 항수를 사용합니다ex)transfrom:translate(50px, 100px) -> x축으로 50 px, y축으로 100px 이동이 속성은 여러 가지 변형 함수를 사용할 수 있다 2차원 변형이나 3차원 변형 모두 가능하다. transform 변형 함수 값 trans.. 2018. 10. 22.
<HTML5+CSS3>표 관련 스타일 table-layout속성-콘텐츠에 맞게 셀 너비 지정하기-표의 각 셀들은 태그나 태그를 사용해 구성된다. 하지만 이 태그에서 width속성을 이용해 셀 너비를 고정했을 때 여백없이 입력하면 셀 너비를 무시고 한 줄로 길게 입력되어 처음에 의도했던 표 레이아웃을 무너뜨린다. (545 page) 이 속성을 이용하면 셀 안의 내용의 양에 따라 셀 너비를 변하게 할지 고정시킬지 여부를 결정할 수 있다. 속성 값(1)fixed : 셀 너비를 고정합니다. 즉 셀 안의 내용 양에 따라 셀의 너비가 달라지지 않는다.(2)auto : 셀 안의 내용에 따라 셀의 너비가 달라진다. 기본 값(3)inherit : 부모 요소의 table-layout 값을 상속합니다. 다음 예는 셀 안의 내용에 따라서 셀 너비가 바뀌지 않도록.. 2018. 10. 20.

티스토리툴바