색상 표현법


종류

설명 

16진수 표기법 #색상값

16진수에 해당하는 색상값으로 색상을 표현합니다.   

16진수 표기법 0x색상값

설명은 위와같지만 0x로 표기합니다. 

rgb

(R)ed(G)reen(B)lue의 약어로 말그대로 red값, green값, blue값을 입력하면 됩니다.

rgba

위와같지만 뒤에 불투명도값을 0~1까지 쓰시면 됩니다. 

hsl

(H)ue(색조)(S)aturation(채도)(L)ightness(밝기)를 나타낸것으로 순서대로 입력하시면 됩니다.

hsla

위와설명이 같지만 불투명도값을 오른쪽 추가로 입력하시면 됩니다. 


소스코드↓

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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html 문서</title>
    </head>
    <body>
        <style>
            #color1{
                color:rgb(146, 255, 218);
            }
            #color2{
                color:rgba(0, 0, 0, 0.5);
            }
            #color3{
                color:hsl(115, 100%, 84%);
            }
            #color4{
                color:hsla(268, 100%, 77%, 0.5);
            }
            #color5{
                color:#459a25;<!--0x로도 16진수 표현가능-->
            }
       </style>
        <h1 id="color1">rgb를 이용한 색깔지정</h1>
        <h1 id="color2">rgba를 이용한 색깔지정</h1>
        <h1 id="color3">hsl을 이용한 색깔지정</h1>
        <h1 id="color4">hsla를 이용한 색깔지정</h1>
        <h1 id="color5">16진수를 이용한 색깔지정</h1>
    </body>
</html>
cs



배경 스타일


  • background-color
배경의 색깔을 지정하는 것 입니다. background-color:색상값;과 같이 입력할 수 있습니다.

  • backgorund-clip

배경의 범위를 조절하는 것 입니다.

예를 들어 padding-box라는 속성으로 태두리를 뺀 범위까지 적용시킬 수 있습니다.


  • background-image

배경화면을 주소값으로 이미지를 넣을 수 있도록 해줍니다.

background-image:url('주소 값 아니면 경로');


  • background-repeat

배경화면에서 반복하는 것을 조절할 수 있습니다.(body태그에 이미지 배경화면을 적용해서 background-repeat:no-repeat;값을 넣어보시면 알 수 있습니다.)


속성의 종류

 값(기본값 repeat 반복한다는 것입니다.)

설명 

 no-repeat

반복을 없앱니다. 

 x-repeat

가로반복을 말합니다.

 y-repeat

세로반복을 말합니다.


  • background-size
딱보면 알 수 있듯이 배경화면의 크기를 조절하는 것 입니다.
사용방법은 background-size:가로너비 세로너비 이렇게 입력해야합니다.(값을 사용할때)

속성의 종류

값

설명 

auto 

기본값으로 원래 이미지 크기만큼만 표시합니다. 

contain

사용하는 요소안에 들어가게끔 크기를 조절합니다. 

cover 

사용하는 요소를 덮을 크기만큼 조절합니다. 



  • background-position
배경화면의 위치를 조절하는 것 입니다.
값을 넣으면 background-position:수평길이 수직길이 로 설정가능하며 속성 값으로는

수평위치: left, center, right
수직위치: top, center, bottom
이 있습니다.


  • backgroundj-origin
배경이미지를 배치할 기준을 정합니다.
예로 border이라는 속성값으로 테두리(외곽)를 기준으로 만들 수 있습니다.

  • background-attachment
배경이미지를 스크롤할 때 사진이 같이 내려가게 하거나 할 때 사용할 수 있습니다.
scroll: 기본값
fixed: 스크롤할 때 사진이 같이 내려갑니다.

소스코드↓
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 lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body id="bg_image">
        <style>
            h1{
                background-color:#83e7ff;
            }
            #bg_image{
                background-image:url('캡처.PNG');
                background-repeat:no-repeat;
                background-size:300px 300px;
                background-position:center center;
                background-origin:content-box;
                background-attachment:fixed;
            }
       </style>
        <h1>배경스타일 설정</h1>
    </body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08
목록 관련 스타일  (0) 2018.01.05
문단 스타일  (0) 2018.01.04
글 관련 스타일  (0) 2018.01.03

목록 관련 스타일


  • list-style-type

리스트앞에 불릿모양을 변경하거나 숫자모양을 지정하게 해줍니다.(그냥 <ol type="종류">이렇게 하는게 스타일에서 하는 것보다 편할거 같습니다...)

불릿종류↓

종류 

설명 

disc 

 ●불릿을 의미합니다.

