Archived/반응형 (5) 썸네일형 리스트형 반응형 웹#5 px를 %로 바꾸기: 가변폰트 *사전지식 rem의 경우 최상위 .root의 font size를 상속하고, em의 경우 부모 요소의 폰트 사이즈를 상속한다. 가변폰트 반응형 웹에서 글자 크기를 상대적인 단위로 사용할 때, 상속 문제를 해결해주는 방법을 가변 폰트라고 함. (가변 폰트를 적용할 글자 크깃값)/(적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트 값 em 부모가 64px 이고 자식이 32px되려면 부모는 4em, 자식은 0.5em이다 왜냐면 32/64*0.2 = 0.5이기 때문이다. 혹은 자식을 50%라고 지정해줘도 괜찮다. 가변 폰트1 가변 폰트2 매번 이 난리를 치지 않기 위해 등장한 것이 rem rem rem 단위는 웹 문서의 시작인 html을 기준으로 한다. 상속 문제가 발생하지 않아서 유용! 가변 폰트1.. 반응형 웹#4 px를 %로 바꾸기. 방법1: (가변 패딩을 적용할 패딩값)/(적용할 박스를 감싸고 있는 박스의 가로 너비) X 100 = (가변 패딩값) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eius labore perferendis quia, cumque recusandae. Ipsam voluptatem reiciendis aliquid, illo illum est unde placeat iure nobis ratione soluta atque aut!Quo, placeat. Accusantium autem error soluta architecto labore quidem, eius aliquid? Molestiae, assumenda ratione la.. 반응형 웹 #03 px를 %로 바꾸기(1) 가변 그리드 공식 이해하기. -가변 그리드라는 기술? 정해져있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술. -( 가변 크기로 만들 박스의 너비)/(가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) X 100 = 가변 크기의 값. 예시 box1: 300px, wrap: 960px의 비율을 유지한다고 하자. (300/920)*100=31.25 가변 마진과 가변 패딩 이해하기 -(가변 마진을 적용할 마진 값)/(적용할 박스를 감싸고 있는 박스의 가로 넓이)X100 = 가변 마진값 예시 box1, box2: 300px (width) wrap: 960px (width) 의 비율을 유지한다고 하자. box1의 오른쪽에 가변 넓이 360px의 margin을 주자. 300/960*100=31.25 3.. 반응형 웹 #2 기본 개념 이해(2) 반응형 웹 제작 핵심 기술 : 가변 그리드 가변 그리드는 웹 사이트를 제작할때 화면의 크기에 상관없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술. hello 미디어 쿼리 미디어의 화면 크기에 따라 웹사이트를 이에 맞게 변경하는 기술. *쿼리: 컴퓨터에게 질의 하는 것. hello 뷰포트 화면에 보이는 영역을 제어하는 기술. 미디어 쿼리로 화면 크기를 감지해야할 때 꼭 필요. 데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되지만, 스마트 기기는 기본 설정값이 보이는 영역으로 설정됨. 따라서 미디어 쿼리를 사용해도 스마트 기기의 실제 화면 크기를 감지 못하므로 반응형 웹 제작시 반.드.시!! 필요! 반응형 웹 #1 기본 개념 이해(1) 모바일 기기에 적합한 뷰를 보여주고자. PC버전, 모바일버전 두개 따로 만들어야하는 수고를 덜기 위해 반응형 웹 등장. 1. 즉, 반응형웹은 비용 절감의 측면에서 등장. 2. 마케팅에서 최적화되어있다. 환경이나 기기에 따라 최적화된 구조의 웹사이트를 보여줌. -> 전달하고자 하는 내용 확실하게 표현 가능. 3. 검색 엔진 최적화 모바일 버전, PC 버전 주소가 두개일 경우, 검색 결과에서 상위권에 배치되기 힘들다. 하나의 주소(파일)로만 이루어져 있으면 검색결과에 좀 더 잘 노출 될 수 있다. 4. 미래지향적 어떤 기기가 나올지 모르는 상황에서 가장 좋은 접근법. 5. 예시 5.1 스키니타이 넥타이를 판매하는 회사. 쇼핑몰의 경우 결제 등 시스템이 복잡해서 반응형으로 개발이 어렵다. 스키니 타이는 이러한.. 이전 1 다음
