프로그래밍/HTML, CSS18 반응형 웹 - 뷰포트(viewport) 사용법 반응형 웹 (responsive web)이란 하나의 웹사이트로 데스크탑 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지를 말합니다. 미디어 쿼리는 CSS3 부터 지원이 되는 CSS기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용할 수 있도록 해줍니다. 이를 이용해서 화면 크기가 변할때 스타일을 바뀌도록 해서 반응형 웹을 구현할 수 있습니다. 모바일 웹을 작성하게 되면 뷰포트(viewport)라는 것을 고려하게 됩니다. 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말합니다. 데스크탑 PC에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다보여지지 않고 스크롤 해서 봐야 되는 경우가 있습니다. 이때도 브라우저에 보여지는.. 2018. 4. 9. CSS 디폴트 값들 재설정하기 이제는 웹표준을 지키며 작업을 하는게 일반화되어서, IE가 아닌 다른 브라우저(Firefox, safari, Opera, Chrome)에서도 제대로 보여지도록 하여야 한다는 요구사항이 언제나 약방의 감초처럼 계약 사항에 들어 있습니다. 웹페이지 제작시 웹 표준에 따라서 작업을 하더라도 서로 다른 웹 브라우저에서 동일하게 보이지 않는 경우가 많이 있습니다. 웹 표준을 따르는 것이 서로 다른 브라우저에서 동일한 화면을 보여주는 것을 보장하는 것은 아닌 것입니다. 각각의 브라우저들이 서로 다른 렌더링 방식을 가지고 있거나, 표준에 대한 지원율도 차이를 보입니다. 웹페이지를 만들면서 웹 디자이너와 개발자들이 각기 다른 브라우저에서 웹페이지가 동일하게 보이도록 하는데 많은 시간을 들이게 됩니다.(퍼블리싱을 전문으.. 2018. 4. 3. CSS 셀렉터 CSS 선택자는 HTML 문서에 스타일을 적용할 때, 스타일이 적용될 문서내의 요소를 선택하는 기능을 합니다. 선택자 예 / 설명 버전 .class 클래스 선택자 CSS1 class="intro" 로 지정된 모든 요소를 선택합니다. class 속성에는 공백으로 분리하여 하나 이상의 스타일을 지정할 수 있습니다. #id 클래스 선택자 CSS1 id="title" 로 지정된 요소를 선택합니다. id 속성은 문서에서 한번만 나와야 합니다. * CSS2 모든 요소들을 선택합니다. 요소 CSS1 모든 요소들을 선택합니다. 요소,요소 CSS1 모든 요소들과 모든 요소들을 선택합니다. 선택할 요소들을 , 로 분리하여 나열합니다. 요소들간의 종속관계는 없습니다. 요소 요소 CSS1 요소들 안에 있는 모든 요소들을 선택.. 2018. 4. 3. 이전 1 2 다음