square

 ■불릿을 의미합니다.

circle 

 ○불릿을 의미합니다.

none 

 불릿이 없게 만듭니다.


숫자종류↓

 종류

설명 

decimal 

평소쓰는 10진수(1, 2, 3순서)를 말합니다.

decimal-leading-zero

10진수이지만 01, 02같이 보여집니다. 

lower-roman 

말그대로 로마문자 소문자입니다. 

upper-roman 

로마문자 대문자입니다. 

lower-alpha, lower-latin

alpha는 알파벳이고 latin은 라틴어지만 보여지는 것은 같습니다.(소문자)

upper-alpha, upper-latin

위와 설명이 같고 대문자입니다.

위와같은 것들이 있습니다.(몇가지 더있지만 생략하겠습니다.)


소스코드↓(← = &larr입니다.)

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 lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #list_square{
            list-style-type:square;
        }
        #list_roman {
            list-style-type: upper-roman;
        }
 </style>
    <ol id="list_square">
        <li>←네모</li>
    </ol>
    <ul id="list_square"><!--ol에 목록 스타일을 지정하면 li에 적용되지만 ul은 아니다.-->
        <li>←네모가 아님</li>
    </ul>
    <ul id="list_roman">
        <li>←대문자 로마문자</li>
    </ul>
</body>
</html>
cs
  • list-style-image
불릿을 그냥 설정하지않고 사진으로 대체하는 속성입니다.
사용방법은 list-style-image:url('사진의 경로');이렇게 사용하시면 됩니다. (하지만 이미지를 구해야한다는 귀찮음이 있습니다.)
소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #list_image{
            list-style-image:url('image/image3.png');
        }
</style>
    <ul id="list_image">
        <li>←사진이 출력됨</li>
    </ul>
</body>
</html>
cs


  • list-style-position

목록을 들여쓸 때 사용하는 속성입니다.(inside, outside속성등이 있고 말그대로 안쪽 바깥쪽으로 들여쓰는 의미입니다.)

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #list_position{
            list-style-position:outside;
        }
  </style>
    <ol id="list_position">
        1
        <li>들여써짐</li>
    </ol>
</body>
</html>
cs


  • list-style
이전에 배운 type속성과 position속성을 같이 한번에 적용할 때 사용합니다.
list-style:type속성,position속성;이렇게 사용할 수 있고 하나의 속성 값만 사용할 수도 있습니다.


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

그라데이션 효과 만들기  (0) 2018.01.08
색상과 배경 스타일  (0) 2018.01.07
문단 스타일  (0) 2018.01.04
글 관련 스타일  (0) 2018.01.03
CSS기초  (0) 2018.01.03

문단 스타일


  1. direction
글자쓰기 방향을 지정할 수 있게 해줍니다.rtl, ltr과같은 속성 값이 있습니다.
소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #left{
            direction:rtl;
        }
  </style>
    <h1 id="left">오른쪽으로 글이 써짐</h1>
</body>
</html>
 
cs



 B. text-align


글을 정렬시켜줍니다. 속성 값으로 center, left, right등이 있습니다.

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #cent{
            text-align:center;
        }
</style>
    <h1 id="cent">중앙정렬</h1>
</body>
</html>
cs


 C. text-justify


정렬시에 공백을 조절하는 역할을 해줍니다. 속성 값으로 auto, inter-word, distribute등이 있습니다.

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #interval{
            text-justify:distribute;
        }
   </style>
    <h1 id="interval">정렬할 때 공백조절</h1>
</body>
</html>
cs


D. line-height


여러줄 글을 쓰다보면 간격이 생기는 데 그 간격을 조정할 수 있습니다.(단위나 백분율같은 것으로 조정할 수 있습니다.)

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #height{
            line-height:10px;
        }
</style>
    <h1 id="height">줄간격</h1>
</body>
</html>
 
cs

E. text-indent

글을 쓰다보면 들여쓸 일이 생기는 데 그 때 사용합니다.(위와같이 단위같은 것으로 조정가능합니다.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #indent{
            text-indent:10px;
        }
</style>
    <h1 id="indent">들여쓰기</h1>
<\body>
</html>
 
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

색상과 배경 스타일  (0) 2018.01.07
목록 관련 스타일  (0) 2018.01.05
글 관련 스타일  (0) 2018.01.03
CSS기초  (0) 2018.01.03
기타 폼 관련태그  (0) 2018.01.03

글꼴 관련 스타일


  • font-family속성

