Be a groovy man by positive thinking

UI/UX_005 본문

IT/_HTML_CSS_JS

UI/UX_005

KhanSelf 2017. 7. 5. 19:45

간편정리


1. display 속성

 - 화면에 영역을 표시하는 방식을 지정

 - none : 화면에 보이지 않음

 - block : 블럭형식 - 새로운 행에 추가됨

 - inline : 인라인형식 - 같은 행에 추가, 넓이와 높이 지정안됨

 - inline-block : 인라인형식(같은행에 계속 배치됨)이나 넓이와 높이 지정 가능



2. visibility 속성

 - 보이거나 보이지 않게 지정

 - visible : 보이게 만듦

 - hidden : 보이지 않게 만듦



3. opacity 속성

 - 대상의 투명도를 지정하는 속성이다

 - 0.0(투명) ~ 1.0(불투명)

 


4. margin 속성

 - 블럭형식의 바깥 쪽 여백

 - margin : 10px ==> 상하좌우 모두 10px

 - margin : 10px 5px ==> 상하 10, 좌우 5

 - margin : 10px 5px 8px 15px ==> 위 , 오른쪽, 아래, 왼쪽 순서

 - margin-top: 값;

   margin-right: 값;

   margin-bottom: 값;

   margin-left: 값;



5. padding 속성

 - 블럭형식의  안쪽 여백

 - padding : 10px  ==> 상하좌우 모두 10px

 - padding : 10px 5px  ==> 상하 10, 좌우 5

 - padding : 10px 5px 8px 15px ==> 위 , 오른쪽, 아래, 왼쪽 순서

 - padding-top: 값;

   padding-right: 값;

   padding-bottom: 값;

   padding-left: 값;



6. border 속성

 - 테두리

 - border-width 속성 : 테두리의 두께(넓이)

기본 medium

thick(두꺼운)

thin(얇은)

px

 - border-style 속성 : 테두리의 형태

 - border-color 속성 : 테두리 색상

border-width: 2px;

border-style: solid;

      border-color: black;

      border:2px solid black;

 - border-radius : 모서리가 둥근 테두리

border-radius: 왼쪽위 ,오른쪽위, 오른쪽아래, 왼쪽아래






예문


Ex_01 시작문자선택자(::first-letter, ::first-line)

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

p::first-letter {

font-size: 30px;

}


p::first-line {

color: red;

}

/* 시작문자선택자

::first-letter 첫번째 글자를 선택합니다.

::first-line 첫번째 줄을 선택합니다. */

</style>

</head>

<body>

<h1>컨텐츠 제목</h1>

<p>

첫번째 단락 첫째 줄입니다.<br />첫째 단락 2번째 줄입니다.

</p>

<p>두번째 단락 입니다.</p>

</html>







Ex_02 ::after, ::before

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

p::after {

content: " - 전후문자";

background-color: yellow;

color: red;

}


h1::before {

content: " 문자 전 - ";

background-color: yellow;

color: red;

}

/* ::after 태그뒤에 위치하는 공간을 선택합니다.

::before 태그 앞에 위치하는 공간을 선택합니다. */

</style>

</head>

<body>


<p>첫번째 단락입니다.</p>

<p>두번째 단락입니다.</p>

<h1>세번째 단락입니다.</h1>

</body>

</html>







Ex_03 ::selection

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

p::selection {

background-color: yellow;

color: red;

}

/* 

::selection 사용자가 드래그한 글자를 선택합니다. 

*/

</style>

</head>

<body>

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

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

<p>Nunc nisl turpis, aliquet et gravida non, facilisis a sem.</p>

</body>

</html>








Ex_04 a태그의 속성

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Selector Basic</title>

<style>

/* unvisited link 방문하지 않은 링크*/

a:link {

color: green;

}


/* visited link 방문했던 링크*/

a:visited {

color: blue;

}


/* mouse over link 링크에 마우스를 가져다대면*/

a:hover {

color: red;

}


/* selected link 선택된 링크 */

a:active {

color: yellow;

}

/* 

:link href 속성을 가지고 있는 a 태그를 선택합니다.

:visited 방문했던 링크를 가지고 있는 a태그를 선택합니다.

 */

</style>

</head>

<body>

<h1>

<a>Nothing</a>

</h1>

<h2>

<a href="http://www.naver.com">네이버~!</a>

</h2>

</body>

</html>







Ex_05 not(선택자)

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

p {

color: red;

}


:not(p) {

color: blue;

}

/* 

:not(선택자) 선택자를 반대로 적용합니다.

 */

</style>

</head>

<body>

<h1>컨텐츠 제목입니다.</h1>

<p>단락1 입니다.</p>

<p>단락2 입니다.</p>

</body>

</html>








Ex_06 font-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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

p:nth-child(2) {

font-size: 3em;

}


