Web 개발: html

레이블이 html인 게시물을 표시합니다. 모든 게시물 표시

2012년 12월 4일 화요일

Color

R
G
B

2012년 8월 2일 목요일

[HTML] input 태그 disabled & readonly 속성

input tag 에 disabled 속성을 줄 수 있다.
disabled="disabled"

disabled 속성을 주게 되면 form submit 할 때 해당 값은 아예 보내지 않게 된다.

input tag 에 readonly 속성을 아래와 같이 줄 수 있다.
readonly="readonly"

form submit 할 때는 값이 포함되고 사용자의 조작을 막을 수 있다.

!) 만약 사용자의 조작을 막고 비활성화된 모습을 보여주고 싶다면 readonly 속성을 지정하고 style 을 지정하는 방법을 사용하자.

2012년 5월 18일 금요일

HTML Doctype

HTML 문서의 처음에 doctype 을 지정할 수 있다.
명시적으로 doctype 을 설정함으로써 다양한 환경에서도 웹페이지가 원하는 모습으로 출력될 수 있도록 한다.
참고: http://hooney.net/2007/08/21/438/

예) html 문서의 처음에 아래와 같이 입력한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4 와 HTML5 Doctype 의 차이점
HTML4 는 세가지 Doctype 이 있지만 HTML5 는 Doctype 이 하나이다.
참고: http://www.w3schools.com/html5/tag_doctype.asp

<!DOCTYPE html>

HTML4 보다 고민이 줄었고 외우기 쉬워졌다고 할 수 있겠다.

2012년 3월 9일 금요일

CSS 드롭다운 메뉴

결과:

CSS

<style type="text/css">
#my-menu {list-style:none;padding:0px;margin:0px;height:30px;border:1px solid black;}
li.my-menu-item {float:left;line-height:30px;padding:0px;}
li.my-menu-item a.menu-item {padding:0px 10px;border-right:1px solid silver;}
li.my-menu-item:hover a.menu-item {}
li.my-menu-item .my-drop-menu {display:none;position:absolute;border:2px solid black;background-color:white;z-index:100;margin-top:30px;}
li.my-menu-item:hover .my-drop-menu {display:block;}
</style>

HTML

<ul id="my-menu">
    <li class="my-menu-item">
        <div class="my-drop-menu">
            <ul>
                <li><a href="javascript:void(0);">item1</a></li>
                <li><a href="javascript:void(0);">item2</a></li>
                <li><a href="javascript:void(0);">item3</a></li>
            </ul>
        </div>
        <a class="menu-item" href="javascript:void(0);">Item1</a>
    </li>
    <li class="my-menu-item">
        <div class="my-drop-menu">
            <ul>
                <li><a href="javascript:void(0);">item1</a></li>
                <li><a href="javascript:void(0);">item2</a></li>
                <li><a href="javascript:void(0);">item3</a></li>
            </ul>
        </div>
    <a class="menu-item" href="javascript:void(0);">Item2</a>
    </li>
    <li class="my-menu-item">
        <a class="menu-item" href="javascript:void(0);">Item3</a>
    </li>
    <li class="my-menu-item">
        <a class="menu-item" href="javascript:void(0);">Item4</a>
    </li>
</ul>

Web Font 사용하기

구글 웹 폰트를 사용해 보자.

구글 웹 폰트: http://www.google.com/webfonts

1. 원하는 폰트를 Add to collection 버튼을 눌러 마치 쇼핑 카트에 담듯이 원하는 만큼 담는다.

2. 화면 아래 Use 버튼을 눌러 실제 사용할 수 있는 코드를 생성해 낸다.

- 결과물은 이런식이다.

3. HTML 태그에 위 코드를 붙여 넣고 원하는 부위에 font-family 를 적용하면 된다.

font-family: 'Poiret One', cursive;

font-family: 'Seaweed Script', cursive;

사용예)
폰트명: Poiret One
결과: Poiret One

폰트명: Seaweed Script
결과: Seaweed Script

2012년 2월 6일 월요일

HTML character set 지정하기

Character set 을 지정하는 것은 아주 중요하다.
지정하지 않으면 client browser 에 따라 사용자 입력값이 제멋대로 취급될 우려가 있다.
head 태그 안에 character set 을 지정하는 태그를 입력한다.

utf-8 을 사용하는 예

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf8">
</head>
</html>