font-family:폰트이름;이렇게 사용할 수 있으며 뒤에 ','을 이용해 폰트가 없으면 대체용으로 사용되게할 수 있습니다.Ex)font-family:Consolas, sans-serif;

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #font{
            font-family:Consolas, sans-serif
        }
   </style>
    <p id="font">font</p>
    <p>font</p>
</body>
</html>
cs

  • font-size속성

절대크기, 상대크기, 단위를이용, 백분율 이렇게 4가지가 있습니다.

(단위는 px, em등이 있습니다.)

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
           #weight{
                font-weight:900;
          }
   </style>
    <p id="size">size</p>
     <p>size</p>
</body>
</html>
cs


  • font-weight속성

normal, bold, lighter, 300, 500등 다양하게 지정할 수 있으며 글자의 굵기를 지정합니다.

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
         #weight{
                font-weight:900;
            }
 </style>
    <p id="weight">bold</p>
    <p>bold</p>
</body>
</html>
cs
  • font-varient속성
글자를 작은 대문자로 표기할 때 사용합니다.(small-caps라는 것으로 조절할 수 있습니다.)
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>         
        #uppercase_s{
            font-variant:small-caps;
        }
   </style>
    <p id="uppercase_s">aaa</p>
     <p>AAA</p>
</body>
</html>
cs


  • font-style속성
글자를 이탤릭체로 표시할 때 사용합니다. italic과 oblique가 있지만 italic을 보통 씁니다.
코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>         
    #italic{
            font-style:italic;
        }
   </style>
    <p id="italic">기울어짐</p>
    <p>안기울어짐</p>
</body>
</html>
cs


  • font속성
이것은 방금까지 본속성들을 모아서 쓸 수 있습니다.

font:(style) (varient) (weight) (size)/(줄높이) (글꼴)

속성값:caption, icon, menu등으로 자동으로 그에맞는 텍스트양식으로 만들어 줍니다.(font:icon이렇게 사용가능 합니다.)

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>         
     #f{
            font:italic small-caps 900 32px/10px Consolas, sansserif;
        }
   </style>
     <p id="f">all</p>
    <p style="font:icon">font에서icon</h1>
</body>
</html>

cs



텍스트 관련 스타일


  • color속성
color:색깔 이렇게 지정가능하며 텍스트의 색깔을 바꿔줍니다.
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #red_color{
            color:red;
        }
   </style>
    <h1 id="red_color">글자</h1> 
    <h1>글자</h1>
</body>
</html>
cs


  • text-decoration속성

underline과같은 밑줄 취소선같은 것들을 표시할 수 있습니다.

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #emphasize{
            text-decoration:underline;
        }
</style>
    <h1 id="emphasize">밑줄</h1>
</body>
</html>
cs


  • text-trasform속성
텍스트의 대소문자에 대한 태그입니다. 첫 글자 대문자, 대문자변환, 소문자변환같은 것들을 할 수 있습니다.
(속성값:uppercase, capitalize등)
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #uppercase{
            text-transform:uppercase;
        }
</style>
    <h1 id="uppercase">abc</h1>
</body>
</html>
cs


  • text-shadow속성
말그대로 그림자같이 글자를 표시할 때 사용합니다.
가로, 세로, 번짐, 색상순으로 코드에 표기해야합니다.(','로 한 글자 한 글자 지정할 수 있습니다.)
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #shadow{
            text-shadow:4px 3px 3px #ff0000;//,로 한 글자 한 글자 shadow효과를 지정할 수 있다.
        }
</style>
    <h1 id="shadow">HTML5</h1>
</body>
</html>
cs


  • white-space속성

글자의 공백을 하나로 표기할지 여러개 표시 가능하게 할지 줄넘김을 사용할지등을 조정하는 태그입니다.(예로 pre-wrap은 공백을 여러개 표시 가능하게 하고 줄넘김또한 가능하게 합니다.) 

(속성값:pre , pre-wrap등)

코드예시↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #white_space{
            white-space:pre-wrap;
        }
</style>
    <h1 id="white_space">
    공    백
    줄 
    넘
    김
    </h1>
</body>
</html>
cs


  • word|letter-spacing
단어와 단어사이의 거리와 낱개의 단어사이의 거리를 조정합니다.(보통 em단위를 사용합니다.)
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <style>
        #l_space{
            letter-spacing:3em;
        }
</style>
    <h1 id="l_space">글자</h1>
</body>
</html>
cs



여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

목록 관련 스타일  (0) 2018.01.05
문단 스타일  (0) 2018.01.04
CSS기초  (0) 2018.01.03
기타 폼 관련태그  (0) 2018.01.03
input 태그관련  (0) 2018.01.03

CSS

HTML이 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있습니다.

