UI/UX_006

IT/_HTML_CSS_JS

UI/UX_006

KhanSelf 2017. 7. 6. 16:28

간편정리

1. background 태그

1) background-image 속성

- 화면 배경이미지로 그림 넣기

- background-image : url('이미지경로');

- background-image : url('앞'), url('뒤');

===> 중첩해서 이미지 넣기

2)background-size 속성

- 배경이미지 크기

- auto

- contain

- cover

- inherit

- initial

3) background-repeat 속성

- 배경이미지 패턴(반복) 지정

- repeat ==> 기본 반복

- no-repeat ==> 패턴 없음

- repeat-x ==> 가로 패턴

- repeat-y ==> 세로 패턴

4) background-attachment 속성

- 화면에 고정 하는 방식

- scroll : 내용과 같이 스크롤 기본속성

- fixed : 내용은 스크롤 되어도 이미지는 고정

- initial

- local

- inherit

5) background-position 속성

- 위치를 지정

- 키워드 or X축크기 or X축크기 Y축크기

- left top : 하나의 값 생략시 기본은 center

- left center

- left bottom

- right top

- right center

- right bottom

- center top

- center center

- center bottom

2. font 태그

1) font-size : 글자의 크기, %, em, px

2) font-family : 글자의 종류

사용자의 컴퓨터에 폰트가 없을 경우를 대비해 여러 폰트 지정

공백을 포함한 폰트는 ''

font-family: '없는 폰트', Arial;

3) font-style : 글자의 기울기

- normal:기본, 기울임 없음

- italic: 이탈릭체 기울임

- oblique: 이탈릭체와 비슷하나 기울임이 덜함

4) font-weight : 글자의 두께

- normal : 기본

- bold : 굵음

숫자값

5) text-align : 글자정렬

- left

- center

- right

3. text 태그

1)text-decoration : 글자선

- none : 없음

- overline : 윗선

- line-through : 취소선

- underline : 밑줄

2)text-shadow : 글자에 그림자를 부여

- text-shadow: 오른쪽 아래 선명도 색상

- 선명도의 값이 클수록 흐려짐

- "-" 일때 반대방향

4. Box 태그

1) box-shadow : 박스에 그림자를 부여

- box-shadow:오른쪽 아래 선명도 색상

선명도의 값이 클수록 흐려짐

예문

Ex_01 background-image 속성_이미지 넣기

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

body {

background-repeat: no-repeat;

}

background-image : url('이미지경로/이미지명.확장자');

</style>

</head>

<body>배경이미지영역

</body>

</html>

Ex_02 background-image 속성_중첩해서 이미지넣기

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

body {

background-repeat: no-repeat;

}

background-image : url('이미지경로/이미지명.확장자'), url('이미지경로/이미지명.확장자');

</style>

</head>

<body>

배경이미지영역

</body>

</html>

Ex_03 background-size 속성

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>CSS3 Property Basic</title>

<style>

body {

background-size: 100%;

}

background-size :100%는 너비를 꽉 채우는 배경이미지입니다.

</style>

</head>

<body>

</body>

</html>

Ex_04 background-size 속성

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>CSS3 Property Basic</title>

<style>

body {

background-size: 100% 250px;

}

background-size :100%는 너비를 꽉 채우는 배경이미지입니다.

두번째 값은 높이를 의미합니다.

</style>

</head>

<body>

<h1>배경이미지의 너비와 높이</h1>

</body>

</html>

Ex_05 background-repeat 속성

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>CSS3 Property Basic</title>

<style>

body {

background-size:50%;

background-repeat: repeat-y;

}

1) repeat ==> 기본 반복

2) no-repeat ==> 패턴 없음

3) repeat-x ==> 가로 패턴

4) repeat-y ==> 세로 패턴

</style>

</head>

<body>

<h1>배경이미지 반복</h1>

</body>

</html>

Ex_06 background-attachment 속성

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

body {

color: #FFFFFF;

background-repeat: no-repeat;

background-attachment: fixed;

}

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

<h2>Pellentesque est velit, laoreet vel rhoncus sit amet.</h2>

<h2>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</h2>

<h2>Donec molestie massa id lorem hendrerit eu bibendum augue

vestibulum.</h2>

<h2>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</h2>

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

<h2>Pellentesque est velit, laoreet vel rhoncus sit amet.</h2>

<h2>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</h2>

