본문 바로가기

💻WEB FrontEnd/반응형 웹

(4)

Flex 1. Flex 박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 불가능했던 기존의 속성들과 달리, 플렉스는 박스 요소들을 다양하고 자유롭게 조작할 수 있다. Flexible Box, Flexbox라고 부르기도 한다. 1) Container와 Item 플렉스는 플렉스 컨테이너와 플렉스 아이템로 이뤄져 있고, 컨테이너와 아이템에 적용하는 속성이 나뉘어져 있다. - 플렉스의 축 메인축(Main Axis) : 아이템들이 배치된 방향 수직축 또는 교차축(Cross Axis) : 메인축과 수직인 축 - 플렉스 컨테이너(Flex Container) 여러 개의 플렉스 아이템을 포함한 부모 역할을 한다. 속성 설명 속성값 display flex : 블록 수준의 플렉서블 박스 inline-flex : 인라인 수준의 플렉..

미디어 쿼리와 뷰포트 1. 미디어 쿼리(Media Queies) 반응형 웹에서는 필수인 미디어쿼리는, 화면크기,화면 해상도, 기기 방향 등의 조건으로 CSS를 각각 다르게 적용하는 것이다. 1) 기본 문법 @media [only|not 미디어 유형] [and|,] (조건문){ 실행문 } @media : 미디어 쿼리 문법의 시작을 알리는 부분 미디어 유형 미디어 유형 설명 all 모든 미디어 유형 screen 컴퓨터 스크린 tv 텔레비전 handheld 패드 장치 braille 점자 표시 장치 조건문 조건문 설명 조건값 min/max 사용 여뷰 width/height 웹 페이지의 넓이/높이 값 width속성에서 사용할 수 있는 모든 속성값 O device-width/device-height 기기의 넓이/높이 값 orientat..

가변 그리드 / 가변 패딩,마진 / 가변 이미지,동영상 1. 그리드 '그리드(Grid)'는 격자모양의 무늬를 뜻한다. 우리가 흔히 쓰는 프로그램인 Excel, Word, PowerPoint의 '표'와 같은 형태도 이 그리드(Grid) 형태를 가진다. 1) 고정 그리드(fixed grid) : 화면 너비를 일정하게 고정하고 레이아웃을 만든 것. 화면 너비를 특정 값으로 고정해 놓으면 그 안에 표시할 요소들의 넓이 값을 지정할 수 있고 너비가 항상 일정하게 표시되기 때문에 원하는 레이아웃을 만들기도 쉽다. 데스크톱용 사이트만 제작한다면 이 방법이 편리하다. 하지만 여러 종류의 기기를 이용해서 접속하는 사이트라면, 브라우저 창의 너비가 작은 기기에서 접속했을 때는 사이트 일부가 가려져서 스크롤 막대를 사용해 화면을 옮기면서 봐야 하는 불편함이 있다. 2) 가변 그..

반응형 웹 vs 적응형 웹 1. 적응형 웹(AWD, Adaptive Web Design) 특정 뷰포트의 크기에 맞게끔 설계된 웹 페이지를 만들어서 별도로 제공하는 것. 1) 방법 (HTTP GET 요청의 user-agent 헤더 정보를 이용해) 웹 페이지를 요청하는 기기를 감지하여 특정 유형의 기기일 경우 해당 뷰포트에 최적화된 페이지로 리디렉션 시켜줌. ex. 스마트폰으로 네이버에 접속할 경우 m.naver.com로 리디렉션 시킴. 2) 특징 기존의 사이트를 재구출할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다. 디바이스에 적절한 페이지 혹은 시스템을 각각 제작해야한다. 분리 개발한 웹에 수정사항이 발생하면 다른 환경에 최적화된 나머지 웹페이지도 수정,변경해야 하므로 개발자로선 다소 번거로워질 수 있다. 화면에 ..

이전 1 다음

티스토리툴바