스타일 표기법
태그이름 { color같은 것:설정 값;} 이렇게 됩니다.

주석
/**/로 /*주석*/과 같이 사용할 수 있습니다.

스타일과 스타일 시트
내부
<style></style>안에서 설정값을 지정해 넣습니다.
외부
<link href="css파일.css" rel="stylesheet" type="text/css">
위와같이 써서 적용하고 href는 경로 rel은 무엇과 관계있는지 type는 종류를 말하는 것입니다.
그리고 css파일에서 style태그를 사용합니다.

인라인 스타일
<p style="color:red;"></p>이런 것을 말합니다.
태그와 같이 사용됩니다.

전체선택자(*)
* { 설정값} 이렇게 하면 모든 것이라는 의미가 됩니다.

태그선택자
태그를 지정해 사용하는 것 입니다.
p, h2, ul같은 데에 사용됩니다.
p { 설정 값 }
h1, h2 {설정 값}<-두개가 지정됩니다.

클래스 선택자
.이름 { 설정 값} 이렇게 사용하여 태그에서 class="이름" 이런식으로 지정하여 사용합니다.
.red { color:red;} <p class="red">~~</p>와같이 쓰입니다.
만약 h2.이름 이런식으로 태그를 지정하면 그 태그에 쓰이지 않으면 효과가 없습니다.
h2.red { color:red;} <p class="red"><-이런식으로 해도 의미가 없음

영역으로 스타일 지정
<span>태그를 이용하여 <span (class/style)>과같이 사용할 수 있습니다.

id선택자
#이름으로 만들어 사용할 수 있고 일회용 입니다.
#red { ~~} <p id="red">~~</p>
위와같이 사용할 수 있습니다.

!important
예를 들어 태그 선택자에서 같은 설정값이 나왔다면 우선하기 위해 사용합니다.
p{ color:red !important;}<-우선시됨
p{ color:blue;}

스타일 상속
어떤 태그를 포함하는 태그의 스타일을 포함되는 태그도 적용받는 것을 말합니다.
ul같은경우 적용하면 li태그도 스타일이 ul과 같이 적용됩니다.

코드예시↓
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
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
<title>html문서</title>
</head>
<body>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css">
    <style>
        * {
            background-color:gray;
        }
        p {
            color: lightskyblue !important;
            font-size: x-large;
            
        }
        p {
            color: blue;
            font-size: initial;
        }
        ul {
            color: blueviolet;
        }
        /*
            css에서의 주석입니다.
        */
        .yellow{
            color:yellow;
        }
        .h4.bgblack{
            background-color:black;
        }
        #bgorange{
            background-color:orange;
        }
    </style>
    <p>CSS</p>
    <h2>CSS</h2>
    <h1 style="color:green">CSS</h1>
    <h3 class="yellow">CSS</h3>
    <h4 class="bgblack">CSS</h4>
    <h5 class="bgblack">CSS</h5>
    <p>--<span class="yellow">노란글자</span>--</p>
    <h6 id="bgorange">주황색</h6>
    <ul>
        <li>css상속</li>
    </ul>
</body>
</html>
cs
CSS↓

1
2
3
h2{
    color:red
}
cs

여기까지 포스팅을 마치도록 하겠습니다.


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

