배워가는 페이지

font-family:가장선호, 2순위, "공백이 있는 폰트이름";

font-style: italic;

text-decoration: overline; /* 윗줄 */ 

text-align: right; /* 오른쪽정렬 */

text-decoration: line-through; /* 취소선 */

text-align: center; /* 가운데정렬 */

text-decoration: underline; /* 밑줄 */

text-align: left /* 왼쪽정렬 */

text-transform: uppercase; /* 대문자로 변환 */

letter-spacing: 5px; /* 자간 */

text-transform: lowercase; /* 소문자로 변환 */

line-height: 50pt; /* 줄간격 */

text-transform: capitalize; /* 첫글자 대문자화 */

text-indent: 40pt; /* 들여쓰기 */

font-size: 30px;

text-shadow: 15px 15px 5px red;

box모델에 margin값과 padding이 적용되는 순서

margin : 값1 값2 값3 값4; ==>위, 오른쪽, 아래, 왼쪽

margin : 값1 값2 값3; ==>위, 좌우, 아래

margin : 값1 값2; ==>상하, 좌우

margin : 값1; ==>4방향 모두

인접한 객체들의 margin값은 대체로 교집합 형태로 적용된다.

박스모델(블록요소) 자체를 가운데 정렬하려면 margin의 좌우값을 auto로

margin: 0px auto;

margin-left:auto; margin-right:auto;

border: 5px solid blue;

border-radius:25px; /* 둥근 테두리선 */

text-align: center; /* 가로정렬 */

vertical-align: middle; /* 세로정렬 */

display: table-cell; /* 박스모델의 성질을 변경한다. */

box-shadow:10px 15px 5px gray;

배경(Background)

배경이미지의 상대경로는 내부 css나 inline CSS같은 경우는 html문서를 기준으로 기술

외부css의 경우  css파일이 저장된 위치를 기준으로 경로를 지정하면 된다

-배경이미지의 반복 여부 :

background-repeat속성에 repeat(상하좌우반복, 기본값)

norepeat(반복하지않음)

repeat-x, repeat-y(x축 또는 y축 방향으로만 반복)

-background-position

=> top, center, bottom(상하)

=> left, center, right(좌우)

=> 숫자값

-background-attachment

=> scroll (배경과 내용이 같이 스크롤 된다.)

=> fixed (배경은 스크롤 되지않고 내용만 스크롤 된다.)

fieldset ==> 입력요소들을 그룹으로 묶어서 표현할 때 사용

legend ==> fieldset의 제목을 지정할 때 사용

입력요소의 새로운 속성

placeholder ==> 입력 힌트를 희미하게 표시

autofocus ==> 페이지가 로딩되면 자동으로 해당 입력폼을 활성화시킨다

checkbox나 radio객체와 '문자열'과 연결하려면 문자열을

label태그로 감싸고, checkbox나 radio객체에는 id속성을 설정한다.

그리고 label태그에 for속성과 연결하려는 id속성값을 대입한다.

내부 CSS의 기본 형식

셀렉터 { 스타일 속성:값; 스타일 속성2:값2;}

-셀렉터 ==> 문서에서 스타일을 적용할 대상을 선택하는 명령

셀렉터의 종류

1. * : 모든 엘리먼트에 스타일을 적용한다.

* { font-size:15pt; color:green;}

2. 태그명 { 스타일 정의 }

==>지정한 태그명이 해당되는 곳에 스타일을 적용한다.

p { font-size:18pt; color:green;}

div { color:red; font-size:12pt; font-family:궁서체;}

3. 태그명.class속성값 {스타일 정의}

==>지정한 태그명에 해당하는 것들 중 class속성값이 일치하는 곳에 스타일을 적용한다.

p.test { font-size:18pt; color:green; }

4. .class속성값 {스타일 정의}

==> 모든 태그들 중에서 class의 속성값이 일치하는 곳에 스타일을 적용한다.

.test { font-size:18pt; color:green; }

5.태그명#id속성값 {스타일정의}

==>지정한 태그명들 중에서 id속성값이 일치하는 곳에 스타일을 적용한다.

p#myid { font-size:18pt; color:green; text-decoration: underline;}

6.#id속성값{스타일 정의}

==>모든 태그들 중에서 id속성값이 일치하는 곳에 적용한다. 

#identify { color:red; font-size:12pt; font-family:궁서체; }

7.셀렉터1, 셀렉터2, 셀렉터3{스타일정의}

==> 각각의 셀렉터에 해당하는 모든 곳에 스타일을 적용한다.

8.셀렉터1 셀렉터2 {스타일정의}

