Web/CSS

Html Form에 CSS를 이용한 디자인 적용하기

이전에 html에서 form을 이용해서 다양한 입력형태를 만들어본 경험을 해보았을 것입니다. 하지만 아래와 같이 기본적으로 적용되는 각 input 태그에 대한 입력파트는 크기도 너무 작고 웹 페이지에서 그대로 사용하기에는 디자인 적인 부분에서도 조금 무리가 있습니다. 그런데 html 태그들을 css를 이용해서 각 태그들의 스타일을 지정했던 것처럼 input 태그에도 css를 사용함으로서 사용자가 원하는 형태로 디자인할 수 있습니다. 여기서 기억해야할 점은 기존에 공부하고 사용해보았던 css 속성 및 속성값들을 그대로 input 태그에 적용할 수 있다는 점 입니다. 지금부터 css를 이용해서 input 태그를 디자인하는 간단한 몇가지 예시들을 살펴보도록 하겠습니다. width, height 속성 아래와 같..

CSS Responsive

반응형 웹 디자인(Responsive Web Design) 하나의 웹 사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 장치의 디스플레이에 따라서 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법 반응형 웹 디자인은 웹 페이지가 다양한 크기의 디스플레이 즉, 다양한 기기에 대응(호환)할 수 있도록 웹 페이지가 출력되는 사이즈에 따라서 사용자에게 보여지는 웹 페이지의 레이아웃과 같은 디자인적 요소를 자동으로 변경하는 형태의 웹 페이지 제작기법을 말합니다. 지금처럼 스마트폰이나 태블릿같은 모바일 기기들이 없던 시절에는 사용자들이 웹 페이지에 접근하는 방식이 모두 일반 데스크톱이나 랩톱(노트북) 밖에 없었기 때문에 지금처럼 다양한 기기에 호환될 수 있도록 웹 페이지를 제작하는 것에 대한 고민을 그렇게..

CSS 관련요약 - 2

CSS Background(배경) CSS 배경속성의 종류는 다음과 같다. background-color background-image background-repeat background-attachment background-position 배경색(background-color) "background-color" 속성을 통해서 html 요소의 배경색을 지정할 수 있다. /*페이지의 배경색을 지정*/ body { background-color: tomato }​ 위의 코드는 페이지의 배경색을 적용한 모습이다. 여기서 background-color에 주어지는 속성값은 이전에 살펴본 "색상이름, 16진수값, RGB값 등"으로 할당할 수 있다. 뿐만 아니라 다른 html 요소의 배경색을 설정하는 것도 가능하다...

CSS 관련 요약 - 1

css HTML 문서의 스타일을 설명하는 언어 CSS CSS(Cascading Style Sheets) HTML 요소가 표시되는 방법을 기술 웹페이지의 레이아웃을 제어할 수 있음 외부 스타일 시트는 CSS 파일에 저장 CSS가 HTML 페이지에서 스타일과 관련된 부분을 전담하도록 함으로서 HTML은 페이지의 구조만을 기술하는 깔끔함을 가질 수 있음 CSS 예시를 보고 위한 코드입니다. Hello World! These paragraphs are styled with CSS. 위의 예시코드에서 h1, p는 Selector(선택기) color, font-size, text-align은 모두 속성, 그 뒤에 할당된 내용들은 속성값에 해당 CSS Selector(선택기) 스타일을 지정할 HTML 요소를 선택하는..