문단 스타일  (0) 2018.01.04
글 관련 스타일  (0) 2018.01.03
기타 폼 관련태그  (0) 2018.01.03
input 태그관련  (0) 2018.01.03
폼 관련태그  (0) 2018.01.03
기타 폼관련 태그들
<button> :이태그는 말그대로 버튼을 만들때 쓰입니다.(input태그로 바꿔쓸 수 있습니다.
속성
button :그냥 버튼의 형태만 만듭니다.
submit :폼을 서버로 전송합니다. 확인같은 버튼으로 쓰입니다.
reset :내용을 초기화 시킵니다.(새로고침같은 데에 쓰입니다.)

<progress> :진행상태를 보여줄 때 쓰입니다.
속성
max :최대치를 설정합니다.
value :max에서의 value값을 말합니다. 100중70같은 용도입니다.

<meter> :정보같은 수치를 표기할 때 사용합니다.
속성
max, min :최대치, 최소치를 설정합니다.
value :위와 같습니다.
low, high :수치가 작다와크다의 기준을 정합니다.
optimum :중간의 기준을 정합니다.
코드예시↓
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 lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <label for="p">
        <input type="submit" id="p" value="submit">
        <br>
        <button type="submit" id="p">submit</button>
        <br>
        <input type="reset" id="p" value="reset">
        <br>
        <button type="reset" id="p">reset</button>
        <br>
        <input type="button" id="p" value="버튼의 형태">
        <br>
        <button type="button" id="p">버튼의 형태..</button>
        <br>
        <progress max="100" value="70">100중 70%</progress>
        <br>
        <label>90%</label>
        <meter min="0" max="100" low="30" high="80" value="90" optimum="50"></meter>
    </label>
</body>
</html>
cs
사진↓

여기까지 포스팅을 마치도록 하겠습니다.
 


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

글 관련 스타일  (0) 2018.01.03
CSS기초  (0) 2018.01.03
input 태그관련  (0) 2018.01.03
폼 관련태그  (0) 2018.01.03
이미지 관련태그  (1) 2018.01.03

input 태그의 다양한 속성

autofocus :처음에 사이트에 들어왔을때 바로 마우스커서가 표시되는 폼을 지정합니다.
placeholder :예를 들어 ex)zzz@xxxxx.com같은 예를 표시할 때 사용합니다.
readonly :사용자가 보기만하고 수정하지 못하게 내용을 만들때 사용합니다.
required :꼭 입력해야하는 필수 사항을 지정합니다.
min :수량 같은경우 최소 숫자를 지정합니다.
max :수량 같은경우 최대 숫자를 지정합니다.
step :수량을 높이거나 줄일때 커지거나 작아지는 값을 정합니다.(몇개단위 같은경우)
size : 표시할 수 있는 글자의 수를 지정합니다.
maxlength :최대입력 가능한 글자 수를 지정합니다.
minlength :최소입력 가능한 글자 수를 지정합니다.
코드예시↓
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 lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <form>
        <label for="p">로그인
            <input name="p" type="text" autofocus value="id">
            <br>
            <input name="p" type="text" size="10" minlength="5" maxlength="15" required placeholder="password">
            <br>
            <input name="p" type="submit" value="확인"/>
            <br>
        </label>
        <label for="pr">공지</label>
            <br>
            <input name="pr" type="text" readonly value="읽기전용 입니다.">
            <br>
        <label for="p1">수량</label>
            <br>
            <input name="p1" type="number" min="10" max="100" step="10" value="20">
     </form>
</body>
</html>
cs
결과↓

여러정보 나열
<select> :말그대로 선택으로 드롭다운형태를 만들어줍니다.
속성
size :한번에 보여질 메뉴개수를 정합니다.
multiple :복수로 선택가능하게 해줍니다.
<option> :위의 드롭다운형태의 선택지를 만들어줍니다.
속성
value :서버로 넘겨질값을 지정합니다.
selected :선택되어있는 기본값을 지정합니다.
<optiongroup> :위의 선택지를 묶은 것입니다.(보통 상의어가 사용됩니다.)
<datalist> :텍스트필드에 사용자가 입력하지않고 옵션을 선택하는 것으로 필드가 채워지게 해줍니다.(select대신 쓰입니다.)
속성(정확히는 input에 쓰인다...)
value :위의 설명과 같습니다.
label :사용자에게 보여질 레이블을 input에 설정합니다.
<textarea> :여러줄 텍스트 영역을 만들어 줍니다.
속성
name :다른 영역과 구분을 위해 쓰입니다.
cols :가로길이를 지정합니다.
rows :세로길이를 지정합니다.
소스코드↓
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
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <form>
        <label for="p">연습</label>
        <br>
        <!--Ctrl누른후 마우스로 두개 클릭하면 복수선택 가능합니다.-->
        <select size="2" multiple id="p">
            <option>선택1</option>
            <option value="choice2">선택2</option>
            <option selected>선택3</option>
        </select>
        <br>
        <input type="text" list="pr">
        <br>
        <datalist id="pr">
            <option value="ch1" label="선택1"></option>
            <option value="ch2" label="선택2"></option>
            <option value="ch3" label="선택3"></option>
        </datalist>
        <br>
        <textarea cols="80" rows="2">
..............................................................................
............................................................................
    </textarea>
    </form>
</body>
</html>
cs
사진↓

여기까지 포스팅을 마치도록 하겠습니다.


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

CSS기초  (0) 2018.01.03
기타 폼 관련태그  (0) 2018.01.03
폼 관련태그  (0) 2018.01.03
이미지 관련태그  (1) 2018.01.03
목록 관련태그  (0) 2018.01.03

폼 만들기

폼이란 비밀번호 입력창이나 체크박스 라디오박스등 웹에서 많이보이는 입력란등입니다.
태그의 종류
<form> :폼을 만들고 그안에 폼관련 태그를 넣습니다.