<h2>Donec molestie massa id lorem hendrerit eu bibendum augue

vestibulum.</h2>

<h2>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</h2>

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

<h2>Pellentesque est velit, laoreet vel rhoncus sit amet.</h2>

<h2>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</h2>

<h2>Donec molestie massa id lorem hendrerit eu bibendum augue

vestibulum.</h2>

<h2>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</h2>

</body>

</html>

Ex_07

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

body {

color: #FFFFFF;

background-repeat: no-repeat;

background-attachment: fixed;

}

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

<h2>Pellentesque est velit, laoreet vel rhoncus sit amet.</h2>

<h2>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</h2>

<h2>Donec molestie massa id lorem hendrerit eu bibendum augue

vestibulum.</h2>

<h2>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</h2>

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

<h2>Pellentesque est velit, laoreet vel rhoncus sit amet.</h2>

<h2>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</h2>

<h2>Donec molestie massa id lorem hendrerit eu bibendum augue

vestibulum.</h2>

<h2>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</h2>

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

<h2>Pellentesque est velit, laoreet vel rhoncus sit amet.</h2>

<h2>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</h2>

<h2>Donec molestie massa id lorem hendrerit eu bibendum augue

vestibulum.</h2>

<h2>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</h2>

</body>

</html>

Ex_08

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-size: 200px, 300px;

background-attachment: fixed;

background-position: 200px 300px;

}

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>

<p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>

<p>Donec molestie massa id lorem hendrerit eu bibendum augue

vestibulum.</p>

<p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>

</body>

</html>

Ex_09 font-family

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

.font_arial {

font-family: 궁서체;

}

.font_roman {

font-family: 'Times New Roman';

}

</style>

</head>

<body>

<h1 class="font_arial">Arial 글자입니다.</h1>

<p class="font_roman">Times New Roman 글자입니다.</p>

</body>

</html>

Ex_10 font-family 컴퓨터에 없는 문자, 컴퓨터에 있는 문자

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

.font_arial { font-family: test, 궁서체; }

.font_roman { font-family: 'Times New Roman'; }

</style>

</head>

<body>

<h1 class="font_arial">Arial 글자입니다.</h1>

<p class="font_roman">Times New Roman 글자입니다.</p>

</body>

</html>

Ex_11

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

.font_italic {

font-size: 50px;

font-style: italic;

}

.font_oblique {

font-size: 50px;

font-style: oblique;

}

</style>

</head>

<body>

<p class="font_italic">italic 글자 기울기 입니다.</p>

<p class="font_oblique">oblique 글자 기울기 입니다.</p>

</body>

</html>

Ex_12

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

.font_italic {

font-size: 50px;

font-style: italic;

font-weight:700;

/* font-weight:bold; */

}

.font_oblique {

font-size: 50px;

font-style: oblique;

}

</style>

</head>

<body>

<p class="font_italic">italic 글자 기울기 입니다.</p>

<p class="font_oblique">oblique 글자 기울기 입니다.</p>

</body>

</html>

Ex_13

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

.font_click {

font-size: 20px;

font-style: italic;

font-weight: bold;

text-align: center;

}

.button {

width: 150px;

height: 70px;

background-color: #FF6A00;

border: 10px solid #FFFF00;

border-radius: 30px;

/*box-shadow: 5px 5px 5px #A9A9A9;*/

}

.button>a {

display: block;

line-height: 70px;

}

</style>

</head>

<body>

<a href="#" class="font_click">Click1</a>

</div>

</body>

</html>

Ex_14

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

h1 {

text-decoration: overline;

}

h2 {

text-decoration: line-through;

}

h3 {

text-decoration: underline;

}

a {

text-decoration: none;

}

img {

border: 0px;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>

</html>

Ex_15

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

h1 {

text-shadow: 3px 3px 5px gray;

}

</style>

</head>

<body>

</body>

</html>

Ex_16

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

h1 {

text-shadow: 3px 3px 5px gray;

}

-를 주면 반대방향으로도 가능합니다.

text-shadow: -3px -3px -5px gray;

</style>

</head>

<body>

</body>

</html>

Ex_17

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

h1 {

text-shadow: 5px 5px 10px red, 10px 10px 10px gray;

}

h2 {

color: #FFFFFF;

text-shadow: 5px 5px 4px #000000;

}

</style>

</head>

<body>

<h2>흰색 글자입니다.</h2>

</body>

</html>