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

티스토리툴바