H_Develop

index.html // main_page reservation.html // 예약페이지 THE 스튜디오 스튜디오 소개 블로그 포토 갤러리 오시는 길 스튜디오 예약 사전에 인터넷으로 예약해주세요. 예약 날짜를 선택해 주세요. 2021.09 SunMon TueWed ThuFri Sat 2930 311 23 4 56 78 910 11 1213 1415 1617 18 1920 2122 2324 25 2627 2829 30 예약 안내 · 1일전 예약해 주세요. · 사용 일주일 이후에 취소는 환불됩니다. · 이용 시간은 촬영과 준비 모두 포함입니다. · 일요일은 휴일입니다. 이용 요금 · 1시간 : 30,000원 · 반일 대여 : 100,000원 · 전일 대여 : 200,000원 ※ 자세한 내용은 1588-158..

FrontEnd/HTML 반응형 웹 2022. 6. 27. 18:18

Flexable Box / Flex Box 박스를 가변적으로 만들어주고, 동시에 반응형웹을 위한 몇가지 기능도 제공해주는 최신 기술이다. Container 과 Item이 필수적으로 존재하며, Item이 Container 안에 들어있게 된다. - container box는 display, flex-flow, justify-content 등 속성을 사용 - item box는 order, flex, align-self 등 속성을 사용 가변 그리드, 인라인/블록, float 속성을 이용하는 레이아웃 방식솨 비교되는 플렉스 박스만 가지고 있는 장점이 있다 - 콘텐츠를 수직 방향으로 쉽게 중앙 정렬 - 뷰 포트의 너비에 따라 요소의 배치 순서 - 박스 내 요소의 여백과 배치를 자동으로 조절할 수 있다 등이다. fl..

FrontEnd/HTML 반응형 웹 2022. 6. 26. 18:22

뷰 포트의 크기에 따라 이미지의 크기도 가변적이어야 한다. px 대신 % 단위를 사용, 이미지 너비를 100% 설정 방법에는 ' width : 100% ' 와 ' max-width : 100% ' 가 있다. width : 100% 설정하면 뷰 포트의 너비를 늘리거나 줄여도 크기에 상관없이 부모 요소 박스에 꽉 채워진다. max-width : 100% 뷰 포트의 너비가 원본 이미지보다 클 경우에도 원본 이미지 이상으로 확대되지 않는다. 포토 갤러리 작품 사진 1 작품 사진 2 작품 사진 3 작품 사진 4 작품 사진 1

FrontEnd/HTML 반응형 웹 2022. 6. 26. 17:30

반응형 웹 기술 미디어 쿼리는 웹 접속 기기의 브라우저 해상도, 즉 뷰 포트의 크기에 반응하여 거기에 맞는 CSS적용시켜주는 기술 반응형 웹의 최신 기술인, 플렉서블(flexible 가변적인) 박스를 알아보고 사용되는 CSS속성을 알아보자 미디어 쿼리 CSS의 미디어 쿼리(Media Queries)는 특정 미디어의 성능과 상황에 따라 특정한 CSS를 적용할 때 사용된다. 반응형 웹에서는 접속 기기를 판단하기 위해 뷰 포트의 너비를 체크한다. 브라우저 너비가 600px 이하에서는 노란색이 된다. 데스크 탑과 스마트폰 웹 프로그래밍 강좌 웹 페이지란? HTML/CSS PHP 프로그래밍 자바스크립트/jQuery 웹 페이지란? 웹 페이지는 웹 서핑을 할 때 보는 각각의 화면을 말한다. 웹 페이지는 HTML과 C..

FrontEnd/HTML 반응형 웹 2022. 6. 26. 17:23

12열_그리드_시스템 (12 Columns Grid System / col greed라고 부르기도 함) 반응형 웹에서 가장 많이 사용되는 그리드 시스템 다양한 너비의 블록 요소를 쉽게 만듦 12열-그리드에서 하나의 열의 너비는 100%/12 해서 8.33% 가 됨 .col_1{width : 8.33%} .col_2{width : 16.66%} .col_3{width : 25%} .col_4{width : 33.33%} .col_5{width : 41.66%} .col_6{width : 50%} .col_7{width : 58.33%} .col_8{width : 66.66%} .col_9{width : 75%} .col_10{width : 83.33%} .col_11{width : 91.66%} .col_..

FrontEnd/HTML 반응형 웹 2022. 6. 26. 16:54

px 단위는 모니터의 해상도 기준이기에, 스마트 폰 등 다양한 기기를 고려하기엔 어려움. 반응형 웹에서는 px 단위 대신, em(상속 개념) / rem(상속 개념 없음)을 사용 em - 1em = 16px - 2em = 32px - 0.5em = 8px 안녕하세여 안녕하세여 안녕하세여 상속 em 안녕하세요반갑습니다. 안녕하세요반갑습니다. 상속 없는 rem 안녕하세요반갑습니다. 안녕하세요반갑습니다.

FrontEnd/HTML 반응형 웹 2022. 6. 26. 16:51

- 그리드 뷰 (Grid View) 웹 페이지를 제작할 때 열(column)을 기반으로 하는 것 열을 기본으로 해서 하나나 여러 개의 열을 병합해서 블록을 표현 - 가변 그리드(Fluid Grid) 다양한 기기의 해상도에 맞추어 열의 너비가 가변적으로 변하게 함 그리드 열을 가변적으로 만들기 위해서는 너비를 설정할 때 px 대신에 %를 사용 - px와 %를 동시에 사용 calc() 함수를 사용, clac(100% - 300px) 하면 뷰 포트의 전체 너비 100%에서 300픽셀을 뺀 결과가 메뉴의 너비 요소 A 요소 B

FrontEnd/HTML 반응형 웹 2022. 6. 24. 08:50

데스크 탑, 스마트 폰의 브라우저 화면 크기 / 메뉴 바와 탭 영역을 제외한 영역 스마트 폰/태블릿 해상도 뷰 포트 iPhone 6,7,8 750x1334 375x667 iPhone 6 Plus, 7 Plus, 8 Plus 1080x1920 414x736 Galaxy Note 10 1080x2280 412x869 Galaxy S8, S8+, S9, S9+ 1440x2960 360x740 LG G5 1440x2560 480x853 iPad Air 1&2, iPad 3rd & 4th 1536x2048 768x1024 Galaxy Tab 10 800x1280 800x1280 태그로 뷰 포트를 설정 여기서 width=device-width는 웹 페이지의 너비를 모바일 기기의 뷰 포트 너비와 일치시켜서 화면에 표..

FrontEnd/HTML 반응형 웹 2022. 6. 24. 08:46