form태그의 속성
method :사용자입력값을 서버에 어떻게 넘겨줄지 정하는데 get은 사용자입력값이 드러나고 post는 드러나지않으며 입력수 제한이 없습니다.
name :폼의 구분을 위해 쓰입니다.
action :서버에서 폼의 내용을 처리할 프로그램을 지정합니다.
target :action태그에서 지정한 스크립트 파일을 어떤 창에서 실행할지 정합니다.

<input> :사용자 입력 값을 받을 폼을 만드는 태그입니다.

input태그의 속성
autocomplete :아이디 비밀번호를 입력할 때처럼 자동입력 기능을 on off할 수 있습니다.
type :사용자 입력 값을 받을 방식을 정합니다.(텍스트, 체크박스등등)
id :레이블태그의 for의 이름과 연결되어 다른 태그와 연결되어 쓰일 수 있게 만듭니다.(체크박스와 라디오버튼에 이용됩니다.)
size :필드 크기 값을 지정합니다.
checked :미리정해진 기본값을 표시해줍니다.(예 :체크박스 1번이 기본값인경우)

<label> :for속성으로 input태그를 연결해 줍니다.(라디오버튼 같은 경우 하나만 선택할 수 있게 해줍니다.)

fieldset과 legend태그
legend태그는 사용자에게 보여지는 창에서 '로그인'같은 이름으로 폼을 묶어줍니다.
fieldset태그는 묶어진 폼들에서 외곽선을 표시해줍니다.

예제↓
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
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <form method="post" name="practice" target="_blank">
        <fieldset>
            <legend>로그인</legend>
            <label for="로그인"><!--label태그의 사용1-->
                <input type="text" value="아이디를 입력해주세요." title="아이디" id="practice" autocomplete="on">
                <br>
                <input type="password" title="비밀번호" id="practice" autocomplete="on">
                <br>
                <input type="submit" title="로그인" id="practice" value="확인">
            </label>
        </fieldset>
        <br><!--라벨태그의 사용2-->
        <label for="search_id">아이디 검색</label>
        <input id="search_id" type="text"\ value="ex)xxxxxx@!!!!!.com">
        <input id="search_id" type="submit" value="찾기">
    </form>
    <dl>
        <dt>복수 선택가능</dt><!--텍스트 누르면 선택안됨...-->
        <dt><input type="checkbox" name="pr" value="a">a</dt>
        <dt><input type="checkbox" name="pr" value="b">b</dt>
    </dl>
    <dl>
        <dt>한개만 선택가능</dt><!--택스트 누르면 선택됨-->
        <dt><label><input type="radio" name="pr2" checked value="a">a</label></dt>
        <dt><label><input type="radio" name="pr2" value="b">b</label></dt>
    </dl>
</body>
</html>
cs
결과↓

여기까지 포스팅을 마치도록 하겠습니다.


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

기타 폼 관련태그  (0) 2018.01.03
input 태그관련  (0) 2018.01.03
이미지 관련태그  (1) 2018.01.03
목록 관련태그  (0) 2018.01.03
텍스트관련 태그  (0) 2018.01.03


이미지관련 태그

img: 이미지를 삽입할 때 사용합니다.
※figure과 figcaption태그로 사진에 제목을 넣을수 있습니다.

속성
src :사진의 경로를 적을 때 사용합니다.
alt :인터넷이 느리거나 사진이 사라졌을때 대체되는 텍스트로 사진을 짐작가게 해줍니다.
width :사진의 가로길이를 조정합니다.
height :사진의 높이를 조정합니다.
이때 src의 경로는 두가지로 표현할 수 있는데 절대경로와 상대경로가 있습니다.
절대경로는 C:\User\사용자1\Desktop\사진.png같이 전체를 쓰는 것입니다.
상대경로는 html파일이 있는곳에서 그파일까지의 경로입니다. 예를 들어 html파일이 Desktop\a
사진이 Desktop이라면 상대경로 ../사진.png
코드예시↓
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 lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>html 문서</title>
    </head>
    <body>
        <h2>검은 사진</h2>
        <img src="C:\Users\user\Desktop\사진.png" alt="검은사진"><!--절대경로 입니다.-->
        <hr>
        <img src="..\..\사진.png" alt="검은사진"><!--상대경로 입니다.-->
        <hr>
        <figure>
            <figcaption>
                <h2>밑은 연습을 위한 검은사진입니다.</h2>
            </figcaption>
            <img src="..\..\사진.png" alt="검은사진" width="300" height="100">
            <figcaption>
                <h2>위는 연습을 위한 검은사진입니다.</h2>
            </figcaption>
        </figure>
    </body>
</html>

cs

