HTML CSS
<!DOCTYPE html> : 문서유형 선언 부분
<html> : 웹 문서의 시작과 끝을 나타냄 <html lang="ko"> 언어표시
<head> : 웹 브라우저가 웹 문서를 해석하기 위해 알아 두어야 할 정보들! 문서 정보
<title> : 문서 제목
<meta> : 문자 인코딩, 문자 키워드, 요약 정보 <meta charset = "utf-8">문자 인코딩 방법 한글로 표시 head 안
<body> : 문서의 몸통 , 실제 표시
이중태그 , 단일태그
요소 : 시작태그와 종료태그로 이루어진 문서의 구성요소
속성 : 요소에 대한 추가적인 정보 제공 속성이름="값"
<!-- HTML코드를 설명하는 글 -->
<hn> : 웹 페이지의 헤드라인 (검색효율 올라간다) h1 ~ h6
title 속성 페이지 본문에 마우스가 올라갈때 설명문이 출력 (모든 태그 title 속성)
<p> : 단락 전체글을 내용에 따라 나눌때, 하나 하나 짧은 이야기 토막 </p> 다음 빈줄 추가
<br> : 강제 줄바꿈 (단일)
<pre> : 프로그래머가 입력한 그대로 화면에 표시하는 태그 (모두 유지 프로그램 소스 표시)
<hr> : 내용의 전환에 수평선 그음 (단일)
특수문자
줄바꿈 없는 공백
< <
> >
" "
& &
<b> : 진하게
<strong> : 중요한
<i> : 이탤릭
<em> : 이탤릭으로 강조
<mark> : 하이라이팅
<del> : 삭제
<ins> : 추가
<sup> : 윗첨자
<sub> : 아래첨자
<q> : 짧은 인용문 들여쓰기 안하고 "따옴표" 표시
<blockquote> : 긴 인용문. 들여쓰기 됨
___________________________________________________
특별한 태그 없이도 body안에서 표시할 수 있다.
※단락을 생성하지 않으면 하나의 긴줄로 표시
엔터키, 공백 등이 그래로 브라우저에 표현 되지 않는다.
___________________________________________________
<ol> : 번호 있는 리스트
<ul> : 번호 없는 리스트
-> 각 항목 : li
<dl> : 정의 리스트 (용어 설명)
-> <dt> : 용어 부분
-> <dd> : 용어에 대한 설명
type 속성 :인덱스의 종류 조절 가능
start 속성 : 인덱스 중간번호부터 시작
reverse속성 : 인덱스를 연숙으로 표시
1 a A i I
하이퍼링크 : 다른문서로 연결, 텍스트나 이미지에 다른 웹페이지의 주소를 달아서 만듬
<a> : 다른페이지로 이동 , 현재 페에지 내에서 점프
href 속성 : 이동할 HTML페이지의 URL주소
target 속성 :
-> target = "_blank" : 새 창에서 열기
-> target = "_self" : 현재창에서 열기
download 속성 : 파일을 다운로드 할 수 있는 링크 만듬 (href로 링크 지정)
절대경로 : C:\Users\82104\Desktop\직박구리\▽＃※●▒☎.mp4
상대경로 : ..\Desctop\직박구리\▽＃※●▒☎.mp4
※ ../ 상위 폴더
※ ./ 현재폴더
id 속성 : 한 페이지 내에서 element를 식별하기 위해 사용. 이름 중복 X(a태그의 속성 사용) -> 한페이지 내에서 다른페이지로 이동(앵커 지정)
<img> 태그 (단일)
src : 링크 지정(필수)
-> ㉠ 내 컴퓨터 : 절대경로 / 상대경로로 지정
-> ㉡ 웹 : 이미지 주소 복사
width , height : 이미지 너비 , 높이 지정
alt : 사진이 뜨지 않을때 대체 텍스트
<figure> : 설명 글을 붙일 대상(이미지,오디오,비디오,텍스트,표 ) 지정
<figcaption> : 설명 글 붙이기
<table> : 웹 문서에서 자료를 구조화하여 정리할 때 자주 사용
row , column, cell
-> <table> : 표 전체를 담는 컨테이너
-> <tr> : 행 여러 <td>,<th> 포함
-> <caption> : 표 제목
-> <thead> : 헤딩 셀 그룹
-> <td> : 데이터 셀
-> <tfoot> : 바닥 셀 그룹
-> <tbody> : 데이터 셀 그룹
-> <th> : 열 제목 셀 (표에 제목 셀 만들기 : 굵게 & 셀의 중앙에 배치)
※ border 속성 : 테두리
rowspan 속성(feat td,th) 세로 합치기
colspan 속성(feat td,th) 가로 합치기
<caption> : 표에 제목 붙이기 (<table>태그 바로 다음에 사용)
__________________________________________________________________
HTML 5 이후 : audio , video 태그로 표준화
<audio> (ex} <audio src="a.mp3" autoplay controls loop>현재 브라우저는 이 오디오를 지원하지 않습니다.</audio>)
-> src 속성 : 재생활 오디오가 존재하는 URL
-> autoplay 속성 : 음악 자동재생
-> controls 속성 : 브라우저가 오디오 재생 제어기 표시
-> loop 속성 : 오디오를 반복하여 재생
-> muted 속성 : 오디오 소리 끔
mp3,wav,ogg
<source> : 하나의 오디오 소스에 대해 여러 형식의 미디어 파일 한꺼번에 지정(호환성을 높임)->위에서 부터
{ex?<audio>
<source>
.
.
.
<source>
</audio>}
<video> : <audio>태그와 동일
-> poster 속성: 재생 전 또는 재생 불가시 표시되는 이미지 지정
-> width, height 속성 : 비디오 너비 , 높이
mp4,webm,ogg
<iframe> html 페이지 내에 내장 윈도우를 만들고 , 다른 html 페이지를 출력
(인라인 프레임)
-> src 속성 : 프레임에 표시할 문서의 url 주소 지정
-> width : 너비
-> height : 높이
-> name : "인라인 프레임 윈도우의 이름"
※iframe 태그는 바디태크 내에서만 사용, 중첩가능
★<iframe>의 name 속성값 설정 후 , <a>의 target으로 지정
_blank : 새 창,_self : 자기자신,_parent : 부모,_top : 최상위,윈도우이름 : 해당
------------------------------------------------------------------------------------------------------------------------------------------
기존 html -> 웹 문서 구조 태그가 없다
<div> 태그나 <table>태그로 구조화되어 보이게 작성
-> html 페이지의 소스를 보면 문서 구조 파악 불가
※구조화 이유
-검색 엔진이 좋아하는 웹 페이지 작성의 필요성 대두
시멘틱 웹
-웹 문서를 구조화하여 의미있는 내용 탐색
-웹 페이지에서 사람 인식 -> 기계 인식
-이름만 보고 쉡게 역할 이해
시멘틱 태그 : 문서의 구조와 의미를 전달하는 태그
※ <header> , <section> , <article> , <footer> , <nav> 등등
<header> 태그 : 페이지나 섹션의 머리말에 해당
-페이지 제목 , 페이지를 소개하는 간단한 설명
<nav> 태그 : 네비게이션 링크,페이지 내 목차를 만드는 용도
※<header> <footer> <aside>등에 포함 시킬 수 있고 독립해 사용 할 수도 있음.
<section> 태그 : 주제별 콘텐츠 영역 구분하기(여러개 가능)
<article> 태그 : 본문과 연관 있지만 , 독립적인 콘텐츠를 담는 영역 (블로그 포스트, 댓글, 보조기사)
<aside> 태그 : 문서의 본문 내용에서 약간 벗어난 내용(페이지의 왼쪽, 오른쪽에 주로 배치)
<footer> 태그 : 일반적으로 웹문서의 꼬리말 영역{ex) 사이트 제작자 정보 , 저작권 정보} (다른태그 안에 넣을 수 있음)
---------------------------------------------------------------------------
※HTML 구조화 권장 사항※
- 웹 페이지 전체를 구조화 시맨틱 태그 분할
- 웹 페이지 전체 제목과 소개는 <header>로 작성
- 웹 페이지 링크나 메뉴들은 <nav>
- 본문은 <section>으로 묶음
- 분문 내에 각 절이나 영역은 <article>로 작성
- 각 시멘틱 태그에는 h1~h6을 사용하여 제목 붙임
----------------------------------------------------------------------------------
<figure>
<figcaption>
<details>
<summary>
<mark>
<time>
<meter>
<progress>
<div> 태그 : 블록으로 묶는 컨테이너로 이용
-블록 전체에 동일한 스타일 적용 (블록요소)
<span>태그 : 텍스트 일부분의 스타일 속성 적용 (인라인 레벨 요소)
★인라인 레벨 태그 : 화면의 일부를 차지 , 블록 요소 또는 다른 인라인 요소 안에서만 쓸 수 있음
블록 레벨 태그 : 화면의 가로폭 차지 ★
___________________________________________________________________
웹 폼 : 사용자가 입력한 내용을 서버로 보낼때 사용(쌍방향)
- 웹 페이지 사용자 입력 (ex} 로그인 , 등록 , 검색 , 예약, 쇼핑)
폼 요소 : 폼을 만드는 다양한 태그 ( <input> , <textarea> , <select>)
웹 폼의 작동 방식
㉠ 입력요소가 포함된 웹 페이지 로드
㉡ 사용자가 데이터 입력
㉢ 사용자가 submit 버튼을 눌러 입력양식을 웹 서버로 제출
㉣ 웹 서버는 입력 양식을 받아 서버 스크립트를 통해 처리하고, 응답 페이지를 생성하여 사용자에게 보냄
<form> 태그 : 웹 폼을 생성하는 태그, 입력요소를 담는 컨테이넌 역할, 화면에 나타나진 않음
action 속성 : 폼데이터를 처리할 웹 서버 응용프로그램 이름
method 속성 : 데이터를 보내는 방법 {post,get}
※get : url뒤에 파라미터 (글자수 제한,비밀보장 X)
※post : 뒤에 붙이지 않고 http request 헤더 전송 (길이제한 X ,보안 0,뒤로가기 ->? 데이터 재전송)
name 속성 : 폼의 이름을 지정
<input type="text">사용자가 입력할 수 있는 한줄(size 속성으로 크기 변경)
<input type="password"> 패스워드 입력필드(입력한 글자 안보임)
<textarea> : 여러줄 텍스트 입력필드 (이중)
-cols : 열 개수
-rows : 행 개수
<datalist> : 목록리스트를 작성하는 태그 (<option> 태그로 항목 하나 표현)
-<input type="text">에 입력 가능한 데이터 목록 제고
※datalist 요소의 id값과 input요소의 list값을 연결함
{ex)
<input type="text" list ="countries">
<datalist id="countries">
<option value="가나">
<option value="스위스">
<option value="브라질">
</datalist>
}
★<input type="button | reset | submit | image | file" value="버튼의 문자열">
<button type="button | reset | submit"> 버튼의 문자열 </button>★
onclick 속성 : 버튼이 클릭되면 실행되는 자바스크립트를 지정
{ex) alert(),window.open()}
type 속성 :
㉠ 기본버튼 button
㉡ 제출버튼 submit(데이터를 서버로 전송,action으로 속성으로 제출)
㉢ reset 초기화
㉣ image 버튼
-input에서는 src에 url이나 경로 작성
-button은 안에 img태그 넣어줌
㉤ 파일 업로드 file
※input (파일 선택 업로드)
-accept 속성 : 허용하는 파일의 형식(ex} accept="image/*")
※ form (안쓰면 경로만 전송됨)
enctype="multipart/form-data"
㉥ 라디오 버튼 : <input type="radio">
-name 태그 : 요소이름(name으로 그룹 구분) , value 태그 : "요소값" (반드시)
㉦ 검색 상자 : type = "search"
-포털 사이트 내에서 검색(페이지 내에서) X기호 붙음
㉧ 이메일 주소 : <input type="email">
-유효한 이메일 주소인지 검사 가능(제출 버튼 눌렀을때, 잘못된 이메일 -> 경고메시지)
㉨ 숫자 입력_스핀버튼 : <input type="number">
max,min,step속성
-value 속성: 화면 표시 초기값
㉩ 숫자입력_슬라이드 바로 숫자 지정 : <input type="range">
㉪ 날짜 입력 :
type="date" : 날짜 입력
type = "datetime-local" : 날짜와 시간
type = "month" : 연도 , 월 입력
type = "week" : 연도 , 주 입력
type = "time" : 시간 입력
㉬색상선택 : <input type="color">
㉭체크박스 : <input type="checkbox">
㉮콤보박스 : <select>
-<option>태그로 항목 하나 씩 표현
->value,selected 속성
※<input>추가 속성
autofocus : 페이지가 로드되면 자동으로 입력 포커스를 가짐
placeholder : 입력 필드안에 힌트를 희미하게 보여줌
readonly : 읽기 전용 필드
required : 반드시 채워져 있어야 할 필수 필드지정
<label> 태그 : 캡션과 폼요소를 한단위로 묶음(마우스 사용자에게 편리하다)
#연결 방법
※붙어있을때
-label 요소안에 input요소 넣기
※떨어져 있을때
-label의 for값 = input의 id 값
#여러구역을 나누어 표시할때
<fieldset> : 그룹 경계에 선을 그림 (그룹 박스를 만듬)
<legend> : 묶은 그룹에 제목을 붙여줌
CSS : 문서의 스타일을 지정
- 우선순위가 있는 스타일 시트(css로 작성된 코드)이다.
css 현재 버전 : css 3
장점: 일관성유지,작업시간 단축
문법 : 선택자 { 속성 : 값; 속성: 값;}
※대소문자 구분 없다
/* 주석입니다.*/
CSS 3가지 위치
1. 내부 스타일 시트 (여러 번 작성 가능)
★<head> 태그 내에 <style>태그에 스타일★
-내부 스타일 시트는 HTML안에 스타일 정리
-웹페이지 전체에 해당
-한 문서에만 해당하는 스타일 지정
2. 인라인 스타일 시트
★HTML요소 안에 style속성사용★
-각각의 HTML요소마다 스타일을 지정
-> 해당 태그에만 스타일 적용
※스타일 시트의 장점을 잃게 된다.
3. 외부 스타일 시트
스타일 시트를 외부에 파일로 저장
->웹 페이지에서 스타일 파일을 불러 사용
★head 요소안에 <link>태그 (단일 태그) 사용★
※많은 페이지에 동일한 스타일을 적용
#스타일 상속
-css3스타일은 부모 태그(자신을 둘러싸는 태그)로 부터 상속
#다중 스타일 시트
????하나의 요소에 많은 스타일이 있으면 어떻게 될까?
-> 스타일 합치기(cascading)
→태그에 적용되는 모든 스타일이 합쳐지고, 동일한 스타일은 순위가 높은 스타일이 우선 적용되는 규칙
※우선순위
1.인라인 스타일
2. 내부 스타일
3. 외부 스타일
4. 브라우저 디폴트
-스타일 적용 범위가 좁을수록 우선순위가 높아진다.
※스타일 충돌 ( 적용 범위가 같다면 , 소스코드가 아래에 있을 수록 우선순위가 높음)
- !important 모든 우선순위를 뛰어넘을 수 있음(걍 쓰지마셈 ㅇㅇ)
1. id 스타일
2. 클래스 스타일
3. 태그 스타일
#선택자 : 스타일을 지정할 HTML요소를 선택하는 부분
{ex) p,h1(선택자){color(속성) : blue(값); } }
선택자를 콤마로 구분하여 사용 할 수 있다.
㉠ 타입 선택자
: 태그 이름 {속성 : 값 ; 속성 : 값;}
: HTML 요소 이름을 사용
㉡ 아이디 선택자
: #id 값 {속성 : 값 ; 속성 : 값;} (하나의 요소(태그)만 사용가능)
: id로 지정된 특정한 요소
p#target -> p태그 중 id target인 요소 선택
㉢ 클래스 선택자(여러 요소(태그) 적용가능)
: .클래스 명{속성 : 값; }
: 클래스가 부여된 요소를 선택
: 여러개 요소를 하나의 클래스로 묶어서 스타일을 지정
class ="주호여친"
.주호여친 {
display : none;
}
※ name 속성은 적용이 되지 않는다!
㉣ 자신 ,자손 선택자
- 자식 선택자 { ex ) s1 > s2}(부모 자식관계)
-> s1요소의 직계 s2 선택
- 자손 선택자 { ex ) s1 s2}(조상 자손 관계)
-> s1에 포함된 s2요소 선택
㉤ 전체 선택자
: * {속성 : 값; }
-페이지 안의 모든 요소 선택
※주로 모든 요소에 공통적인 속성
㉥ 속성 선택자
[속성명 = "속성값"]{속성 : 값;속성:값; }
-특정한 속성을 가지는 요소 (대괄호[])선택
㉦ 가상클래스 선택자
클래스가 정의된 것 처럼 간주( : 사용)
: link -> 방문하지 않은 링크에 스타일
: hover -> 마우스 올라갔을때
: active -> 마우스로 누르고 있는 상황에서 스타일
: focus -> 폼 요소가 키보드나 마우스 클릭으로 포커스 받을 때 스타일 적용
: visited -> 방문한 링크에 스타일 적용
font-family : 폰트 종류
ex ) font-family : "맑은 고딕"(여러 개인 경우 ""로 표시) , 돋움 , 굴림 , Arial
--------------------------------------------->
※브라우저는 첫번째 폰트가 없으면 , 그 다음 폰트를 시도
font-size : 폰트 크기
※단위 px , 상수 , em(상대적 크기),pt %.....
font-style : 폰트 이탤릭체
font-weight : 글자 굵기
font : 한줄에 모든 폰트 속성 설정(축약)
순서 font-style , font-weight , font-size , font-family
# 폰트
-> 폰트는 페이지의 디자인에 절대적인 영향을 줌
※ 폰트 종류 , 색상 ,장식 등등
serif : 세리프있는 서체
sans-serif : serif 없음
monospace : 글자폭 동일
color : 텍스트 색상
-"red", #FF(빨)00(초)00(파), rgb(),rgb(255,0,0),rgb(100%,0%,0%)
background-color : 배경색상 지정
text-align : 텍스트의 수평 정렬 지정
-left,center,right,justify
text-decoration : 텍스트 장식 지정
-none, overline,line-through,underline
text-transform : 대소문자 변환 지정
-none,uppercase,lowercase,capitalize(첫문자 대문자)
text-shadow : 그림자 효과 지정 -> 강조효과, 입체적 효과(여러개 가능 ', '로 구분 )
-> 순서 : 가로거리 , 세로 방향 ,번짐정도 ,색상
column-count(개수), column-gap(사이 간격), column-rule(구분선 스타일) : 다중컬럼
line-height : 텍스트 줄의 높이 지정(1.5~2배 적당)
- px , normal , 숫자 , 백분율
border-style : 경계 선의 종류
-none, dotted , dashed , solid , double , groove , ridge , inset , outset
border-width : 경계선의 폭
- px , thin ,medium ...
border-color : 경계선의 색상
border : 경계선 스타일 축약
-> 순서 : .border-width border-style(필수) border-color
border-radius : 둥근 경계선(둥근코너의 반지름)
좌측 위쪽 , 우측 위쪽 , 우측 아래쪽 , 좌측 아래쪽
box-shadow : 박스 그림자
-> 순서 : 가로 ,세로 ,번짐정도 ,색상
list-style : 리스트에 대한 속성 한줄로 설정
-> 순서 : list-style-type , list-style-image , list-style-position
list-style-type : 리스트 마커의 타입 지정
-> none , disc , circle , square , upper-roman
list-style-image : 리스트 항목 마커를 이미지로 지정
-> url("이미지 경로")
list-style-position : 리스트 마커의 위치를 안쪽인지 바깥쪽
-> outside, inside
background-color : 배경색
background-image : 배경 이미지
->url("이미지 경로")
background-repeat : 배경이미지 부착 방법 지정
-> repeat , repeat-x ,repeat-y, no-repeat
background-attatchment : 배경이미지 부착방법
->scroll,fixed
background-size : 배경이미지 크기 설정
-> 가로 세로 (px , %)
background-position : 배경이미지의 시작 위치
->수평 위치 ,수직위치
background : 한줄에서 모든 배경 속성 정의
->순서 : background-color , background-image, background-repeat , background-position
#배경 그라데이션
linear-gradient (각도 or to방향,color-stop,.....)
->color-stop : 색상이 바뀌는 지점들의 색상과 위치 지정
radial-gradient((최종 모양)크기 또는 위치 , color-stop)
-> 최종모양 : circle , elipse(타원)
->크기 : closest-side , fartheset-side , farthest-corner
box 모델 : html 요소 들을 박스 형태로 간주하고 그리는 것
-> 블록레벨 요소들은 모두 박스
-> 웹 문서는 여러 박스 모델들이 모여 이룸
박스 모델의 속성
-> 컨텐츠 ,패딩, 테두리 ,마진
width , height : 블록레벨 요소의 너비 ,높이 설정
width : 50% (가변 높이)
margin : 현재 요소 주변의 여백
padding : 콘텐츠 영역과 테두리 사이의 여백 , 테두리 안 쪽의 여백
margin : 현재 요소 주변의 여백 , 한 요소와 다른 요소 사이의 간격
-> top right bottom left , top right&left bottom , top&bottom right&left , top&right&bottom&left
margin-top : px | 백분율(박스모델을 포함하고 있는 부모 요소 기준) | auto
margin-right : px | 백분율 | auto
margin-bottom : px | 백분율 | auto
margin-left : px | 백분율 | auto
★실제 콘텐츠 요소의 너비 -> 콘텐츠 너비 + 좌우 패딩 + 좌우 보더★
box-sizing : border-box ; (padding border 까지 포함한 width값이 포함됨,height도 ㅆㄱㄴ!!!!!!)
블록이냐 인라인 이냐에 따라 나열 방법이 달라진다 .
block , inline (혼자 화면의 가로 폭 전체를 전부 차지 , 필요한 만큼의 너비만을 차지, 옆에 다른 요소가 차례대로 배치됨)
블록요소 종류는 표를 참고,인라인도 참고
블록요소 + 인라인요소
블록요소의 수평정렬 : 왼쪽 , 오른쪽 마진을 auto 로 지정 & width지정
display 속성 : 해당 요소가 화면에 어떻게 보일지 결정
※페이지 레이아웃 설정시 유용하게 사용됨
display: block -> 블록 레벨 요소로 지정(한 줄 독점으로 먹음 ,width,height 가능)
display : inline -> 해당요소를 인라인 레벨 요소로 지정(서로 다른 줄에 요소를 한줄로 표현 ,-목록에서 주로 사용-)
display : inline-block -> 해당요소를 한줄로 배침하고 블록레벨 요소지정 (인라인으로 배치하면서 블록레벨 속성 지정 , margin-top, margin-bottom)
display : none -> 화면 표시 안됨
#요소의 위치 관련 속성
-top,bottom,left,right 속성으로 지정 (기준위치에서의 offset)
-postion 속성 사용
★위치 설정 방법 4가지 ★
1.정적위치 : 정상적인 흐름에 따른 기본배치 (기본 설정)
-> 블록 요소 상하 , 인라인 요소들은 한줄(top,bottom ,등등 안먹힘)
2.상대위치 : 기본 위치가 기준점
->'기본위치'가 기준점
->left,top,bottom ,right 상대위치에 배치(다른 요소 영향 X)
3.절대위치 : 부모요소가 기준점
-> 부모요소 안에서의 절대위치 (static이 아닌 부모가 있다면 ,그 부모가 기준점)
-> 위 경우가 아니면 전체 html이 기준!(필요한 만큼만 자리 차지, 자신의 기본위치 X)
4.고정위치 : 윈도우의 원점이 기준점
-> 윈도우 창의 원점을 기준으로 상대적 위치(스크롤 해도 고정)
레이아웃 : 웹 페이지에서 HTML요소의 위치,크기 결정
float 속성 : left ,right , none (하나의 콘텐츠 주위로 다른 콘텐츠 물처럼 흘러감 )
-> 용도 : 이미지 텍스트 나란히 , 광고 , 레이아웃 잡기 (시멘틱)
-> 그 주변을 다른 요소가 감쌈 ,이미지 크기 변하면 재배치
-> 여러번 적용하면 이전요소에 이어서 다음 요소 배치
clear :속성 : float 속성 중단(다음에 나오는 요소에게도 영향을 주기 떄문)
-> right, left ,both
z-index 속성 : z축을 따라 수직으로 쌓는 순서 지정(relative , absolute)
-> 숫자 값이 클수록 위에 (기본 0)
overflow 속성 : 자식요소가 부모요소의 범위를 벗어났을떄 어떻게 할지
-> hidden : 부모 영역을 벗어나는 부분을 보이지 않게한다.
-> scroll : 항상 가로,세로 스크롤바가 나타남
-> auto : 부모 영역을 벗어나면 스크롤바가 자동적으로 나타남
opacity 속성 : 투명도 조절
-> 0.0(투명) ~ 1.0(불투명)
transition : 하나의 형태로 다른형태로 전환되는 효과(다중 전환 할 수 있음)
-> transtion: css 속성 효과 지속시간;
알고리즘, 컴퓨터(OS, 네트워크), AI