-CSS를 이용해 웹 문서를 만들 때 모든 웹 브라우저에서 똑같은 모습으로 보이게 하기 위해 문서에서 사용할 CSS속성들을 원하는 값으로 미리 정의해 놓는다. Why ????예를들어, 문서 전체의 글꼴을 지정하지 않았을 경우 브라우저 기본 값에 따라 브라우저에 표시하게 되는데, 브라우저마다 기본 글꼴이 같지 않다. 따라서 문서 전체의 글꼴을 통일시켜 주어야 어느 브라우저에서나 똑같이 보이기 때문이다. 마진 or 패딩 역시 값을 지정하지 않으면 브라우저마다 각기 다른 기본 값을 적용하게 된다.->이렇게 CSS기본 값들을 미리 설정하는 것을 'CSS리셋(reset)'이라고 합니다. ex) 꽃집을 소개하는 이미지와 텍스트 입력하기-사이트에 꽃집을 소개하는 이미지와 간단한 텍스트를 입력해보자.PC에서는 왼쪽에 ..
반응형 웹사이트 만들기그리드 레이아웃-요즘 많이 사용하는 반응형 웹사이트 기법은‘그리드 레이아웃’을 이용한 것이다.그리드란 용어가 ‘격자’라는 뜻을 가지고 있고, 브라우저 화면을 다양한 크기의 사각영역(그리드)로 나눈 후 브라우저 창의 너비에 따라 그리드의 배치를 다르게 만드는 것입니다.그리드는 너비 값과 높이 값을 가지고 있고, 가로로 나열할 수도 있고 세로로 나열할 수도 있기 때문에 앞서 배웠던 css의 미디어 쿼리와 유동형 레이아웃을 함께 사용할 수 있다. 그리드 레이아웃 구상하기-최근에는 pc,스마트폰용 웹 사이트를 만드는 것이 아니라, 하나의 사이트로 모든 기기에서 볼 수 있도록 하는 ‘반응형 웹 디자인’이 주류를 이루고 있다.반응형 웹 디자인을 염두에 두고 사이트 레이아웃을 구상 할 때 , 사..
전체를 감싸는 div 추가하기-유동형 레이아웃은 처음부터 유동형으로 작성하는 것이 좋지만, 이미 픽셀 값을 사용하여 만들어진 고정형 레이아웃도 유동형 레이아웃으로 만들 수 있다.전체 스타일 시트를 살펴보고 전체 레이아웃을 감싸는 div가 없다면 가장 바깥에 새로운 div를 추가한 후 그곳에 id=“wrapper”또는 원하는 이름을 지정한다.why???div를 만드는 것은 각 요소들의 너비를%(백분율)로 바꿀 때 기준이 되는 너비가 필요하기 때문이다.또한 전체를 감싸는 wrapper요소가 있으면 웹 문서 내용 전체의 크기나 배경 색 등을 한꺼번에 조절할 수 있고, 브라우저 화면 크기에 상관없이 웹 문서의 내용을 중앙에 배치할 수 있다.ex) 태그 및 부분에 같이 전체 레이아웃을 감싸는 태그 지정해준다. 그..
그리드 시스템-웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 그리드시스템입니다.꼭 사용 할 필요 없지만, 사이트 전체의 디자인이나 일관성을 유지하기에는 그리드 시스템ㅇ이 편리하다. 화면을 몇 개의 칼럼으로 나누어 요소들을 배치하는 것으로, 필요할 때마다 칼럼들을 묶어 배치할 수 있다. 이러한 장점 때문에 대부분 사이트에서 사용하는 방법입니다.주로 960픽셀의 12칼럼 그리드를 사용한다.. 유동형 레이아웃-사이트를 제작할 때 가장 접근하기 쉬운 것이 픽셀 단위이다. ex)아이폰의3Gs 브라우저는 320*480 갤탭7인치=600*800 등 모두 픽셀 단위.이렇게 픽셀 크기로 너비를 지정해서 레이아웃을 만들었다면, 다양한 크기의 브라우저로 그 사이트에 접속했을 경우 지정한 픽셀 크기대로만 표시된다.단점..
“미디어 쿼리 적용하기〃-미디어 쿼리는 웹 문서 안에서 @media 문 다음에 조건에 맞는 CSS규칙을 직접 추가할 수도 있고 각 미디어 조건에 맞는 별도의 CSS파일을 만들어 태그로 연결해서 사용할 수도 있습니다. CSS파일 연결하기-각 조건별로 스타일시트 파일을 따로 저장한 후, 태그나 @import문을 사용해서 미디어 유형에 따라 CSS파일을 가져와 연결합니다. ex) 예를 들어 , 인쇄용 스타일시트 print.css를 만들어 놓았다면 다음과 같이 연결한다ex)->프린트를 사용할 경우 외부 스타일시트 파일 print.css를 불러와서 사용하도록 링크 태블릿 PC에 맞는 스타일시트 tablet.css를 만들어 두었다면 너비가 321px이상일 때 적용되도록 다음과 같이 작성할 수 있다ex) ->321p..
반응형 웹 디자인- 브라우저 화면 크기에 따라 웹 페이지 각 요소의 크기나 위치를 변화시키는 웹 디자인 기법 원래 웹사이트 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹사이트를 표시할수 있는 방법이 반응형 웹 디자인이다. 대표적인 사이트 : http://colly.com 이 사이트는 브라우저 창의 크기를 조절하면 화면이 바뀐다.기기에 맞는 사이트를 따로 제작하지 않고 화면 크기에“반응”하여 화면 요소들을 자동적으로 바꾸어 사이트를 구현하는 것이 반응형 웹 디자인 이다. 미디어 쿼리-CSS3모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해 주는 기능. 미디어 쿼리 구문-미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 줍니다..
애니메이션 속성 트랜지션 속성: 한 스타일에서 다른 스타일로 바뀔 때 진행 시간을 지정해 변화.애니메이션속성: 트랜지션보다 애니메이션을 더 쉽게 만들 수 있다.animation속성과 transition 속성-이 속성은 트랜지션속성과 비슷한 점이 많다. 시작 스타일과 끝나는 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 전체적으로 부드럽게 변화하는 애니메이션 효과를 만들어 낸다. %애니메이션과 트랜지션의 공통점과 차이점 공통점 : 애니메이션에 소요되는 시간이나 지연시간 등 지정차이점 : 애니메이션의 시작에서부터 끝날 EO까지 어느 지점이는 @keyframe속성을 사용해 애니메이션 정의 가능 animation-duration속성 – 애니메이션 실행 시간-이 속성은 애니메이션을 얼마 동안 재생할 ..
트랜지션이란 한 스타일에서 다른 스타일로 바뀌는 것을 말합니다. 트랜지션 속성은 브라우저 접두사를 붙여 사용해야 합니다 "transition-property 속성 – 적용할 트랜지션 지정하기" -트랜지션 효과를 만드는 첫 번째 단계는 CSS 속성 중 어떤 속성에 트랜시션을 적용할 것인지 선택 하는 것입니다. 그 결정을 이 속성이 합니다. 속성 값(1) none : 트랜지션 동안 아무 속성도 바뀌지 않습니다.(2) all : all값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 됩니다. 기본 값입니다.(3)속성이름: 트랜지션 효과를 적용할 속성 이름을 지정합니다. ex) 배경색만 바꿀것인지 width값을 바꿀것인지 원하는 것을 골라 지정 가능 쉼표로 구..