링크관련 태그
a :텍스트나이미지를 링크한주소로 이동시켜줍니다.
속성
href:링크할 이미지나 사이트주소를 입력합니다.
target:주소로 이동할때 창이나 새창을 지정합니다.
기본적인 target속성
_blank :새탭으로 사이트를 엽니다.
_self :지금의 창에서 사이트를 엽니다.
download:사이트이동이 아닌 파일을 다운로드합니다.
rel:파일의 종류를 알려줍니다.
hreflang:문서의 언어를 알려줍니다.
type:문서의 파일유형을 알려줍니다.
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>html 문서</title>
</head>
<body>
    <a href="https://www.naver.com" target="_blank" rel="bookmark" hreflang="ko" type="text/html"><img src="..\..\사진.png"></a>
    <a href="..\..\사진.png" download="사진.png">다운로드</a>
</body>
</html>
cs

위와같은 결과가 나오게 됩니다.

앵커
앵커는 긴 문서같은곳을 보게되면 내용2 이런식으로 바로 그내용으로 이동하는 문서를 보신적이 있을것 입니다. 
태그는 id와 a href로 가능합니다.
먼저 글을쓸때 id로 아무거나 지정하고 a href="#id이름"이런식으로 적으면 됩니다.
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>html 문서</title>
</head>
<body>
 
    <a href="#third">3으로</a>
    <h2 id="first">첫번째 내용</h2>
    <br><!--br을 추가로50개 더 넣어 줍니다.-->
    <h2 id="third">세번째 내용</h2>
    <a href="#first">1로</a>
</body>
</html>
cs

이미지 맵 지정
태그는 map, area, usemap이 있습니다.
map:name으로 맵이름을 지정합니다.
area:이미지의 영역을 지정합니다.
속성
coords :수4개로 x,y좌표를 표시합니다.
shape :영역의 모양을 정합니다.(circle, rect, poly, default)
usemap:맵이름으로 이미지맵을 지정합니다.
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>html 문서</title>
</head>
<body>
    <map name="practice">
        <area href="https://www.naver.com" coords="0, 0, 80, 100" shape="rect" alt="네이버이동">
        <area href="https://www.google.com" coords="80, 0, 160, 100" shape="rect" alt="구글이동">
    </map>
    <img src="..\..\사진.png" width="160" height="100" usemap="#practice">
</body>
</html>
cs

위와같이 됩니다.

그럼 여기까지 포스팅을 마치도록 하겠습니다.


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

input 태그관련  (0) 2018.01.03
폼 관련태그  (0) 2018.01.03
목록 관련태그  (0) 2018.01.03
텍스트관련 태그  (0) 2018.01.03
html 기본구조  (0) 2018.01.03

목록관련 태그들


먼저 ul과li이 있습니다.
ul은 기본적인 목록 형태를 만들어줍니다.
  • 이런식으로 만들어줍니다.
li은 목록의 내용을 집어넣는 것이라고 보시면 됩니다.
그리고 ul과 li에는 type라는 속성이 있는데 그것을 이용해 목록의 모양을 변경할 수 있습니다.
type속성의 값 종류
disc:●
circle:○
square:■
이런것들이 있습니다.
예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>세번째 문서</title>
</head>
<body>
    <ul>
        <li type="square">첫번째 내용</li>
        <li>두번째 내용</li>
        <li>세번째 내용</li>
    </ul>
</body>
</html>
cs

ul의 중첩
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>세번째 문서</title>
</head>
<body>
    <ul>
        <li>첫번째 내용</li>
        <li>두번째 내용</li>
        <li>세번째 내용</li>
        <ul>
            <li>세번째의 첫번째 내용</li>
            <ul>
                <li>세번째의 첫번째의 첫번째 내용</li>
            </ul>
        </ul>
    </ul>
</body>
</html>
cs



그다음으로는 ol이 있습니다.
ol은 목록의 종류를 고를수 있고 순서를 바꿀수도 있습니다.
type속성의 값 종류
i:로마자 소문자
1:숫자
I:로마자 대문자
A:영어 대문자
a:영어 소문자

reversed속성
순서를 거꾸로 보여줍니다.

value속성
li하던중 순서를 어디서부터 한다할때 그숫자를 넣으면 그 숫자부터 시작합니다.

start속성
처음 시작할 숫자를 설정할 수 있습니다.

예시코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>세번째 문서</title>
</head>
<body>
    <ol type="I" start="10" reversed >
        <li>첫번째내용</li>
        <li>두번째내용</li>
        <li value="3"><mark>3번째내용</mark></li>
    </ol>
