공부/웹 UI 개발
반응형 웹 - 0 반응형 웹 - 1 / 태블릿 PC 환경 이전 포스트에서 만든 PC버전 웹페이지를 그대로 사용한다. 아래 조건에 맞는 모바일 버전 웹페이지를 제작 header : 배경색 lightseagreen, 로고 폰트 크기 40px, 로고 폰트 색 #fff header GNB : 배경색 lightslategray, 메뉴 폰트 크기 25px, 메뉴 폰트 색 #fff content : 리스트 폰트 크기 14px, 리스트 폰트 색 #fff footer : 배경색 lightcoral, 폰트 크기 14px, 폰트 색 #000 LOGO gnb_menu MENU1 MENU2 MENU3 MENU4 MENU5 MENU6 MENU7 MENU8 긴~~~~~~~~~~~~~~~~~~~~~~~~~~~~~타이틀 타이틀입니다...
반응형 웹 - 0 이전 포스트에서 만든 PC버전 웹페이지를 그대로 사용한다. 아래 조건에 맞는 태블릿 PC버전 웹페이지를 제작. header : 배경색 lightseagreen, 로고 폰트 크기 40px, 로고 폰트 색 #fff, 메뉴 폰트 25px, 메뉴 폰트 색 #fff content : 리스트 간격 8px, 리스트 폰트 크기 14px, 리스트 폰트 색 #fff footer : 배경색 lightcoral, 폰트 크기 14px, 폰트 색 #000 LOGO MENU1 MENU2 MENU3 MENU4 MENU5 MENU6 MENU7 MENU8 긴~~~~~~~~~~~~~~~~~~~~~~~~~~~~~타이틀 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이틀입니다. 타이..
반응형 웹은 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지이다. 예전에는 웹을 보통 PC 환경에서만 많이 사용했었는데, 스마트폰이 보급되면서 태블릿, PC, 모바일과 같이 다양한 환경에서 웹을 보게되었다. 이런 상황에서 동일한 웹페이지를 여러 환경에서 보기에는 해상도나 동작환경이 다르기 때문에 각 페이지별로 웹페이지를 맞춰야하는 번거로움이 있었다. html5가 나오기 전에는 각 환경에 맞게 웹페이지를 제작하는 적응형 웹이 보편적이었다. 하지만 html5와 함께 미디어쿼리 기술이 등장하면서 각 환경에 맞춰 하나의 소스에서 대응할 수 있는 반응형 웹이 등장하게 되었다. 반응형 웹의 예시는 아래 링크를 참고하자. 네이버 포스트 네이버 오디오클립 위 사이트에 들어가서 브라우저의 가..
폼 - 0 폼 - 1 / 폼 커스텀 (텍스트 박스) 폼 - 2 / 폼 커스텀 (체크 박스, 라디오 버튼) 폼 - 2 / 폼 커스텀 (파일 찾기 버튼) select는 부분적으로 css를 통해 스타일링할 수 있지만 select가 노출될 때 표현되는 화살표 모양의 버튼은 css로 세부적인 스타일링이 힘들다. 그리고 필수적으로 있어야 하는 요소는 css로 커스텀이 아예 불가능하다. 이런 요소들을 모두 커스텀하기 위해서는 태그를 이용해서 만들기 보다는 드롭다운 형태의 메뉴를 만들어서 스크립트 개발로 와 비슷한 기능을 구현하는 많이 사용하게 된다. 이번에는 기본 태그의 화살표를 간단하게 커스텀하는 방법에 대해서만 알아본다. 셀렉트 커스텀 선택1 선택1 선택1 @charset "UTF-8"; body { paddin..
폼 - 0 폼 - 1 / 폼 커스텀 (텍스트 박스) 폼 - 2 / 폼 커스텀 (체크 박스, 라디오 버튼) 파일을 업로드 하거나 이미지를 업로드할 때 사용하는 file 타입의 input을 커스텀하는 방법에 대해 알아본다. file 타입의 input의 기본 모양은 위 이미지와 같은 모습을 하고 있다. 파일 선택 버튼 영역과 선택된 파일명이 노출되는 부분은 css로 스타일링할 수 없는 부분이다. 그렇기 때문에 기능만 남겨두고 모양은 직접 만들어 커스텀하는 방법을 사용할 것이다. 기본형 커스텀 file 기본형 커스텀 filename @charset "UTF-8"; body { padding: 50px; } h1 { margin: 50px 0 20px; font-size: 20px; font-weight: bol..
폼 - 0 폼 - 1 / 폼 커스텀 (텍스트 박스) 체크 박스와 라디오 버튼을 커스텀하는 방법에 대해 알아본다. 체크 박스와 라디오 버튼의 디자인은 css로 세부적인 컨트롤이 거의 불가능하다. 따라서 기능을 남겨두고 이미지로 대체하는 방법을 많이 사용한다. 커스텀된 체크 박스, 라디오 버튼의 예시는 아래 링크에서 확인할 수 있다. 네이버 이용약관 동의 페이지 네이버 언론사 구독설정 페이지 css만을 이용한 checkbox 커스텀 체크 버튼 선택 1 선택 2 body { padding: 50px; } h1 { margin: 50px 0 20px; font-size: 20px; font-weight: bold; } .check_form { margin-top: 20px; } .check_form input ..
폼 - 0 텍스트 박스와 텍스트 박스 내부의 placeholder를 커스텀하는 방법에 대해 알아본다. 커스텀된 텍스트 박스와 placeholder는 아래 링크에서 예시를 확인할 수 있다. 네이버 메인화면(네이버 검색창) 네이버 로그인 화면 input 태그를 감싸는 div를 생성해서 input 폼 요소를 커스텀했다. 커스텀하기 전에 input 요소를 css 리셋 시키고 input을 감싸고 있는 text_form을 원하는 디자인에 맞게 수정한다. textarea도 마찬가지로 커스텀할 수 있다. placeholder의 색을 변경시킬 때는 ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-moz-placeholder를 사용한다..
폼 UI는 태그를 이용해서 클라이언트가 웹서버와 통신하여 데이터를 주고 받을 수 있는 html 구조를 통틀어 말한다. 흔히 웹사이트를 이용할 때 정보를 입력하여 넘기는 식으로 많이 접해봤을 것이다. 이런 폼 UI는 웹사이트마다 형태나 종류가 다양하고 폼 UI를 구성하는 폼 요소들은 브라우저별로 고유의 디자인을 가지고 있다. 이런 폼 UI를 구성하는 각각의 요소들에 대한 커스텀과 그런 요소들을 활용하여 폼 UI를 만드는 방법에 대해 알아본다. 부스트코스의 강의 내용을 정리한 포스트입니다. https://www.boostcourse.org/web344 웹 UI 개발 부스트코스 무료 강의 www.boostcourse.org
웹 - 0 웹 - 1 / 레이어 팝업 + 딤드 배경 제작 이전에 만든 레이어 팝업을 중앙 정렬하는 방법을 알아본다. 만들어 놓은 레이어 팝업의 코드는 아래와 같다. 팝업 타이틀 팝업 텍스트 영역 예 아니오 @charset "UTF_8"; .popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .popup_layer { position: relative; width: 300px; min-height: 150px; padding-bottom: 50px; background-color: #fff; z-index: 10; } .text_area { padding: 50px 30px 30px; text-align: center; } .button_ar..
