IT/웹디자인19 [HTML/CSS] 텍스트박스 꾸미기(기초) HTML 입력태그에서 텍스트 타입 입력 형태에 대하여 알아보고, 간단하게 꾸미는 방법에 대하여 알아 보도록 하겠습니다. 모양을 꾸미는 방법과 마우스 오버 또는 포커스 유/무에 따른 스타일 적용법에 대하여 알아 보도록 하겠습니다. 입력태그 텍스트타입 사용법 꾸미기 전 기본형태 테두리 꾸미기 - border : 선의두께 선의종류(solid:실선) 선색상 - border-radius : 모서리 둥근정도 - border-top-left-radius = 왼쪽 상단 부분의 모서리만 설정 함. 텍스트박스 크기 설정 글자 설정 - font-size : 폰트크기 - text-align : 텍스트위치 - color : 텍스트색 바탕색 및 여백설정 설정 - background : 배경색 - padding : 안쪽 여백 - .. 2018. 6. 8. HTML 콤보박스 선택 시 페이지 이동하기 HTML 콤보박스 태그에 대하여 알아 보겠습니다. 태그명이 select로 셀렉트박스 라고 부르기도 합니다. 콤보박스의 사용목적 2가지에 대하여 알아보고, 각각의 예제를 살펴 보도록 하겠습니다. 기본 태그 사용 법 항목 텍스트1 항목 텍스트2 콤보박스 사용 목적 값의 전달 : 항목을 선택하여 해당 값을 전달하기 위한 목적 액션 발생 : 항목을 선택 시에 특정 액션을 발생 시키기 위한 목적 목적에 따른 사용 예제 1.값의전달 ※ 회원가입 등의 화면에서 성별에 대한 값을 사용자로 부터 선택 받아 값을 서버로 전달하기 위한 등의 목적에서 사용 됩니다. 다음 예제는 그와 같으 기능을 구현한 예제 입니다. 여성 남성 2. 액션발생 ※ 홈페이지 이동 또는 특정영역을 보여주거나 숨김 액션을 발생시키기 등의 다양한 액션.. 2018. 6. 6. CSS 미디어 쿼리 - 반응형 웹 만들기 미디어 쿼리는 반응형 웹을 만들기 위한 필수 기술 입니다. 그럼 미디어 쿼리에 대하여 알아 보도록 하겠습니다. 미디어 쿼리 기본 구조 @media only all and (조건문) {실행문} @media 미디어 쿼리를 선언하는 부분입니다 only(생략가능) 다음과 같은(뒤에오는) 조건일 때만 적용하겠다라는 의미의 설정 값 입니다. 기본 설정 값이며 다른 설정 값으로는 not가 있습니다. not 는 뒤에 오는 조건이 아닌 경우를 의미하는 설정 값 입니다. all(생략가능) 은 모든 미디어 타입에 적용된다는 의미 입니다. 다른 설정 값으로는 screen, print 등이 있습니다. and(생략가능) 조건이 모두 만족 할 경우를 의미하면 반대 의미로 or 이 있습니다 (조건문) 실행문이 적용 될 조건을 설정 .. 2018. 6. 5. [반응형웹 만드는 방법] viewport 메타태그 활용 반응형웹이란 다양한 기기(PC, 태블릿, 휴대포)에서 해당 장치의 브라우저의 환경에 반응하여, 그것에 어울리는 형태로 각각 다르게 표시되는 웹페이지를 말합니다. 이런 반응형 웹 페이지를 만들기 위해서는 태그의 선언이 필요 합니다. 반응형 웹 페이지를 만들기 위한 기초 메타태그 입니다. 동일한 웹페이지이지만 뷰포트(viewport) 메타 태그를 선언 한 경우와 하지 않은 경우를 먼저 눈으로 확인 해 보도록 하겠습니다.(소스는 아래에 있습니다) 두 화면을 비교 해 보면, 이미지 및 텍스트의 차이점을 확인 할 수 있습니다. 선언하지 않은 화면의 이미지는 오른쪽 부분이 다 보이지 않지만, 선언 한 화면은 모두 보이게 됩니다. 선언하지 않은 화면을 드래그 해 보면 화면전체 스크롤이 발생하는 것을 확인 할 수 있습.. 2018. 6. 1. 이전 1 2 3 4 5 다음