</body>
</html>
cs

다음은 dl, dt, dd입니다.
dl은 제목과 설명을 묶은 부분이라고 보면 됩니다.
dt는 제목 부분입니다.
dd는 내용 부분입니다.

코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>세번째 문서</title>
</head>
<body>
    <dl>
        <dt>dt의내용</dt>
        <dd>dd의내용</dd>
        <dt>두번째 dt의내용</dt>
        <dd>두번째 dd의내용</dd>
    </dl>
</body>
</html>
cs

표에관한 태그들

여기서는 table과 tr, td, th가 있습니다.
table은 표를 만들자리를 만든다고 생각하시면 됩니다.
※table의 속성중 border은 표의 셀구분 두께를 조절할 수 있습니다.
tr은 행을 만드는 것입니다.
td는 제목 셀을 만드는 것 입니다.
th는 제목셀 다음의 내용으로된 열을 만드는 것입니다.
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>세번째 문서</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>제목셀 입니다!</td>
            <th>내용셀 입니다.</th>
        </tr>
        <tr>
            <td>두번째 제목셀 입니다!</td>
            <th>두번째 내용셀 입니다.</th>
        </tr>
    </table>
</body>
</html>
cs

위와같은 결과가 나오는 것을 볼 수 있습니다.

colspan과rowspan
colspan은 열단위로 합친 것입니다.
rowspan은 행단위로 합친 것입니다.
코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>세번째 문서</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>제목셀 입니다!</td>
            <th colspan="3">3개짜리 셀입니다.</th>
            <th rowspan="2">행합치기!</th>
        </tr>
        <tr>
            <td>두번째 제목셀 입니다!</td>
            <th>2-1</th>
            <th>2-2</th>
            <th>2-3</th>
        </tr>
    </table>
</body>
</html>
cs

이렇게 사용하실 수 있습니다.

표에 제목 붙이기
caption, figure, figcaption을 이용하게 됩니다.
caption은 그냥 표앞에 붙여쓰면 제목이 붙게 됩니다.
figure은 표의 영역을 지정하는 것이라고 보면 됩니다.
figcaption은 figure태그안의 <table>앞이면 표위에 </table>뒤면 표밑에 제목이 생깁니다.
코드예시↓
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
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>세번째 문서</title>
</head>
<body>
    <table border="1">
        <caption>
            <h2>제목 연습</h2>
        </caption>
        <tr>
            <th>제목</th>
            <td>내용</td>
        </tr>
    </table>
    <figure>
        <figcaption>
            <h2>표위의 제목</h2>
        </figcaption>
    <table border="1">
        <tr>
            <th>제목셀</th>
            <td>내용셀</td>
        </tr>
    </table>
        <figcaption>
            <h2>표밑의 제목</h2>
        </figcaption>
    </figure>
</body>
</html>
cs


이렇게 사용가능 합니다.

표구조 정의
thead:제목부분에 해당합니다.
tbody:본문부분에 해당합니다.
tfoot:결론부분에 해당합니다.
코드예시↓
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">
    <title>세번째 문서</title>
</head>
<body>
    <table border="1">
        <thead>
            <th>thead0</th>
            <td>thead1</td>
        </thead>
        <tbody>
            <th>tbody0</th>
            <td>tbody1</td>
        </tbody>
        <tfoot>
            <th>tfoot0</th>
            <td>tfoot1</td>
        </tfoot>
    </table>
</body>
</html>
cs

여러열을 묶어 스타일 지정하기
col, colgroup
colgroup:col을 묶어 여러열을 묶을 수 있습니다.
col:열을 지정할 수 있습니다.
코드예시↓
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">
    <title>세번째 문서</title>
</head>
<body>
    <table border="1">
        <colgroup>
            <col span="2" style="background-color:blue">
            <col span="1" style="background-color:yellow">
        </colgroup>
        <thead>
            <th>thead0</th>
            <td>thead1</td>
            <td>thead2</td>
        </thead>
        <tbody>
            <th>tbody0</th>
            <td>tbody1</td>
            <td>tbody2</td>
        </tbody>
        <tfoot>
            <th>tfoot0</th>
            <td>tfoot1</td>
            <td>tfoot2</td>
        </tfoot>
    </table>
</body>
</html>
cs

이렇게 오늘은 목록과 표에대해 알아보았습니다.


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

폼 관련태그  (0) 2018.01.03
이미지 관련태그  (1) 2018.01.03
텍스트관련 태그  (0) 2018.01.03
html 기본구조  (0) 2018.01.03
HTML이란?  (0) 2018.01.03

+ Recent posts

티스토리툴바