select : 목록 선택상자



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <select>
        <!-- optgroup : 항목의 레이블 적용 -->
        <!-- option : 선택할 항목 -->
        <optgroup label="포탈">
            <!-- 
            value : 데이터 전송시 전송되는 값
            selected : 페이지 로드시 미리 선택되어 보여지는 항목
             -->
            <option value="www.naver.com" selected="selected">네이버</option>
            <option value="www.nate.com">네이트</option>
            <option value="www.daum.net">다음</option>
        </optgroup>
    </select>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 video : 동영상 파일 재생하기  (0) 2017.07.02
HTML5/CSS3 embed : url로 된 동영상 재생하기  (0) 2017.07.01
HTML5/CSS3 textarea : 텍스트 여러줄 입력하기  (0) 2017.06.29
HTML5/CSS3 radio : 단일선택 예제  (0) 2017.06.28
HTML5/CSS3 checkbox : 다중선택 예제  (0) 2017.06.27

textarea : 텍스트 여러줄 입력하기


cols : 가로크기

rows : 세로크기 (줄 수)

resize: none - 기본속성인 크기 변경을 막음

outline: none - 기본속성인 포커스시 파란색 테두리 없앰



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <p>
        <label for="comment">의견</label>
        <!-- 
        cols : 가로크기
        rows : 세로크기 (줄 수)
        resize: none - 기본속성인 크기 변경을 막음
        outline: none - 기본속성인 포커스시 파란색 테두리 없앰
         -->
        <textarea id="comment" cols="30" rows="5" style="resize: none; outline: none;"></textarea>
    </p>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 embed : url로 된 동영상 재생하기  (0) 2017.07.01
HTML5/CSS select : 목록 선택상자  (0) 2017.06.30
HTML5/CSS3 radio : 단일선택 예제  (0) 2017.06.28
HTML5/CSS3 checkbox : 다중선택 예제  (0) 2017.06.27
HTML5/CSS3 form 속성  (0) 2017.06.26

radio : 단일선택 예제



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <p>
        <!-- label의 for 속성값과 id 값을 같게하여 연결해준다 -->
        <!-- 
        checked : 페이지 로드시 미리 체크가 되어 있도록 한다
        value : 데이터 전송시 전달되는 값
        name : name이 같은 여러 라디오 버튼 중 하나를 선택한다
         -->
        <label for="man">남자</label>
        <input type="radio" id="man" name="gender" value="남자" checked  />
    </p>
    <p>
        <label for="woman">여자</label>
        <input type="radio" id="woman" name="gender" value="여자"  />
    </p>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS select : 목록 선택상자  (0) 2017.06.30
HTML5/CSS3 textarea : 텍스트 여러줄 입력하기  (0) 2017.06.29
HTML5/CSS3 checkbox : 다중선택 예제  (0) 2017.06.27
HTML5/CSS3 form 속성  (0) 2017.06.26
HTML5/CSS filter : 이미지 필터 적용하기  (0) 2017.06.25

checkbox : 다중선택 예제



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <p>
        <!-- label의 for 속성값과 id 값을 같게하여 연결해준다 -->
        <!-- 
        checked : 페이지 로드시 미리 체크가 되어 있도록 한다
        value : 데이터 전송시 전달되는 값
         -->
        <label for="apple">사과</label>
        <input type="checkbox" id="apple" value="사과" checked  />
    </p>
    <p>
        <label for="banana">바나나</label>
        <input type="checkbox" id="banana" value="바나나"  />
    </p>
    <p>
        <label for="peach">복숭아</label>
        <input type="checkbox" id="peach" value="복숭아"  />
    </p>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 textarea : 텍스트 여러줄 입력하기  (0) 2017.06.29
HTML5/CSS3 radio : 단일선택 예제  (0) 2017.06.28
HTML5/CSS3 form 속성  (0) 2017.06.26
HTML5/CSS filter : 이미지 필터 적용하기  (0) 2017.06.25
HTML5/CSS3 transform : skew - 요소 기울이기  (0) 2017.06.24

form 속성