==>셀렉터1의 자손 중에서 셀렉터2에 해당하는 모든 곳에 스타일을 적용한다.

div span { font-size:18pt; color:green; text-decoration: underline;}

9.셀렉터1>셀렉터 {스타일 정의}

==>셀렉터1의 자식들 중에서 셀렉터2에 해당하는 모든 곳에 스타일을 적용한다.

10.셀렉터1 + 셀렉터2 {스타일정의}

==>셀렉터1의 바로 다음에 오는 형제중 셀렉터2에 해당되는 곳에 스타일을 적용한다.

11.셀렉터1 ~ 셀렉터2{스타일정의}

==>셀렉터1의 뒤에 오는 형제들 중에서 셀렉터2에 해당되는 모든 곳에 스타일을 적용한다.    

-의사클래스 ==> 클래스 정의된 것처럼 간주되어 처리되는 것

형식) 셀렉터:의사클래스명{스타일 정의}

a:link

==>방문한 내역이 없는 링크걸린 글자에 스타일 적용

a:visited

==>방문한 내역이 있는 링크걸린 글자에 스타일 적용

셀렉터:hover

==>셀렉터에 해당하는 곳에 마우스 커서가 놓였을 때에 스타일을 적용한다

셀렉터:active

==>셀렉터에 해당하는 곳에서 클릭이 발생하는 순간에 스타일을 적용한다.

a { border:1px solid gray;}

a:link { font-size:20pt; color:red;}

a:visited { font-size:30pt; color:green;}

a:hover { background-color: cyan}

a:active { background-color: pink}

소리재생 ==> audio태그를 사용한다.

형식) <audio src="경로명/파일명.확장자"></audio>

속성) controls ==> 음악을 재생, 정지, 볼륨 조절 등을 할 수 있는

객체를 나타낸다.

autoplay ==> 자동 재생

loop ==> 반복 재생

muted ==> 무음 처리(볼륨 0)

volume ==> 볼륨값을 조절한다(0~1사이의 값)

preload ==> 오디오 파일을 미리 다운 받아놓는다.

지원파일) mp3, wav, ogg

동영상 재생 ==> video태그를 이용하여 재생한다.

형식) <video src="경로명/파일명.확장자"></video>

속성) controls

autoplay

loop

muted

volume

preload

width ==> 재생 화면의 너비

height ==> 재생 화면의 높이

poster ==> 재생하기 전의 재생 화면에 나타날 그림을 설정한다.

지원파일) mp4, ogv, webm

source태그 ==> audio나 video태그를 구성할 때 재생할 파일들을 설정하는 태그로 source태그가

여러개 있으면 위에서부터 차례로 재생할 수 있는지 여부를 검사하여 재생할 수 있는 파일이

있으면 그 파일을 재생한다.

(호환성을 높이기 위해 사용한다.)

(audio태그나 video태그의 하위태그로 사용한다.)

div와 span

1.블록요소

==> 1) 줄바꿈기능이 있다.

2) 영역의 크기를 지정할 수 있다.

3) 영역의 크기를 지정하지 않는 한 줄을 전부 차지한다.

2.인라인요소

==> 1) 줄바꿈기능이 없다.

2) 영역의 크기는 내용(contents)의 크기와 같다.

(즉, 임의로 크기를 지정할 수 없다.)

iframe태그 ==> 한 문서의 본문 영역에 다른 문서를 넣을 수 있는 태그

형식)

속성) width ==> 프레임 영역의 너비

height ==> 프레임 영역

name ==> 프레임의 이름

a태그의 target속성에 설정할 수 있는 값

1._self : 기본값으로 현재프레임 영역에 결과가 나타난다

2._blank : 새창 또는 새탭에 결과가 나타난다.

3._parent : 부모프레임 영역에 결과가 나타난다.

4._top : 무조건 현재창의 전체영역에 결과가 나타난다.

5.프레임명 : 해당 프레임명에 해당하는 프레임영역이 없으면 _blank기능

form태그 ==> 사용자가 form태그의 하위태그인 입력요소들을

이용하여 작성한 데이터들을 서버로 전송하는 담당하는 태그이다.

형식) <form name="폼이름" action="처리할 문서명" method="전송방식" enctype="인코딩방식">

입력 요소들

</form>

*처리할 문서명 ==> 폼에서 보내온 데이터들을 서버단에서 받아서 처리해 줄 문서를 지정한다.

*전송방식 ==> get 또는 post 방식이 있다.

1.get방식 ==> method속성이 생략되면 기본값이 된다.

==> url주소 뒤에 데이터들을 붙여서 전송하는 방식

(데이터가 노출되고 적은 양의 데이터를 전송할 때 주로 사용된다.)

