HTML
구성
HTML은 웹페이지의 구조와 내용을 정의한 것으로, 다양한 요소(명령어)의 집합이다. 보통은 <요소>와 같이 시작태그로 시작되고, </요소> 처럼 종료태그로 마무리한다. 예외가 있기도 한데, <a href="hyper-polaris.tistory.com"> 처럼 시작태그 안에는 속성이 들어가기도 한다. 속성은 추가적인 정보를 제공하여 명령어를 더 구체화시키는 것을 말하며, 공백으로 구분한다. <br>, <img> 처럼 종료태그가 없는 경우도 있다.
기본 구조
<!DOCTYPE html>
<html>
<head>
문서 제목(title) 등
</head>
<body>
문서의 본문 내용
<!-- 자바스크립트 코드 -->
</body>
</html>
1. <DOCTYPE hml> 문서유형을 선언한다
2. <html> ... </html> HTML 문서의 시작과 끝을 알려준다
3. <head> ... </head> 웹문서에 대한 메타 정보를 포함한다. 화면에는 표시되지 않는다. 주로 사용되는 메타정보는 다음과 같다.
| 메타 정보 | 설명 |
| title | 브라우저 상단, 즐겨찾기 제목, 검색엔진의 결과 페이지 제목으로 사용 |
| link | CSS 파일을 가져와 문서에 적용할 경우 |
| style | 웹문서에 적용할 CSS 스타일을 정의하는 경우 |
| script | 자바스크립트 코드를 작성하거나, 작성된 코드를 링크하는 경우 |
| meta | 웹문서에 대한 다양한 메타 데이터를 나타내고 싶은 경우 |
| base | 웹문서의 기본 URL 경로를 지정하거나 출력될 타깃 윈도우(기존 창에서 열기, 새창에서 열기)를 지정할 경우 |
4. <body> ... </body> 실제로 문서에서 보여줄 본문
5. <!--주석내용--> 문서 소스 내에 설명을 추가할 경우
요소
요소에는 블록 요소와 인라인 요소가 있다.
1) 블록요소 (div, p, h1, ...)
- 문서 구조 요소로, 항상 새로운 줄로 시작하여 하나의 줄을 모두 차지한다.
- 자동 줄바꿈이 가능하다.
2) 인라인요소 (span, img, strong, ... )
- 텍스트 요소로, 입력한 내용만큼의 공간을 차지한다.
- 줄바꿈을 하지 않고 한줄에 쭉 표시된다.
콘텐츠 컨테이너 요소로는 div와 span이 있다. div는 논리적인 단위로 구성되어, 대량의 내용에 대해 CSS를 지정하거나 공간을 분할하여 레이아웃을 구성하는 데 사용된다. 반면 span은 텍스트를 위한 컨테이너로, 텍스트 일부에 대해 CSS를 지정하거나 자바스크립트로 조작할 때 유용하다.
자주 사용되는 요소
1. 텍스트
1) 일반 요소
| 요소 | 설명 |
| <br> | 줄바꿈 (종료 태그 없이도 사용 가능함) |
| <p> | 단락 나누기 |
| <hr> | 수평선 (자동 줄바꿈, 종료태그 없이 사용 가능함) |
| <h1>, <h2>, <h3>, <h4>, <h5>, <h6> | 단락의 제목(볼드체, 자동 줄바꿈) |
| <pre> | 텍스트를 자유롭게 표시할 수 있도록 입력된 형태 그대로 출력 |
| <blockquote> | 인용문(들여쓰기) |
| <blockquote cite="URL"> | 인용된 부분의 URL 지정 |
2) 문자 입력
두 칸 이상의 연속된 공백, 키보드로 입력할 수 없는 문자를 입력하고 싶은 경우에는 특수한 이름으로 작성한다. 예를 들어 공백은 < 문자는 < > 문자는 > &는 & 등으로 작성한다.
3) 스타일 지정
html을 통해 스타일을 지정하고 싶은 경우 물리적 스타일과 논리적 스타일 요소를 사용한다. 물리적 스타일은 출력 모양을 지정하고, 논리적 스타일은 출력보다는 요소 자체의 의미가 부여된다.
*물리적 스타일
| 요소 | 설명 | 요소 | 설명 |
| b | 진하게 | s | 취소선 |
| i | 기울어진 형태(이탤릭체) | u | 밑줄 |
| sup | 위첨자 | sub | 아래첨자 |
| small | 기본 글자 크기보다 작게 |
논리적 스타일
| 요소 | 설명 | 요소 | 설명 |
| cite | 작품의 제목을 표시 | code | 컴퓨터 코드를 표시 |
| samp | 프로그램의 샘플 출력을 표시 | var | 변수를 표시 |
| dfn | 용어에 대한 정의를 표시 | em | 강조하는 내용을 표시 |
| strong | 중요한 내용을 표시 | abbr | 축약형을 표시 |
| address | 우편물 주소 표시 | kbd | 키보드로 입력한 내용임을 표시 |
| q | 짧은 인용구를 표시 | mark | 시각적, 의미적으로 특정문구나 단어 강조 |
2. 리스트
| 요소 | 설명 | 속성 |
| ul | 순서 없는 리스트, 즉 길머리 기호를 사용하여 리스트를 표시한다 | |
| ol | 순서 있는 리스트, 순서를 매겨셔 리스트를 표시한다 | · <ol type = "값"> : 순서가 부여된 기호의 유형을 지정한다 · <ol start = "숫자"> : 항목의 시작 번호를 지정한다 · <ol reversed> : 번호를 역순으로 지정한다 |
| li | ul과 ol의 자식 요소로, 리스트에서 각 항목의 내용을 표시할 때 사용한다. 들여쓰기 되며 자동으로 줄바꿈된다. 종료 태그 없이 사용이 가능하다. | <li value="숫자"> : 항목 번호를 중간에 바꿀 때 사용한다 (ol 요소에서만 사용) |
| dt | 서술 리스트 중 하나이다. 서술리스트란 어떤 용어나 이름에 대해 서술하는 형식을 말한다. dt는 용어나 이름을 나열하고 자동으로 줄바꿈된다. |
|
| dd | 서술 리스트 중 하나로, dt와 쌍을 이루어 사용한다. 서술된 용어나 이름에 대해 설명을 입력할 때 사용된다. 들여쓰기 되며 자동으로 줄바꿈된다. |
3. 이미지
| 요소 | 설명 | 속성 |
| img | 이미지를 사용할 때 사용된다. 이미지는 인라인요소이며, 종료 태그 없이 사용 가능하다. 또한 종료 태그 없이 사용한다. | · <img src="url">: 문서에 표시할 파일의 경로(필수) · <img width="숫자">: 이미지의 폭 · <img height="숫자">: 이미지의 높이 · <img height="숫자">: 이미지의 높이 · <mg alt="텍스트">: 이미지가 표시되지 않을 경우 표시할 텍스트 · <img usemap="#맵이름"> : 클라이언트 측의 이미지 맵 |
하나의 이미지를 여러 영역으로 나누어, 각 영역마다 링크를 지정할 수 있다. img, map, area 요소를 사용한다.
· <img src="URL" usemap="#맵이름">
· <map name = "맵이름">
· <area shape = "값"> : 이미지맵의 영역 모양을 정한다
· <area coords = "값"> : 각 영역을 구성하는 좌표값을 정한다
· <area href= "값"> : 연결할 링크를 정한다
· <area target = "값"> : 링크된 내용이 열릴 창의 형태를 정한다
· <area download= "값"> : href로 지정한 파일을 다운로드한다
· <area alt = "값"> : 대체 텍스트 내용을 입력한다
4. 하이퍼링크
| 요소 | 설명 |
| a | 링크를 클릭하여 다른 위치로 이동시킬 때 사용한다 속성 · <a href="URL">: 기본 형식 · <a href="URL" target="값">: 링크를 클릭했을 때 링크된 내용이 출력될 창을 지정한다. 새로운창(_blank), 기본창(_self) 등을 넣는다. · <a href="URL" download: href 속성에 지정된 파일을 다운로드한다 |
| iframe | 현재의 웹 페이지 안에 다른 웹페이지를 표시하는 view를 삽입한다 속성 · <iframe name="이름"> : view의 이름 · <iframe src="URL"> : view에 표시될 문서의 URL · <iframe srcdoc="HTML코드"> : 창에서 보여줄 html 콘텐츠 · <iframe width="폭"> : view의 폭 · <iframe height="높이">: view의 높이 |
특정 위치로 이동할 경우 <a href="URL"> 과 <a id="값">을 사용할 수 있다.
· <a href="#이동할 특정 위치의 이름">: 같은 페이지 내 특정 위치로 이동한다
· <a href="페이지경로#이동할 특정 위치의 이름">: 다른 페이지의 특정 페이지로 이동한다
· <a id="이동할 특정 위치"> : 이동할 특정 위치를 지정한다
5. 테이블
| 요소 | 설명 |
| table | 테이블을 정의한다 |
| caption | 테이블 전체에 대한 제목을 표시한다 |
| th | 테이블의 헤더 셀을 정의한다 |
| tr | 테이블의 행을 정의한다 |
| td | 테이블의 데이터로, td의 개수가 열의 개수가 된다 속성 · <td colspan="값"> : 인접한 n개의 행을 병합(세로병합) · <td rowspan="값"> : 인접한 n개의 열을 병합(가로병합) |
| thead/tbody/tfoot | 테이블의 행 단위의 콘텐츠를 헤더, 몸체, 푸터 부분으로 그룹핑하는 요소이다. 테이블 레이아웃에는 영향을 주지 않는다 |
| colgroup | 1개 이상의 열을 모아 한꺼번에 스타일을 지정할 때 사용한다 |
| col | colgroup의 자식요소로, 지정된 열에 대해 서로 다른 포맷을 정의한다 속성 · <col sapn="값"> : 해당 요소의 스타일이 적용되는 열의 개수 |
요소들은 <table> <caption> <colgroup> <thead> <tr> ... </table> 순서를 따른다.
6. 미디어
| 요소 | 설명 |
| audio | 오디오를 재생하기 위해 사용한다. 속성 · <audio autoplay> : 로딩 시 자동 재생 · <audio contorls> : 제어버튼(재생, 일시정지, 볼륨 등) 표시 · <audio loop> : 반복 재생 · <audio muted> : 음소거 · <audio preload="값"> : 웹페이지가 열릴 때 오디오의 로딩방식을 지정한다. none(재생 전까지 로드하지 않음), auto(페이지 로딩 시 파일 로드), metadta(재생 전까지 메타파일만 로드) 등을 지정한다. · <audio src="URL"> : 재생할 파일의 url |
| video | 비디오를 재생하기 위해 사용한다. 속성 · <video poster="이미지 파일 URL"> : 비디오가 로딩되는 동안 보여줄 이미지 지정 · <video src="파일명#t=시작시간,종료시간"> : 콘텐츠의 특정 구간을 지정하여 재생 · audio 속성 autoplay, contorls, loop, muted, preload 등 사용 가능 |
| source | 브라우저마다 지원하는 파일형식이 다른 경우, 다양한 파일 형식을 지정한다. 속성 · <source src="URL"> · <source type="MIME형식"> · <source media="미디어쿼리"> |
7. 시멘틱 요소
시멘틱 요소는 의미구조 단위로 문서를 작성하기 위해 사용된다. 사람이 읽고 이해하고 검색엔진 등이 자동으로 문서를 처리하고 해석하기 용이하도록 도와준다.
1) 문서 구조와
| 요소 | 설명 |
| header | 머리말, 머리글 |
| nav | 메뉴 영역 |
| section | 제목, 주제별로 나눌 수 있는 문서의 내용 영역 |
| article | 개별 콘텐츠 |
| aside | 좌우측 보조 콘텐츠 영역 |
| footer | 꼬리말, 바닥글 |
2) 블록 요소
| 요소 | 설명 |
| main | body 영역의 주요 콘텐츠의 블록을 지정할 때 사용한다 |
| figure | 삽입한 콘텐츠를 하나로 묶어 블록을 형성하여 구조화한다 |
| figcation | figure의 자식요소로, figure 요소에 대한 캡션을 표시한다 |
| details | 세부정보를 숨기거나 보여주는 형태로 표현한다 속성 · <details open> : 세부정보가 사용자에게 보여진다 |
| summary | details의 자식 요소로, 세부정보에 대한 캡션을 지정한다 |
3) 인라인 요소
| 요소 | 설명 |
| time | 시간, 날짜 표현에 대해 의미를 부여하기 위해 사용한다 속성 · <time datetime="날짜"> : 시스템이 인식할 수 있도록 정확한 형식의 시간과 날짜를 지정 |
| meter | 주어진 값이나 비율을 나타내기 위해 게이지 형태로 표현한다 속성 · <meter value="값"> : 현재의 값 · <meter min="값">, <meter max="값"> : 요소의 최소값과 최대값 · <meter low="값>, <meter high="값"> : 범위의 최소값과 최대값 · <meter optimum="값"> : 최적 값 |
| progress | 작업의 진행률을 나타낸다 속성 · <progress value="값"> : 현재 작업된 값 · <progress max="값"> : 작업량의 최대값 |
| ruby | 루비 주석을 지정한다 |
| rt | ruby의 자식 요소로, rt 바로 앞에 오는 구문에 대한 주석을 표시한다 |
| wbr | 줄바꿈이 수행되어도 되는 지점을 지정한다 |
8. 폼
| 요소 (요소+속성) | 설명 |
| form | 사용자로부터 데이터를 입력받기 위해 필요한 폼 요소를 담은 컨테이너이다. 속성 · <form action="URL"> : 데이터를 전달받아 처리할 서버의 주소 · <form method="전송방식"> : 데이터를 서버로 전송하는 방식(get, post) · <form name="값"> : 폼 이름 · <form accetp-charset="값"> : 문자 인코딩 방식 · <form autocomplete="값"> : 자동완성 기능의 사용 여부 · <form enctype="값"> : post 일때의 인코딩 방식 · <form novalidate="값"> : 데이터의 유효성 검사를 하지 않음 · <form target="값"> : 서버로부터 전달받은 처리 결과를 보여주는 창 |
| input | 다양한 유형(text, search, password, tel, radio, url, checkbox, email, hidden, number, file, range, image, color, submit, date, reset, month, button, week, time, datetime-local 등)의 입력 타입을 지정한다. 속성 · <input type="타입명" required> : 반드시 입력해야하는 항목 |
| input type="number" | 특정 범위의 숫자를 입력하는 것으로, 사용자가 값을 입력하거나 핸들로 특정 값을 설정한다. |
| input type="range" | 특정 범위의 숫자를 입력하는 것으로, 특정 값을 지정하기 쉽지 않다. 속성 · <input type="range" min="값">, <input type="range" max="값"> : 입력가능한 숫자의 최소값과 최대값 · <input type="range" step="값"> : 입력값의 유효한 간격 · <input type="range" value="값"> : 입력값의 초기값 또는 현재 입력한 값 |
| input type="text" | 짧은 텍스트를 입력할 때 사용한다 속성 · <input type="text" value="값"> : 초기 입력창에 표시되는 텍스트 · <input type="text" autofocus>: 사용자의 입력을 기다림 · <input type="text" size="값"> : 사용자에게 보여주는 글자 수 · <input type="text" maxlength="값"> : 입력받을 수 있는 문자 길이 |
| textarea | 여러 줄에 해당하는 텍스트를 입력(출력)할 때 사용한다 · <textarea name="값"> :텍스트 영역의이름 · <textarea rows="값">:텍스트 라인수 · <textarea cols="값">:한 줄에 입력할 수 있는 글자 수 · <textarea wrap="값"> : 폼으로 전송될 때 줄바꿈 포함 여부로, 값으로는 soft(자동 줄바꿈이 포함되지 않음), hard(자동으로 줄바꿈이 포함되어 전송)이 있다. · <textarea readonly>: 읽기 전용으로만 사용 |
| input type="raido" | 항목 중 오직 1개만 선택 가능하다 속성 · <input type="radio" name="값"> : 같은 그룹의 속하는 항목 · <input type="raido" value="값:> : 서버로 전달되는 값 (name=value 형태) · <input type=""radio", checked> : 초기값으로 선택되는 항목 |
| input type="checkbox" | 여러 항목을 동시에 선택할 수 있다 |
| input type="file" | 자신의 시스템에 있는 파일을 선택한다 속성 · <input type="file" accept="파일유형"> : 선택할 수 있는 파일 유형을 지정함 · <input type="file" multiple> : 여러 파일을 동시에 선택할 수 있음 |
| input type="color" | 색상표에서 원하는 색상을 선택한다 |
| select | 드롭다운 리스트를 만드는 경우 사용한다 속성 · <select name="이름"> : 드롭다운 리스트 개수 · <select size="숫자"> : 한 화면에 보이는 항목의 개수 · <select multiple> : 여러 항목을 한 번에 선택할 수 있도록 지정함 |
| optgroup | select의 자식요소로, <opgroup label="값"> 형태로 옵션을 그룹핑한다 |
| option | select와 datalist의 의 자식요소로, <option value="값"> 형태로 리스트 내 항목을 만들기 위해 사용한다 속성 · <option value="값" disabled> : 해당 옵션을 비활성화 · <option value="값" selected> : 초기 옵션 · <option value="값" value="값"> : 서버로 전달되는 항목의 값 |
| datalist | 지정한 텍스트타입이 포커스를 받으면 미리 입력한 옵션이 드롭다운 형태로 표시된다. 이 때 input 요소와 datalist 요소를 연동시켜야 하는데 list 속성과 id 속성을 이용한다. <input type="text" list="datalist_id"> <datalist id="datalist_id" ...> <option value="값" ...> <option value="값" ...> </datalist> |
| button | 클릭할 수 있는 버튼을 정의한다. input 요소와 달리 버튼명에 텍스트나 이미지 표기가 가능하다. 속성 · <button valule="버튼명"> : 버튼위에 표시되는 이름 |
| output | 폼 내 다양한 값을 출력할 수 있도록 지정한다. input 요소에 의해 입력된 값이 변하면 곧바로 반영하여 화면에 출력하기 위해 사용한다. |
| fieldset | 폼 요소들을 그룹핑하여 사각형 테두리로 표시된다. |
| legend | fieldset 요소의 자식 요소로, 그룹핑되는 요소들에 대한 캡션을 표시한다. 테두리 선상에 캡션이 표시된다. |
| label | 폼 요소와 캡션을 묶어 캡션만 클릭해도 포커스될 수 있다. |
CSS
CSS는 문서의 스타일을 만드는 것이다.
구성
선택자 { 속성: 값; 속성: 값; }선택자란 스타일을 적용하려는 HTML 요소를 말한다. 해당 선택자에 어떠한 스타일을 적용할지 속성을 입력하고, 해당 속성에 어떤 값을 사용할지를 지정한다.
입력 방식
CSS는 스타일이 정의되는 위치에 따라 3가지로 분류할 수 있다.
1. 임베디드: HTML 문서 안에 넣는다. <head>에 <style> 코드를 넣어 삽입한다.
2. 인라인: HTML 코드 안에 style 속성을 사용하여 직접 넣는다.
3. 외부 링크: HTML 문서의 <head>에 <link>를 사용하여 파일을 넣는다. 혹은 <style> 코드를 사용하여 @import 형식으로 삽입할 수 있다.
동시에 여러개를 지정했을 경우에는 body에 가까운 순서대로 우선순위를 갖는다. 또한 직접 요소를 작성하여 넣는 것이 외부 링크를 삽입한 것보다 더 우선순위를 갖는다.
선택자
선택자는 스타일을 적용하려는 HTML 대상을 말한다. 선택자에도 세 가지 종류가 있다.
1. 기본 선택자
1) 전체 선택자
모든 요소를 선택한다. * 기호를 사용한다.
* {속성: 값}2) 타입 선택자
지정한 모든 요소만 선택한다. 스타일을 적용하려는 HTML 요소 이름을 직접 사용한다. 자식요소도 함께 적용된다.
요소명 {속성: 값}3) 클래스 선택자
class="속성명"의 요소만 선택한다. 같은 요소라면 요소명.클래스명 으로 정의하고, 서로 다른 요소라면 요소명을 생략한다.
요소명.클래스명 {속성: 값; ...}
.클래스명 {속성: 값; ...}<요소명 class="클래스명"> 내용 </요소명>4) 아이디 선택자
id="속성명"의 요소만 선택한다. 참고로 id명은 문서 내부에 중복되지 않는다.
요소명#아이디명 {속성: 값; ...}<요소명 id="아이디명"> 내용 </요소명>5) 속성 선택자
요소의 속성값에 대한 표현과 일지하는 요소를 선택한다.
요소명 [속성명]
요소명 [속성명="값"]
요소명 [속성명~="값"] ...
2. 가상 선택자
웹문서 상에는 존재하지 않지만 어떤 상황이 발생했을 때 적용할 수 있도록 임의로 선택자를 지정한다.
1) 가상 클래스
기본선택자:가상클래스| 가상클래스 | 설명 |
| :link | 아직 방문하지 않은 모든 링크 선택 |
| :visited | 방무한 적 있는 링크 선택 |
| :hover | 마우스가 올라간 링크 선택 |
| :active | 활성화되는(클릭되는) 링크 선택 |
| :focus | 포커스를 가진 요소 |
| :enabled | 활성화된 상태의 요소 |
| :disabled | 비활성화된 상태의 요소 |
| :checked | 체크된 input 요소(체크박스, 라디오 버튼) |
| :not(X) | X로 표현되지 않은 요소 |
| :root | 트리로 표현했을 경우 최상위 요소 |
| :nth-child(n) | 동일한 부모요소 안에서 n번째 자식 요소 선택 |
| :nth-last-child(n) | 동일한 부모 요소 안에서 끝에서 n번째 자식 요소 선택 |
| :nth-of-type(n) | 동일한 부모 요소 안의 형제 요소 중 지정한 요소만을 계산하여 n번째 요소 선택 |
| :first-of-type | nth-of-type(1) |
2) 가상 요소
기본선택자::가상요소| 가상요소 | 설명 |
| ::first-line | 특정 요소의 첫 번째 줄을 선택 |
| ::first-letter | 특정 요소의 첫 번째 글자를 선택 |
| ::before | 요소 앞에 내용/스타일 추가 |
| ::after | 요소 뒤에 내용/스타일 추가 |
3. 결합자
| 결합자 | 설명 |
| 선택자1 선택자2 | 자손 결합: 선택자1의 자손 요소 중 선택자2 요소를 선택 |
| 선택자1>선택자2 | 자식 결합: 선택자1 바로 아래의 자식 요소인 선택자2 요소를 선택 |
| 선택자1+선택자2 | 인접 형제 결합: 선택자1의 형제요소 중 바로 뒤에 인접한 선택자2를 선택 |
| 선택자1~선택자2 | 형제 결합: 선택자1 바로 뒤의 형제요소 중 모든 선택자2를 선택 |
| 선택자1, 선택자2 | 그룹 결합: 선택자1과 선택자2에 동일한 스타일을 적용 |
속성과 값
1. 색상
| 속성 | 설명 | 값 |
| color | html 요소의 텍스트 색상 | · <색상> · transparent · rgba(0,0,0,0) |
| background-color | html 요소의 배경색 | <색상> |
| border-color | 테두리 색상 | <색상> |
| opacity | 불투명도 | 0.0 (완전투명) ~ 1.0 (완전불투명) |
2. 글꼴
| 속성 | 설명 | 값 |
| font-family | 폰트 종류 | · <폰트패밀리> serif, sans-serif, ... · <일반폰트명> arial, 궁서, ... |
| font-size | 글자 크기 | · <절대크기> xx-small, smaller, ... · <상대크기> cm, em, %, ... |
| font-style | 글자 스타일 | · normal · italic · oblique |
| font-variant | 작은 크기의 대문자로 변환 | · normal · small-caps |
| font-weight | 글자 굵기 | · normal · bold, bolder, lighter · 100, 200, ... |
| font | 글꼴 관련 속성의 일괄 지정 | font: [ -weight값 | -style값 | -variant값 ] -size값 [ /line-height값 ] -family값 ; |
| @font-face | 사용자정의 글꼴 |
font-face는 사용자정의 글꼴로 글꼴 사용 전에 등록 한다.
@font-face { font-family: 'myFont'; src: url(myFont.otf); }
p { font-family: myFont }
3. 텍스트
| 속성 | 설명 | 값 |
| letter-spacing | 문자 사이 간격 | normal, <길이> |
| word-spacing | 단어 사이 간격 | normal, <길이> |
| line-height | 문장의 줄 간격 | normal, <길이>, <숫자>, % |
| text-align | 텍스트의 수평 정렬 방식 | left, right, center, justify |
| text-align-last | 텍스트 마지막 줄의 정렬 방식 (text-align: justify 로 지정된 경우만 동작) |
auto, right, center, justify, start, end |
| text-indent | 텍스트 블록에서 첫번째 줄의 들여쓰기 | <길이>, % |
| text-transform | 텍스트의 영어 알파벳 표기 방법 | none, capitalize, uppercase, lowercase |
| text-decoration-line | 텍스트 장식과 관련된 선의 종류 | none, underline, overline, line-through |
| text-decoration-color | 선의 색상 | <색상> |
| text-decoration-style | 선의 스타일 | solid, double, dotted, dashed, wavy |
| text-decoration-thickness | 선의 두께 | auto, <길이>, % |
| text-decoration | text-decoration-* 일괄 지정 (line 값은 필수 지정) |
|
| text-shadow | 텍스트에 그림자 효과 지정 | none, <숫자> |
| text-overflow | 요소 박스 영역을 벗어난 텍스트 표시 방식 | clip(표시하지 않음), ellipsis(...표시) |
| word-wrap | 단어가 길어 폭을 넘을 때 분리해서 줄바꿈을 수행할지 여부 | normal(미수행), break-word |
| vertical-align | 요소의 수직 정렬 방식 | <길이>, %, baseline, sub, super, top, middle, bottom, text-top, text-bottom |
4. 리스트
| 속성 | 설명 | 값 |
| list-style-type | 항목 마커의 종류 지정 | · ul 요소: none, disc, circle, square · ol 요소: deciaml, lower-alpha, upper-alpha, lower-roman, upper-roman |
| list-style-position | 항목 마커의 위치 지정 | inside, outside |
| list-style-image | 이미지를 항목 마커로 지정 | none, url(이미지파일) |
| list-style | 리스트 관련 속성의 일괄 지정 |
5. 테이블
| 속성 | 설명 | 값 |
| border table | td, th 요소에 대한 테두리 지정 | |
| table-layout | 셀 안의 내용 크기에 따른 셀의 크기 변화 여부 지정 | auto, fixed |
| border-collapse | 테이블 테우디와 셀 테두리를 하나로 합칠지 여부 지정 | separate, collapse |
| border-spacing | 인접한 셀 테두리 사이의 간격 지정 | <수평거리>, <수직거리> |
| caption-side | 테이블 캡션 위치 지정 | top, bottom |
| empty-cells | 빈 셀 테두리와 배경의 표시 여부 지정 | show, hide |
6. 박스 모델
모든 HTML 요소를 박스로 취급하여 박스의 위치과 크기, 색상을 지정한다. 박스는 contetn(내용), padding, border, margin 으로 구성한다.
| 속성 | 설명 | 값 |
| margin | 박스의 테두리 밖 여백(외부 여백)을 지정한다. margin-top, margin-left, margin-right, margin-bottom 으로 개별 방향의 마진도 지정할 수 있다. | <길이>, %, auto |
| padding | 요소의 내용과 테두리 사이의 여백을 지정한다. 마찬가지로 padding-top, padding-left, padding-right, padding-bottom으로 개별 방향의 패딩을 지정할 수 있다. | <길이>, %, |
| width, height | 요소의 콘텐츠가 표시되는 영역의 폭과 높이를 지정한다. min-width, max-height 등을 이용하면 최대/최소 폭/높이를 지정할 수 있다. | <길이>, %, auto |
| position | 요소의 위치를 지정한다 | · static: 현재 위치가 요소의 위치가 됨 · absolute: 브라우저 왼쪽 상단을 기준으로 지정한 위치만큼 이동 · relative: 현 위치를 0,0 으로 정하고, 이를 기준으로 지정한 위치만큼 이동 · fixed: 지정한 위치에 고정적으로 배치 |
| top, bottom, left, right | 요소를 포함하는 박스의 각 변으로 요소가 떨어져있는 거리를 지정한다. | auto, <길이>, % |
| z-index | 요소 간의 겹치는 순서를 지정한다. (position이 absolute, relative, fixed 인 경우만 적용) |
auto, 정수 |
| display | 요소를 어떻게 표시할지 정한다 | · none: 요소를 화면에 표시하지 않음 · inline: 인라인 요소로 취급 · block: 블록 요소로 취급 · inline-block: 박스는 인라인, 내부는 블록요소로 취급 · list-item: 블록 박스를 목록같이 표시 |
| overflow | 콘텐츠가 요소 박스를 벗어나는 경우에 대한 처리 방법을 지정한다 | visible, hidden, clip, scroll, auto, overflow-x, overflow-y |
| visibility | 박스 화면에 표시 여부 | hidden, collapse |
| float | 부모 요소 영역을 기준으로 요소를 왼쪽/오른쪽에 배치 | none, left, right |
| clear | float 속성을 해제하고 바로 아래쪽에 배치 | none, left, right, both |
| box-sizing | width, height 속성을 사용할 때 패딩과 테두리를 포함할지 여부 지정 | · content box: 오직 콘테츠만 포함 · border box: 패딩과 테두리 모두 포함 |
| resize | 사용자가 요소 박스의 크기를 조절할 수 있도록 설정 (overflow가 hidden, scroll, auto 속성과 함께 사용) |
none, both, horizontal, verical |
7. 테두리
| 속성 | 설명 | 값 |
| border-width | 테두리의 굵기를 지정한다 | medium, thin, thick, <길이> |
| border-style | 테두리의 스타일을 지정한다 | none, hidden, dotted, dashed, solid, double, gorove, ridge, inset, outset |
| border-color | 테두리의 색상을 지정한다 | <색상>, transparent |
| border | border-* 속성을 한꺼번에 지정한다 (style은 필수) |
|
| border-raidus | 박스의 모서리를 둥글게 지정한다 | <길이, %> / <길이,%> |
| border-shadow | 박스 요소에 그림자 스타일을 지정한다 | <수평위치> <수직위치> [ <흐림정도> <퍼진거리> <색상> inset ] |
방향을 지정하고 싶은 경우 border-top-width 와 같은 형태로 지정하면 된다.
8. 배경
| 속성 | 설명 | 값 |
| background-color | 요소의 배경색을 지정한다 | transparent, 색상 |
| background-image | 요소의 배경으로 이미지를 지정한다 | none, url(파일) |
| background-repeat | 배경 이미지의 반복 여부를 지정한다 | repeat, repeat-x, repeat-y, no-repeat, space, round |
| background-attachment | 스크롤에 따른 배경 이미지의 움직임 여부를 지정한다 | scroll(함께 스크롤), fixed(콘텐츠만 스크롤) |
| background-position | 배경 이미지의 시작 위치를 정한다 | <숫자> <숫자> |
| background-origin | 배경 이미지가 시작되는 기준 위치를 정한다 | padding-box, border-box, content-box |
| background-size | 배경 이미지의 크기를 지정한다 | auto, <폭 높이>, cover, contain |
| background-clip | 배경 속성이 적용되는 영역을 정한다 | border-box, padding-box, content-box |
| background | 배경 관련 속성을 일괄 지정한다 | -color -image -position / -size -repeat -origin -clip -attachment |
9. 그라데이션
| 속성 | 설명 | 값 |
| linear-gradient() | 선형 그라데이션 | (진행방향, 색상1, 색상2, ...) |
| repeating-linear-gradient() | 선형 그라데이션을 반복한다 | (신행방향, 색상1, 색상2, %, ...) |
| raidal-gradient() | 방사형 그라데이션 | (모양 사이즈 at 위치, 색상1, 색상2, ...) |
| repeating-radial-gradient() | 방사형 그라데이션을 반복한다 | (모양 사이즈 at 위치, 색상1, 색상2, ...) |
| conic-gradient() | 원뿔형 그라데이션 | ( [ from 시작각도 ] [ at 중심위치, ] 색상1, 색상2, ...) |
| repeating-conic-gradient() | 원뿔형 그라데이션을 반복한다 | ( [ from 시작각도 ] [ at 중심위치, ] 색상1, 색상2, ...) |
10. 변형
| 속성 | 설명 | 값 |
| transform | 요소에 대한 변형을 적용한다 | none, <변형함수> · 변형함수: translate, scale, rotate, skew, matrix |
| transform-origin | 요소의 변형 기준점을 지정한다 | · X축값: left, center, right, <길이>, % · Y축값: top, center, bottom, <길이>, % · Z축값: <길이> (기본 0) |
| perspective | 해당 요소와 관측점의 거리를 조절하여 원근감을 지정한다 | none, <길이> (>0) |
| perspective-origin | 원근을 조절할 때 기준점을 지정한다 | 길이, %, left, center, right, top, bottom(기본 50% 50%) |
| backface-visibility | 요소 뒷면의 표시 여부를 지정한다 | visible, hidden |
11. 전환
전환이란 속성의 상태가 다른 상태로 변화하는 것을 말한다.
| 속성 | 설명 | 값 |
| transition-property | 전환 효과를 부여할 속성의 이름을 지정한다 | <속성> |
| transition-duration | 전환이 진행되는 시간을 지정한다 | <시간> |
| transition-timing-function | 전환이 진행되는 속도의 형식을 지정한다 | · ease: 느리게 시작하여 빠르게 진행하다가 다시 느리게 · linear: 처음부터 끝까지 일정한 속도로 · ease-in: 느리게 시작하여 점점 빠르게 · ease-out: 빠르게 시작하여 점점 느리게 · ease-in-out: 중간까지는 ease-in, 중간 이후는 ease-out · steps: 전환의 진행을 나누어 보여줄 간격과 각 간격에서 전환 효과가 발생하는 지점 지정 · cubic-bezier: 사용자가 형식을 직접 지정 |
| transition-delay | 전환이 시작되기 전 지연 시간을 지정한다 | 초(s), 밀리초(ms) |
| transition | 전환 관련 속의 일괄 지정한다 |
12. 애니메이션
애니메이션을 구성하는 키가 되는 프레임인 키프레임을 바탕으로 프레임을 연결하여 동작을 구성한다.
| 속성 | 설명 | 값 |
| animation-name | 키 프레임의 이름 | none, <키프레임명> |
| animation-duration | 애니메이션의 한 사이클이 진행되는 시간 | 0, <초> |
| animation-timing-function | 애니메이션 진행 속도의 형식 | ease, linear, ease-in, ease-out, ease-in-out, … |
| animation-iteration-count | 애니메이션의 반복 횟수 | <횟수>, infinite |
| animation-direction | 애니메이션의 진행 방향 | normal, reverse, alternate, alternate-reverse |
| animation-play-state | 애니메이션의 진행 또는 일시정지 상태 | running, paused |
| animation-delay | 애니메이션의 시작 전의 대기시간 | 0, <초> |
| animation-fill-mode | 실행 이전/이후의 스타일의 유지 여부 | · none : 실행 전후의 스타일 미적용 · forwards : 마지막 키 프레임에서 지정된 스타일 유지 · backwards : 첫 번째 키 프레임에서 지정된 스타일 유지 · both : forwards + backwards |
| animation | animation-* 속성의 일괄 지정 | name –duration -timing-function –delay -iteration-count –direction -fill-mode -play-state ; |
13. 다단
| 속성 | 설명 | 값 |
| column-count | 단의 개수 | auto, <개수> |
| column-width | 단의 폭 | auto, <길이> |
| columns | 단의 개수와 폭을 일괄 지정 | |
| column-gap | 단 사이의 간격 | normal, <길이> |
| column-rule | 단 사이의 구분선 관련 속성을 일괄 지정 | |
| column-rule-width | 구분선의 굵기 | thin, medium, thick, <길이> |
| column-rule-style | 구분선의 스타일 | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| column-rule-color | 구분선의 색상 | <색상>, transparent |
| column-span | 해당 요소에 설정된 다단을 무시하고 하나의 단으로 표시할 지 여부 | none, all |
| column-fill | 각 단을 채우는 콘텐츠의 양을 조절하여 각 단의 높이의 차이를 최소화할지를 지정 | balance, auto |
JavaScript
HTML5의 공식적인 스크립트 언어로, 다른 프로그램에 의해 번역되거나 수행되는 프로그램이다. 클라이언트에 의해 해석되는 인터프리터 언어이다.
자바스크립트는 문서 내부에서 <script> 사이에 소스를 넣거나, 외부 파일로 만들어 <script src=“파일명”> 형태로 삽입할 수 있다. 혹은 인라인 스크립트 방식으로서, HTML 요소 내부에서 이벤트의 속성값으로 코드를 직접 삽입할수도 있다. 스크립트는 헤더, 바디에 모두 넣을 수 있다.
자바스크립트는 여느 프로그래밍 언어와 유사하게 여러 요소들을 갖고 있다.
1) 변수: 데이터를 저장하기 위한 공간이다. 명시적인 선언 없이 사용이 가능하지만, 선언할 경우 let 변수명 형태로 선언한다. 마찬가지로 함수 밖에서 선언되면 전역변수로 함수 안에서도 사용 가능하며, 함수 안에서만 선언될 경우 블록 내에서만 사용 가능하다.
2) 식별자: 변수나 함수의 이름으로 사용하기 위해 프로그래머가 만드는 단어이다.
3) 자료형: 문자열, 논리형, 숫자형, null 형 등을 갖는다
4) 상수: 값이 고정되어있는 수로, 예약어 const 를 사용하여 선언할 수 있다.
5) 연산자: (), ++, **, / 등의 연산자가 있다
6) 조건문: if, if~else, switch 문 등 다른 프로그래밍 언어와 용법은 동일하다
7) 반복문: for, while, do~while 문 등 다른 프로그래밍 언어와 용법을 동일하다
8) 함수: 프로그램 내에서 연관되어있는 식이나 문장을 그룹으로 묶고, 필요할 때 마다 호출하여 사용한다. function 함수명 형태로 정의할 수 있다. 함수를 호출하려면 [변수] = 함수명(매개변수, 매개변수, …) 형태로 호출한다. 함수명을 지정하지 않는 무명함수도 있는데, 함수를 변수에 저장했다가 호출하여 사용하는 것이다. 콜백함수는 매개변수로 전달되는 함수를 말한다.
9) 대화상자: 경고를 보내주는 알림창 alert(), 사용자가 확인 및 취소 버튼을 선택할 수 있도록 하는 확인창confirm(), 사용자의 키보드로부터 입력을 받는 입력창 prompt() 등을 제공한다.
자바스크립트는 ‘객체’라는 자료형을 제공한다. 객체는 객체의 특성과 상태를 나타내는 속성과, 객체와 관련된 작업을 처리하는 함수(메서드)로 구성되어 있다. 내장객체(코어객체)가 제공되며, 사용자가 정의하여 사용할 수도 있다.
객체를 생성하기 위해서는 객체변수 = new 객체명(매개변수, …) 형태로 입력을 하면 되고, 객체를 사용하려면 객체변수.속성 혹은 객체변수.메서드(매개변수, …) 형태로 입력하면 된다.
기본적으로 제공되는 내장객체는 아래와 같다.
- String: 문자의 모양을 지정하거나 문자열을 다루기 위한 객체이다. 속성에는 length, 메서드에는 문자열 관련 메서드인 str, 위치 관련 메서드인 link, anchor 등이 있다.
- Array: 배열을 사용하기 위한 객체로 속성에는 length 가 있다.
- Date: 시스템의 날짜와 시간을 관리하는 객체이다. 정보를 얻기 위해서는 getFullYear, getMonth, getDate 등의 메서드를 활용할 수 있으며, 설정을 하기 위해서는 setFullYear, setMonth 등의 메서드를 활용할 수 있다. 표시형식을 지정하기 위해 toGMTString() 등을 활용할 수 있다.
- Math: 수학 계산과 관련된 객체로 new 연산자 없이 바로 사용할 수 있다. E, LN10, LN2, PI 등의 속성이 있고 abs(n), log(n), max(n,m) 등의 메서드를 제공한다.
앞서 언급한 것처럼 사용자 정의 객체도 사용할 수 있다. function 프로토타입명(매개변수, 매개변수, …) 형태로 함수를 선언하며 this.속성=매개변수, this.메서드=function() 형태로 정의한다.
자바스크립트는 어떤 동작을 하거나 브라우저 상태가 변할 때 발생하는 특정 사건인 이벤트를 지원한다. 이러한 이벤트에 대해 처리를 하기 위해서 이벤트 리스너가 필요하며, 이벤트가 발생할 때마다 이벤트 리스너가 자동으로 호출되는 형태로 수행된다.
이벤트는 load, unload, focus, blur, change, select, submit, reset, keydown, keyup, keypress, click, mousedonw, mouseup, mouseout 등이 있다. on이벤트명=“자바스크립트 코드” 혹은 addEventListener(“이벤트명”, 실행함수명) 으로 정의할 수 있다.
객체모델
1. 문서 객체 모델(DOM, Document Object Model)
HTML 문서의 각 요소를 자바스크립트에서 사용할 수 있도록 객체를 만든 것을 문서 객체라고 한다. 이러한 문서 객체를 정의한 표준 모델을 DOM 이라고 한다. 문서가 적재되면 브라우저는 정적으로 DOM을 생성하고, 계층 구조를 갖는 DOM 트리로 표현한다.
DOM 객체에 접근하는 방법은 아래와 같다.
1) id 속성 이용: getElementById(“아이디명”)
2) 요소명 이용: getElementByTagName(“요소명”)
3) 클래스명 이용: getElementByClassName(“클래스명”)
이러한 요소의 내용에 접근하려면,
1) innerHTML 속성을 이용한다.
DOM 변수 = document.getElementByID(“아이디명”);
변수 = DOM변수.innerHTML
DOM변수.innerHTML=“값”
2) textContetn 속성을 이용한다
변수 = DOM변수.textContent // 텍스트 내용만 가져옴
DOM변수.textContent=“값” // 요소도 일반 텍스트로 취급
또한 요소의 속성을 수정한다면, HTML 요소의 속성을 그대로 사용해서 새로운 값을 할당한다.
document.getElementById(“아이디명”).속성=값
document.getElementById(“아이디명”).style.CSS속성명=값
기존 HTML 문서에 새로운 요소를 삽입하려면,
1) 텍스트 내용을 갖는 새 요소를 삽입하려면 삽입하려는 요소의 DOM 객체를 생성하고, 텍스트 내용을 입력한 후 새 요소가 삽입될 부모 요소를 찾아 연결해야 한다.
let 새 요소 변수 = document.createElement(“삽입요소명“);
let 텍스트변수 = document.createTextNode(“텍스트내용);
새요소변수.appendChild(텍스트변수);
let 부모 요소 변수 = document.getElementById(”부모요소 아이디명“);
부모요소변수.appenChild(새요소변수);2) 이미 속성이 있는 새 요소를 삽입한다면,
let 새요소변수 = document.createElement(“삽입요소명”);
let 속성변수 = document.createAttribute(“속성명”);
속성변수.value = ”속성값“;
새요소변수.setAttributeNode(속성변수);
let 부모요소변수 = document.getElementByID(”부모요소 아이디명”);
부모요소변수.appendChild(새요소변수);만약 기존 HTML 요소에서 삭제를 하고 싶다면, DOM 구조에서 삭제하려는 부모 노드를 찾은 이후 removeChild() 메서드를 적용하면 된다.
부모요소.removeChild(삭제하려는요소);
2. 브라우저 객체 모델
자바스크립트는 html 도 객체로 취급하고 브라우저도 객체로 취급한다. 이러한 브라우저를 객체로 표현한 것을 BOM(Browser Object Model)이라고 한다. 최상위 객체 window 에서 자식개체 document, history, location, navigator, screen 등이 있다.
특정 객체의 메서드, 속성을 사용하려면 window.(…).객체.속성 혹은 window.(…).객체.메서드() 의 형식으로 입력하면 된다.
최상위객체인 window는 각 윈도우마다 하나씩 생성이 된다. close(), open(), resizeBy(), moveBy(), setTimeout(), setInterval() 메서드 등을 제공한다.
참고자료
방송통신대학교 컴퓨터과학과 강의자료
'PM으로 성장하기 > 개발 공부' 카테고리의 다른 글
| SASS, SCSS (0) | 2023.06.08 |
|---|---|
| [컴과] 컴퓨터보안: 목적, 암호, 인증, 전자서명, 해시함수, 보안시스템, 분야별 보안 (0) | 2023.06.07 |
| APM 툴, Pinpoint (0) | 2023.05.23 |
| 시퀀스 다이어그램 (0) | 2023.05.12 |
| 렌더링(Rendering), 프리 렌더링(Pre-Rendering) (0) | 2023.05.10 |
댓글