action : 전송시 연결된 페이지

method : 전송방식

accept-charset : 데이터를 서버로 전송시 문자 인코딩 지정

enctype : 폼데이터를 전송시 인코딩 유형 지정

application/x-www-form-urlencoded : 모든 문자 인코딩

multipart/form-data : 파일 업로드 

text/plain : 공백은 +로 변환되고 특수문자는 인코딩 하지 않음



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    </style>
</head>
 
<body>
    <!-- 
    action : 전송시 연결된 페이지
    method : 전송방식
    accept-charset : 데이터를 서버로 전송시 문자 인코딩 지정
    enctype : 폼데이터를 전송시 인코딩 유형 지정
        application/x-www-form-urlencoded : 모든 문자 인코딩
        multipart/form-data : 파일 업로드 
        text/plain : 공백은 +로 변환되고 특수문자는 인코딩 하지 않음
     -->    
    <form action="test.do" method="post" 
          accept-charset="utf-8"
          enctype="application/x-www-form-urlencoded">
        <fieldset>
            <p>
                <label for="loginid">아이디 : </label>
                <input type="text" id="id" name="loginid" value="" />
            </p>
            <p>
                <label for="loginpw">비밀번호 : </label>
                <input type="text" id="pw" name="loginpw" value="" />
            </p>
        </fieldset>      
        <input type="submit" value="send" />
    </form>    
</body>
</html>
cs



결과

버튼 클릭시 test.do 페이지로 데이터를 전송한다

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 radio : 단일선택 예제  (0) 2017.06.28
HTML5/CSS3 checkbox : 다중선택 예제  (0) 2017.06.27
HTML5/CSS filter : 이미지 필터 적용하기  (0) 2017.06.25
HTML5/CSS3 transform : skew - 요소 기울이기  (0) 2017.06.24
HTML5/CSS3 transform : rotate - 요소 회전하기  (0) 2017.06.23