2.post방식 ==> http프로토콜의 body영역에 데이터를 넣어서 전송하는 방식

(데이터의 양이 많거나 데이터를 감춰서 전송할 때 주로 사용된다.)

*인코딩방식 ==> 보통의 데이터를 전송할 때에는 생략한다.

인코딩방식을 생략하면 기본값으로 application/x-www-form-urlencoded

(데이터를 문자로 전송한다)

==> 파일을 전송할 경우 : 'multipart/form-data'로 설정한다.

=============================================================================

*입력 요소에 사용되는 태그들

input태그, textarea태그, select태그, button태그

anchor태그를 이용한 페이지 탐색

책갈피 기능 ==> 같은 문서 내에서 문서의 특정한 위치로

  빠르게 이동하는 기능

  (a태그를 이용하여 책갈피 기능을 구현할 수 있다.)

  <a href="0726bookmark.html#top">처음 위치로</a>

경로 : 어떤 특정한 파일이 있는 위치를 나타내는 표식

현재 작업중인 폴더 : .

상위폴더 (부모폴더) : ..

하위폴더 (자식폴더) : 폴더명

최상위   (루트폴더) : /

경로를 나타내는 방법

1. 절대경로 : 루트를 기준으로 찾아가는 경로

/로 시작한다.

2. 상대경로 : 현재폴더를 기준으로 찾아가는 경로

./로 시작하는데 ./은 생략가능

예) FF폴더에 있는 'tf.jpg'파일을 나타내는 경로는?

절대경로 /BB/FF/tf.jpg

상대경로 ./../FF/tf.jpg

예) DD폴더에 있는 'td.png'파일을 나타내는 경로는?

절대경로 /AA/DD/td.png

상대경로 ./../../AA/DD/td.png

셀<td><t>

테이블은 기본적으로 선이 보이지 않음, border속성 1을 추가해야 나타난다.

style 속성 table에 width와 height를 설정하거나

tr에 height, td에 width를 설정할 수 있다.

th태그의 특징 안의 글자가 진하고 가운데 정렬이 된다.

각 컬럼(열)의 제목을 나타낼 때 주로 사용한다.

표의 제목의 위치 지정하기

caption-side 표의 위쪽 또는 아래쪽(bottom)으로 설정

text-align 가로 방향의 정렬을 설정한다.

left, center, right

<tr>,<th>,<td>태그에서 데이터를 정렬하는 스타일 명령

1.text-align : 데이터를 가로방향으로 정렬한다.

left, center, right

2.vertical-align: 데이터들을 세로방향으로 정렬한다.

top, middle, bottom

테이블에서 border-spacing은 cell과 cell사이의 간격을 말한다.

border-collapse은 선을 합친다.

collapse : 합치기

separate : 분리하기

특수문자

HTML문서에서 특별한 용도로 사용되는 문자를 

형식) 엔퍼센트명령;

종류) &lt; => <

&gt; => >

&quot; => "

&amp; => &

&nbsp; => 공백(사이띄기)문자div span

커피메뉴 예제

리스트

1.순서가 없는 리스트 <ul>태그

2.순서가 있는 리스트 <ol>태그

==>하위 항목에 li태그를 사용

3.정의리스트 <dl>태그 사용

<ul>태그의 속성

type ==> 블릿기호의 종류를 지정한다.

==> disc(●), square(■), circle(○)

<ol>태그의 속성

type ==> 순서를 나타낸 기호를 지정한다.

==> 1(아라비아숫자), A,a(알파벳), I,i(로마숫자)

start ==> 시작번호를 지정한다.

<ol>태그의 자식태그인 <li>태그의 속성

value ==> 해당 항목의 순번을 변경한다.

해당 항목의 순번이 변경되면 이 항목 이후의

항목들도 자동으로 순번이 변경된다.

용어를 정리할 때 사용

<dl>

<dt>제목</dt>

<dd>내용</dd>

</dl>

image anchorTag

	태그를 사용하지 않으면

	한 줄로 표시됩니다.

p태그    p태그는 단락(문단)을 나타내며 태그 자체에 줄 바꿈 기능이 내장되어 있다.

header    header태그들은 태그명이 <h숫자>형태로 되어있으며 태그에 있는 '숫자'는

1~6 사이의 값을 갖는다. '숫자가'커질수록 글자의 크기는 작아진다.

header태그들도 p태그와 같은 줄바꿈기능이 있다.

header태그들은 주로 본문에서 '제목'을 나타낼 때 사용한다.

pre태그    줄바꿈이나 사이띄기등을 원본과 같게 나타낸다.

이 태그 자체에 줄바꿈 기능이 있다.