p:nth-child(3) {

font-size: 150%;

}


p:nth-child(4) {

font-size: 100px;

}

/* 

% 백분율단위

em 배수 단위

px 픽셀

 */

</style>

</head>

<body>

<p>첫번째 단락입니다.</p>

<p>두번째 단락입니다.</p>

<p>세번째 단락입니다.</p>

<p>네번째 단락입니다.</p>

</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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

p:nth-child(1) {

background-color: #FFFF00;

}


p:nth-child(2) {

background-color: yellow;

}


p:nth-child(3) {

background-color: rgb(255, 255, 0);

}

/* 

#000000 HEX 코드 단위

rgb(red,green,blue) RGB 색상 단위

rgba(red,green, blue, alpha) RGBA 색상 단위

hsl(hue, saturation, lightness) HSL 색상 단위

hsla(hue, saturation, lightness, alpha) HSLA 색상단위

 */

</style>

</head>

<body>

<p>첫번째 단락입니다.</p>

<p>두번째 단락입니다.</p>

<p>세번째 단락입니다.</p>

<p>네번째 단락입니다.</p>

</body>

</html>







Ex_08 h1~h6

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Property Basic</title>

<style>

body {

background-image:

url('http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif');

}

/* 

h1 ~ h6 숫자가 낮을수록 글자가 크다.

 */

</style>

</head>

<body>

<h1>Header - 1</h1>

<h2>Header - 2</h2>

<h3>Header - 3</h3>

<h4>Header - 4</h4>

<h5>Header - 5</h5>

<h6>Header - 6</h6>

</body>

</html>







Ex_09 display 속성_1

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

span, div {

border: 1px solid #666666;

}


#box {

display: none;

}

/* 

display 속성에 사용가능한 키워드

none 태그를 화면에서 보이지 않게 만듭니다.

block 태그를 block 형식으로 지정합니다.

inline 태그를 inline 형식으로 지정합니다.

inline-block 태그를 inline-block 형식으로 지정합니다.

 */

</style>

</head>

<body>

<span>인라인형식1</span>

<div id="box">

<span>인라인형식2</span>

</div>

<span>인라인형식3</span>

<span>인라인형식4</span>

</body>

</html>






Ex_10 display 속성_2

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

span {

border: 2px solid #666666;

height: 50px;

width: 200px;

display: block;

}


div {

border: 2px solid #FF0000;

}


/* 

display 속성에 사용가능한 키워드

none 태그를 화면에서 보이지 않게 만듭니다.

block 태그를 block 형식으로 지정합니다.

inline 태그를 inline 형식으로 지정합니다.

inline-block 태그를 inline-block 형식으로 지정합니다.

 */

</style>

</head>

<body>

<span>인라인형식1</span>

<div id="box">

<span>인라인형식2</span>

</div>

<span>인라인형식3</span>

<span>인라인형식4</span>

</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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

span {

border: 2px solid #666666;

height: 50px;

width: 200px;

display: block;

}


div {

border: 2px solid #FF0000;

}

</style>

</head>

<body>

<span>인라인형식1</span>

<div id="box">

<span>인라인형식2</span>

</div>

<span>인라인형식3</span>

<span>인라인형식4</span>

</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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

span {

border: 2px solid #666666;

}


div {

border: 2px solid #FF0000;

height: 50px;

display: inline;

}

</style>

</head>

<body>

<span>인라인형식1</span>

<div id="box">

<span>인라인형식2</span>

</div>

<span>인라인형식3</span>

<span>인라인형식4</span>

</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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

span {

border: 2px solid #666666;

height: 50px;

width: 200px;

display: inline-block;

}


div {

border: 2px solid #FF0000;

}

</style>

</head>

<body>

<span>인라인형식1</span>

<div id="box">

<span>인라인형식2</span>

</div>

<span>인라인형식3</span>

<span>인라인형식4</span>

</body>

</html>







Ex_14 visibility의 속성

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

span, div {

border: 1px solid #666666;

}


#box {

visibility: hidden;

}

/*

visible 태그를 보이게 만듭니다.

hidden 태그를 보이지 않게 만듭니다.

collapse table 태그를 보이지 않게 만듭니다.

*/

</style>

</head>

<body>

<span>인라인형식1</span>

<div id="box">

<span>인라인형식2</span>

</div>

<span>인라인형식3</span>

<span>인라인형식4</span>

</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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>INDEX</title>

<script>

window.onload = function() {

document.getElementById("b1").onclick = hText;

document.getElementById("b2").onclick = sText;

}


function hText() {

document.getElementById('p1').style.visibility = "hidden";

}


function sText() {

document.getElementById('p1').style.visibility = "visible";

}

</script>

</head>

<body>

<ul id="p1">

<li>This is a text.</li>

<li>This is a text.</li>