filter : 이미지 필터 적용하기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    img {
        width: 200px;
        height: 200px;
        
        /* 
        filter : 이미지에 필터효과를 적용한다
            blur(px) : 이미지를 흐리게 한다
            brightness(%) : 이미지의 밝기를 변경한다
            contrast(%) : 이미지의 대비를 변경한다
            drop-shadow(x-offset y-offset blur color) : 이미지에 그림자를 추가한다
            grayscale(%) : 이미지에  흑백효과를 적용한다
            hue-rotate(deg) : 이미지에 색상환의 각도를 지정
            invert(%) : 이미지 반전
            opacity(%) : 이미지에 투명도 적용
         */    
         -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    </style>
</head>
 
<body>
    <img src="images/testimage.jpg" />
</body>
</html>
cs



결과

이미지에 흐린 효과를 적용한다

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 checkbox : 다중선택 예제  (0) 2017.06.27
HTML5/CSS3 form 속성  (0) 2017.06.26
HTML5/CSS3 transform : skew - 요소 기울이기  (0) 2017.06.24
HTML5/CSS3 transform : rotate - 요소 회전하기  (0) 2017.06.23
HTML5/CSS3 transform : scale - 요소 크기변경  (0) 2017.06.22

transform : skew - 요소 기울이기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    img {
        width: 200px;
        height: 200px;
        
        /* 
        skew : 기울이기
        transform : skew(x-deg,y-deg) x, y축을 기준으로 기울이기
        transform : skewX(deg) x축을 기준으로 기울이기
        transform : skewY(deg) y축을 기준으로 기울이기
         */
        -webkit-transform : skewX(-45deg);
        -moz-transform : skewX(-45deg);
        -ms-transform : skewX(-45deg);
        -o-transform : skewX(-45deg);
        transform : skewX(-45deg);
        
        /* transform-origin : 기준점 지정 */
        -webkit-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }
    </style>
</head>
 
<body>
    <img src="images/testimage.jpg" />
</body>
</html>
cs



결과

왼쪽 아래 꼭지점을 기준으로 오른쪽으로 기울인다

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 form 속성  (0) 2017.06.26
HTML5/CSS filter : 이미지 필터 적용하기  (0) 2017.06.25
HTML5/CSS3 transform : rotate - 요소 회전하기  (0) 2017.06.23
HTML5/CSS3 transform : scale - 요소 크기변경  (0) 2017.06.22
HTML5/CSS3 transform : translate - 요소 이동  (0) 2017.06.21

transform : rotate - 요소 회전하기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    img{
        width: 200px;
        height: 200px;
        
        /* 
        rotate : 시계방향으로 회전
        transform : rotate3d(x,y,z,deg) x,y,z축을 기준으로 회전
        transform : rotateX(deg) x축을 기준으로 회전
        transform : rotateY(deg) y축을 기준으로 회전
        transform : rotateZ(deg) z축을 기준으로 회전
         */
        -webkit-transform : rotate(45deg);
        -moz-transform : rotate(45deg);
        -ms-transform : rotate(45deg);
        -o-transform : rotate(45deg);
        transform : rotate(45deg);
        
        /* transform-origin : 기준점 지정 */
        -webkit-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }
    </style>
</head>
 
<body>
    <img src="images/testimage.jpg" />
</body>
</html>
cs



결과

이미지가 왼쪽 아래 꼭지점을 기준으로 회전된다

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS filter : 이미지 필터 적용하기  (0) 2017.06.25
HTML5/CSS3 transform : skew - 요소 기울이기  (0) 2017.06.24
HTML5/CSS3 transform : scale - 요소 크기변경  (0) 2017.06.22
HTML5/CSS3 transform : translate - 요소 이동  (0) 2017.06.21
HTML5/CSS3 animation : 애니메이션  (0) 2017.06.20

transform : scale - 요소 크기변경



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    img {
        width: 200px;
        height: 200px;
        
        /* 
        scale : 크기변경
        transform : scale(x,y) x,y축의 크기를 변경한다
        transform : scale3d(x,y,z) x,y,z축의 크기를 변경한다
        transform : scaleX(x) x축의 크기를 변경한다
        transform : scaleY(y) y축의 크기를 변경한다
        transform : scaleZ(z) z축의 크기를 변경한다
         */
        -webkit-transform : scale(2,2);
        -moz-transform : scale(2,2);
        -ms-transform : scale(2,2);
        -o-transform : scale(2,2);
        transform : scale(2,2);
    }
    </style>
</head>
 
<body>
    <img src="images/testimage.jpg" />
</body>
</html>
cs



결과

이미지의 크기가 가로로 2배 세로로 2배 변경된다

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 transform : skew - 요소 기울이기  (0) 2017.06.24
HTML5/CSS3 transform : rotate - 요소 회전하기  (0) 2017.06.23
HTML5/CSS3 transform : translate - 요소 이동  (0) 2017.06.21
HTML5/CSS3 animation : 애니메이션  (0) 2017.06.20
HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다  (0) 2017.06.19

transform : translate - 요소 이동



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    img {
        width: 200px;
        height: 200px;
        
        /* 
        translate 이동
        transform: translate(x,y) x,y 위치로 이동
        transform: translate3d(x,y,z) x,y,z 위치로 이동
        transform: translateX(x) x 위치로 이동
        transform: translateY(y) y 위치로 이동
        transform: translateZ(z) z 위치로 이동
         */
        -webkit-transform: translate(50px, 50px);
        -moz-transform: translate(50px, 50px);
        -ms-transform: translate(50px, 50px);
        -o-transform: translate(50px, 50px);
        transform: translate(50px, 50px);
    }
    </style>
</head>
 
<body>
    <img src="images/testimage.jpg" />
</body>
</html>
cs



결과

이미지의 위치가 30, 30 이동한다

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 transform : rotate - 요소 회전하기  (0) 2017.06.23
HTML5/CSS3 transform : scale - 요소 크기변경  (0) 2017.06.22
HTML5/CSS3 animation : 애니메이션  (0) 2017.06.20
HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다  (0) 2017.06.19
HTML5/CSS3 그라디언트  (0) 2017.06.18

+ Recent posts

티스토리툴바