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' 카테고리의 다른 글

문단 스타일  (1) 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
텍스트관련 태그  (1) 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
텍스트관련 태그  (1) 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
텍스트관련 태그  (1) 2018.01.03
html 기본구조  (0) 2018.01.03
HTML이란?  (1) 2018.01.03

텍스트 관련 태그들

 <h1>~<h6> 제목을 표시할때 쓰이는 태그로 숫자가 클수록 글자가 작습니다.
 <p> 글을 쓸 수 있는 단락을 만들어 줍니다.
 <br> Enter역할으로 한 줄 넘김 입니다.
 <hr> 수평 줄을 넣어줍니다.
 <blockquote> 인용문을 사용할 때 사용합니다.
 <pre> 공백을 여러개 연속 입력해도 표시되도록 해줍니다.
 <strong>, <b> 글씨를 굵게 해줍니다.
 <em>, <i> 글씨를 기울여줍니다.
 <q> 인용문을 사용할 때 사용하지만 ""을 사용해 표현합니다.
 <mark> 형광첸으로 표시한 것처럼 보여줍니다.
 <span> 일부 텍스트를 묶을때 사용합니다.
 <ruby>, <rt> 동아시아 글자에 주석을 표기하기 위한 태그입니다.
 <abbr> title태그에서 약자를 표기할때 사용할 수 있습니다.
 <cite> 참고한 내용을 표시 해줍니다.
 <code> pre와 같이 코드를 표기할 떄 사용합니다.
 <kbd> 키보드 입력 같은 것을 표기할 때 사용합니다.
 <small>, <big> 글자를 크게 또는 작게 만듭니다.
 <sup>, <sub> 위 첨자와 아래 첨자를 표기할 때 사용합니다.
 <s>, <del> 취소선을 표기할 때 사용합니다.
 <u>, <ins> 밑줄을 표기할 때 사용합니다.

다음의 예로 밑과같이 사용할 수 있습니다.
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
<!doctype html>
<html>
<head>
<title>두번째 html문서</title>
</head>
<body>
    <h1>H1의 글자크기</h1>
    <h6>H6의 글자크기</h6><!--<hn>(n은숫자1~6)으로 클수록 글자크기가 작습니다.-->
    <p>이것은 글자를 쓰는 단락입니다.</p>
    <h2> <br>br의 줄넘김 입니다.</h2>
    <h2>밑은 hr로 수평 줄을 넣은 예입니다.</h2>
    <hr>
    <blockquote><h2>이것은 blockquote로 인용글을 쓸때 사용하는 태그입니다.</h2></blockquote>
    <pre>이것은  pre로  공백을  입력한대로  보여줍니다. (※원래 공백은 많이써도 한개로 인식됨.)</pre>
    <h2>strong과 b를 이용한<strong>굵</strong><b>은</b>글자</h2>
    <h2>i와em을 이용한<i>기울</i><em>이기</em></h2>
    <h2><q>q의 인용문</q></h2>
    <h2><mark>mark를 이용한 효과내기</mark></h2>
    <h2>글자 <span style="color:green">묶어</span>서 사용하기</h2>
    <h2><ruby>루비<rt>RT</rt></ruby>를 이용한 글자 위 주석표기</h2>
    <h2><abbr title="HTML">HyperTextMarkupLanguage</abbr>abbr이용</h2>
    <h2><cite>'cite'</cite>를 씀</h2>
    <pre><code> 
        #include<stdio.h> //code태그의 이용으로 가능하다.
        int main(void){
            printf("Hello World!");
            return 0;
        }
    </code></pre>
    <h2><kbd>Ctrl+C</kbd>=복사</h2>
    <h2><small>작은글자</small><big>큰글자</big></h2>
    <h2>E=mc<sup>2</sup>, E<sub>p</sub>=9.8mh</h2>
    <h2><s>취소</s><del>선</del>귿기</h2>
    <h2><u>밑</u><ins>줄</ins>귿기</h2>
    </body>
</html>
cs

결과의 사진입니다.





오늘은 여기에서 마치도록 하겠습니다.


저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

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

HTML의 기본 구조

1. 태그는<태그><-이런식으로 사용합니다.
2. 태그는 중첩이 가능합니다.
3. 열고 닫는 태그를 확실히 입력합시다.
4. 여닫는 것도 확실히 합시다.
※태그란?
html에서 <>로 이루어진 것을 말합니다.
(ex. <p>, <h1>, <br>등등)

html의 기본구조 살펴보기
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>
    <h1>Hello World! (html 첫 문서)</h1>
    <p>HTML(Hyper Text Markup Language)</p>
    <br>
    <img src="images/first.jpg"> 
</body>
</html>
 
cs
위와 같이 사용할수 있습니다.
보시면 doctype, html, head, body가 중심이 되는 것을 보실 수 있습니다.
이제 역할을 알아보겠습니다.

doctype
이것은 웹브라우저에게 이것은 무슨문서라고 이렇게 읽어야한다고 명시하는 것이라고 생각하시면 됩니다.

html
이것은 문서가 시작된다는 의미이고 lang="ko"를 이용해서 한국어를 사용할 것이라는 사실을 알리고 있습니다.

head
이것은 웹브라우저에 정보를 주는 태그입니다.
meta태그를 통해 인코딩을 utf-8로 한다는 사실을 주었고 title태그를 이용해 문서제목↓

부분이 무엇인지 알려주었습니다.
body
그냥 보시면 아시듯이 사용자에게 표시될 부분을 body태그를 사용해서 표현합니다.


저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

폼 관련태그  (0) 2018.01.03
이미지 관련태그  (1) 2018.01.03
목록 관련태그  (0) 2018.01.03
텍스트관련 태그  (1) 2018.01.03
HTML이란?  (1) 2018.01.03

HTML이란?

Hyper Text Markup Language로 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML이라고 정리할 수 있습니다.

HTML과 CSS3의 공부이유
웹 디자이너나 웹 개발자가 되기 위해 배워야 한다.
ex
1. 최신 웹 표준에 맞는 웹 사이트를 제작할 수 있습니다.
2. 앱 화면을 디자인하기 위한 기초입니다.
3. 인터랙티브한 사이트를 만들 수 있습니다.
4. 소스를 이해해 웹 사이트와 블로그를 수정하기 쉽습니다.

사용하는 웹브라우저:크롬
편집프로그램들: 노트패드++, 에디트 플러스, 텍스트 메이트, 코다, 드림위버, 비주얼스튜디오 코드 등이있습니다.


저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

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

+ Recent posts

티스토리툴바