<li>This is a text.</li>

<li>This is a text.</li>

</ul>

<input type="button" value="텍스트 숨기기" id="b1">

<input type="button" value="텍스트 보이기" id="b2">

</body>

</html>







Ex_16 opacity

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

#box {

background-color: #000000;

color: #FFFFFF;

opacity: 0.5;

}

/* 

opacity 0.0~1.0 사이의 숫자로 0.0에 가까울수록 투명합니다.

 */

</style>

</head>

<body>

<span>인라인형식1</span>

<div id="box">

<span>인라인형식2</span>

</div>

<span>인라인형식3</span>

</body>

</html>-







Ex_17 width 속성과 height 속성

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS Property Basic</title>

<style>

div {

width: 100px;

height: 100px;

background-color: #FF0000;

}

</style>

</head>

<body>

<div></div>

</body>

</html>






Ex_18 margin

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS Property Basic</title>

<style>

#box1 {

background-color: red;

border: 2px solid black;

width: 300px;

}


#box2 {

background-color: #FFFF00;

border: 2px solid black;

margin: 10px 5px 20px 15px;

}


span {

display: inline-block;

border: 2px solid black;

margin-top: 10px;

margin-right: 5px;

margin-bottom: 20px;

margin-left: 15px;

}

/* 

margin 

 - 블럭형식의 바깥 쪽 여백

 - margin : 10px ==> 상하좌우 모두 10px

 - margin : 10px 5px ==> 상하 10, 좌우 5

 - margin : 10px 5px 8px 15px

 ==> 위 , 오른쪽, 아래, 왼쪽

*/

</style>

</head>

<body>

<div id="box1">

<div id="box2">안쪽박스</div>

</div>

<span>인라인형식1</span>

<span>인라인형식2</span>

</body>

</html>






Ex_19 margin 

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS Property Basic</title>

<style>

#box1 {

background-color: red;

border: 2px solid black;

width: 300px;

}


#box2 {

background-color: #FFFF00;

border: 2px solid black;

margin: 10px 5px 20px 15px;

}


span {

display: inline-block;

border: 2px solid black;

margin-top: 10px;

margin-right: 5px;

margin-bottom: 20px;

margin-left: 15px;

}

/* 

margin 

 - 블럭형식의 바깥 쪽 여백

 - margin : 10px ==> 상하좌우 모두 10px

 - margin : 10px 5px ==> 상하 10, 좌우 5

 - margin : 10px 5px 8px 15px

 ==> 위 , 오른쪽, 아래, 왼쪽

*/

</style>

</head>

<body>

<div id="box1">

<div id="box2">안쪽박스</div>

</div>

<span>인라인형식1</span>

<span>인라인형식2</span>

</body>

</html>







Ex_20 padding

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS Property Basic</title>

<style>

#box1 {

background-color: red;

border: 2px solid black;

width: 300px;

padding: 10px 5px 20px 15px;

}


#box2 {

background-color: #FFFF00;

border: 2px solid black;

}


span {

display: inline-block;

border: 2px solid black;

padding: 10px 5px 20px 15px;

}

/* 

padding 속성

 - 블럭형식의  안쪽 여백

 - padding : 10px ==> 상하좌우 모두 10px

 - padding : 10px 5px ==> 상하 10, 좌우 5

 - padding : 10px 5px 8px 15px ==> 위 , 오른쪽, 아래, 왼쪽

 - padding-top: 값;

   padding-right: 값;

   padding-bottom: 값;

   padding-left: 값;

*/

 </style>

</head>

<body>

<div id="box1">

<div id="box2">안쪽 박스</div>

</div>

<span>인라인형식1</span>

<span>인라인형식2</span>

</body>

</html>






Ex_21 border-style속성 체크

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3</title>

<style>

.box {

/*border:1px solid black;*/

border-left: 2px solid black;

border-top: 1px solid black;

border-right: 3px solid black;

border-bottom: 5px solid black;

width: 500px;

height: 200px;

}

</style>

</head>

<body>

<div class="box">

<h1>기본 테두리를 보여줍니다.</h1>

</div>

</body>

</html>






Ex_22 border-radius

<%@ 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3 Property Basic</title>

<style>

.box {

border: 2px solid black;

border-radius: 50px 20px 30px 10px;

}

/* 

border-radius 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽아래 --> 시계방향

 */

</style>

</head>

<body>

<div class="box">

<h1>둥근 모서리</h1>

</div>

</body>

</html>

'IT > _HTML_CSS_JS' 카테고리의 다른 글

UI/UX_006  (0) 2017.07.06
UI/UX_001  (0) 2017.07.05
UI/UX_002  (0) 2017.07.05
UI/UX_003  (0) 2017.07.05
UI/UX_004  (0) 2017.07.05
'IT/_HTML_CSS_JS' Related Articles more