본문 바로가기
WEB/CSS

CSS 기본 예제

by 둥바 2022. 6. 15.
CSS 기본 예제를 통해서 어떤 화면이 출력되는지 확인해보자

 

예제 1) 
- <span></span> 와 <a></a> 태그는 인라인 요소
- <div></div> 태그는 블럭 요소
- >(gt;) 직계 자손을 가리킴
- a:hover (마우스가 태그 위에 올라갔을 때) / a:link(링크로 연결) / a: active(마우스 클릭 시 효과)/ a:visited(한 번 이상 방문한 링크)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
 div {
 	margin-top: 15px;
 }
 
 a {
 	margin: 0;
 	padding: 3px;
 	border: 2px solid purple;
 	text-decoration: none;
 	background: purple;
 	color: white;
 }
 
 span > a:hover { /* 마우스 올라감 */
 	background: white;
 	color: purple;
 }
 
 span > a:active { /* 클릭함 */
 	background: pink;
 	color: purple;
 }
 
 div > a:link {
 	background: white;
 	color: purple;
 }
 
 div > a:visited {
 	background: gray;
 	color: navy;
 }
 



</style>
</head>
<body>
<span><a href="basic-selector.html">버튼1</a></span>
<span><a href="basic-selector.html">버튼2</a></span>
<span><a href="#">버튼3</a></span>
<span><a href="#">버튼4</a></span>


<div>
	<a href="#">버튼5</a>
	<a>버튼6</a>
	<a href="basic-selector.html">버튼7</a>
	<a>버튼8</a>
</div>

<!-- 정리 :
<div></div>는 블럭요소(개행처리), 
<span></span>은 인라인요소
<a></a>는 인라인요소
a : link{ 연결되어 있을 시 }
a : hover{ 마우스를 태그 위에 올렸을 때 }
a : active{ 클릭했을 때 }
a : visited{ 방문한 링크일 때 }
 -->

</body>
</html>

 

예제2
- 스타일 적용 우선순위 : 인라인 > 내부 스타일 시트 > 외부 스타일 시트
- <link rel = "stylesheet" type="text/css" href="연결할 css파일 주소">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 스타일 시트와 외부 스타일 시트</title>
<link rel="stylesheet" type="text/css" href="../include/mystyle.css">

<!-- 내부 스타일 시트  -->
<style type="text/css">
h2 {
	color: pink;
}

h1 {
	color: navy;
}

</style>
</head>
<body>
	<div>
		<h1>실습</h1>
		<!-- 인라인 스타일 시트 -->
		<h2 style="color:yellow;">스타일 시트</h2>
		<h2>내부 스타일 시트에 의해 적용됩니다.</h2>
		<h1>실습</h1>
		<p>외부 스타일 시트에 의해 적용됩니다.</p>
	</div>

<!-- 정리하자면,
우선순위는 인라인 > 내부 스타일 시트 > 외부 스타일 시트 순
외부 스타일 시트와 html을 연결하는 방법
<link rel="stylesheet" type="text/css" href="외부스타일시트 주소">
  -->

</body>
@charset "UTF-8";

h1 {
	color: red;
}

p {
	color: #0026ff;
}

 

예제3
- id는 클래스와 달리 한 페이지 내에서 중복이 불가능하다.
- 문자 속성들
<font>
- font-family : 글꼴 ( 없는 글씨체의 경우 , 컴마 다음의 글꼴 적용)
- font-size : 폰트 사이즈 ( small, large, %, em,px 등 사용 가능)
- color : 폰트 색 변경
- font-weight : 폰트 두께
- font-style : 글꼴 스타일 지정 ( italic은 이태릭 서체 스타일이나 oblique 은 글씨를 그저 기울인 것)

<text 속성>
- text align : 수평 정렬 -> left(왼쪽 - 기본값 ), right(오른쪽),center(중앙),justify(양쪽 정렬 : 빈 공간 없이 양쪽 끝을 맞춤)
- vertical align : 수직 정렬 -> top(위) , middle(중간), bottom(아래)
- text decoration : linethrough(중앙선) ,underline(밑줄),overline(윗줄),none(없음)
- text shadow : 그림자 설정(그림자 수평거리, 그림자 수직거리, 흐린 정도, 색상)

- letter spacing : 문자의 자간(글자 사이 간격 지정) 단위 
- word spacing : 단어 사이 간격 설정 단위
- line-height : 줄 간격
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>char-style</title>
<style type="text/css">

#id1, #id2, #id3, #id4, #id5{
/* 묶어서 그룹화 (한 번에 적용) */
	font-size: 16px;
	border : dashed pink;
}

#id1 {
	font-family: arial;
	font-size: small;
	text-decoration: overline;
}

#id2 {
	font-family: "돋움";
	font-size: large;
	text-align: center;
	text-decoration: line-through;
}

#id3 {
	/* italic은 이탤릭체의 폰트고, oblique는 단순히 기울기만 함 */
	font-style:oblique;
	font-size: 200%;
	text-align:right;
	text-decoration:underline;
}

#id4 {
	font-family: "times new roman";
	font-size: 2em;
	font-weight: bold;
}

#id5 {
 	font-family: "없는 글씨체", serif;
 	font-size: 100%;
 	font-weight: lighter;
 }
 
 #id6 {
 	vertical-align : top; /* 수직 정렬 */
 	letter-spacing: -2pt; /* 글자 사이 간격 */
 	word-spacing: 3pt; /* 단어 사이 간격 */
 }
 
 #id7 {
 	text-align: justify;
 	letter-spacing: 4pt;
	word-spacing: 6pt;
 	
 }
 
 
#id8 {
	letter-spacing: -4pt;
	word-spacing: 3pt;
}

#id9 {
	letter-spacing: 2pt;
	word-spacing: 3pt;
	line-height: 300%;
}

/* text-shadow: 글자에 그림자 효과를 줌
text-shadow: 그림자의 수평거리(x) 그림자의 수직거리(y) 흐림정도(blur) 색상 */

h1 {
	font-size:32px;
	text-shadow: 8px 6px 10px red;
	
}

h3 {
	font-size: 2em;
	background-color: #800080;
	color: black;
	display: inline;
	/*h3는 블록요소인데 이를 인라인요소로(옆으로)  */
	text-shadow: 2px 2px 10px white;
}
 


</style>
</head>
<body>
<!-- id는 페이지 내에서 중복 불가 (클래스는 가능)  -->
<p id="id1">AaBbCc스타일1</p>
<p id="id2">AaBbCc스타일2</p>
<p id="id3">AaBbCc스타일3</p>
<p id="id4">AaBbCc스타일4</p>
<p id="id5">AaBbCc스타일5</p>


<table border="1">
	<tr>
		<td><p id="id6">AaBbCc스타일6 스타일 스타일 스타일</p></td>
		<td><p id="id7">AaBbCc스타일7 스타일 스타일 스타일</p></td>
	</tr>
	<tr>
		<td><p id="id8">AaBbCc스타일8 스타일 스타일 스타일</p></td>
		<td><p id="id9">AaBbCc스타일9 스타일 스타일 스타일</p></td>
	</tr>
	
</table>
<h1>h1 Shadow 효과</h1>
<h3>h3 Shadow 효과</h3>

</body>
</html>

 

예제4
- body * { } : body 아래의 모든 태그 선택
<background 속성>
- background-image : url(" ");  
- background-position : x축위치 y축 위치;
- background-repeat : no-repeat(반복X),repeat(기본값),repeat-x(x축으로 반복),repeat-y(y축으로 반복)
- background-size : 가로,세로 (auto : 원본크기)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지</title>
<style type="text/css">

body * {
	border: solid blue;
	width: 300px;
	height: 100px;
}

#id1 {
	background-image: url("../image/flower1.jpg");
	background-position: right center;
	/* x축방향 오른쪽 , y축방향 중앙 */
	background-repeat: no-repeat;
	/* 기본값은 복제 */
	background-size: 30% 50%; 
	/* 원본에 비해 가로사이즈 퍼센트 세로 퍼센트 비율로 출력*/
}

#id2 {
	background-image:url("../image/flower2.jpg");
	background-repeat: repeat-x; /* x축 방향으로 반복  */
	background-size: 20% 60%;

}

#id3 {
	background-image: url("../image/flower1.jpg");
	background-size: auto; /* 원본크기유지 */
	
}

#id4 {
	background-image:url("../image/flower2.jpg");
	background-position: 50% 50%; /*  가로위치(50%) 세로위치(50%) */
	background-repeat: no-repeat;
	background-size: 20% 60%;
}


</style>
</head>
<body>
	<div id="id1">스타일1</div>
	<div id="id2">스타일2</div>
	<div id="id3">스타일3</div>
	<div id="id4">스타일4</div>
</body>
</html>

 

예제5
<색상 단위>
- 키워드 사용 가능 : red, blue, green
- RGB 색상단위 : rgb(red,green,blue) 0~255까지 / RGBA : rgba(red,green,blue,alpha) 투명도는 0.0~1.0까지
- Hex 코드 색상 단위 : #00FF00; #FF0000; 등
- HSL 색상 단위 : hsl(색상,채도,명도) / HSLA(색상,채도,명도,투명도)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>color-style</title>
<style type="text/css">
body{
	color:red;
}

h1 {
	color:#00ff00;
}

p {
	color:rgb(0,0,255);
}

#rgb1{
	background-color:rgb(255,0,0); /* red  */
	
}

#rgb2{
	background-color:rgb(0,255,0);
}

#rgb3{
	background-color:rgb(0,0,255);
}

#rgba1 {
	background-color:rgba(255,0,0,0.3); /*red with opacity  */
}

#rgba2 {
	background-color:rgba(0,255,0,0.3); /*green with opacity */
	
}

#rgba3 {
	background-color:rgba(0,0,255,0.3); /*blue with opacity */
}

#hsl1 {
	background-color: hsl(120,100%,50%); /* 채도는 100프로인데 명도를 바꾸는 것  */
}

#hsl2 {
	background-color: hsl(120,100%,75%); 
}

#hsl3 {
	background-color: hsl(120,100%,15%);
}

#hsl4 {
	background-color: hsl(120,60%,70%);
}

#hsla1 {
	background-color: hsla(120,100%,50%,0.3);
}

#hsla2 {
	background-color: hsla(120,100%,75%,0.3);
}

#hsla3 {
	background-color: hsla(120,100%,25%,0.3);
}

#hsla4 {
	background-color: hsla(120,60%,50%,0.1);
}


</style>
</head>
<body>
<h1>Color속성</h1>
<p>RGB속성</p>
<div id="rgb1">rgb스타일1</div>
<div id="rgb2">rgb스타일2</div>
<div id="rgb3">rgb스타일3</div>

<p>RGBA속성</p>
<div id="rgba1">rgba스타일1</div>
<div id="rgba2">rgba스타일2</div>
<div id="rgba3">rgba스타일3</div>

<p>HSL속성</p>
<div id="hsl1">hsl스타일1</div>
<div id="hsl2">hsl스타일2</div>
<div id="hsl3">hsl스타일3</div>
<div id="hsl4">hsl스타일4</div>

<p>HSLa속성</p>
<div id="hsla1">hsla스타일1</div>
<div id="hsla2">hsla스타일2</div>
<div id="hsla3">hsla스타일3</div>
<div id="hsla4">hsla스타일4</div>

</body>
</html>

 

예제 6번
- ul 안에 ol 포함 가능 ( ul 안에 ul,ol / ol 안에 ol,ul 다 포함 가능하다 )
- list-style-type : 목록 마커의 스타일 변경
- list-style-position: inside / outside (목록 마커의 위치 지정)
- list-style-image : url(" ")/none (목록 마커를 이미지로 저장할 수 있음)
- class와 id를 동시에 사용할 수 있다. ( 단, id는 중복 불가~)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul li{
	list-style-type:square;
}

.style1 li{
	list-style-type: upper-roman;
}

.style2 li{
	list-style-type: upper-alpha;
}

.style3 li{
	list-style-type: lower-alpha;
}	

#id1, #id2{
	list-style-position: inside;
	/* list-style-position : 목록 마커 위치 지정
	inside : 안쪽 outside: 바깥쪽 */
}

#id3{
	list-style-image:url("../image/star-type.jpg");
	/* 목록 마커를 이미지로 처리 */
}

</style>
</head>
<body>
	<ul>
		<li>스타일1</li>
		<ol class="style1">
			<li>스타일1-1</li>
			<li>스타일1-2</li>
			<li>스타일1-3</li>
		</ol>
		<li id="id1">스타일2</li>
		<ol class="style2">
			<li>스타일2-1</li>
			<li>스타일2-2</li>
		</ol>
		<li>스타일3</li>
		<ol id="id2" class="style3">
			<li>스타일3-1</li>
			<li>스타일3-2</li>
		</ol>
		<li id="id3">스타일4</li>
	</ul>
</body>
</html>

 

예제 7번
- table 안에 thead, tbody,tfoot 태그,th태그,td태그
- border 속성 ( border-style 은 필수 )
border : 두께(border-width), 선 모양(border-style:dotted,dashed,solid), 색상(border-color)
border-top, border-right, border-bottom,border-left 로 따로 지정 가능
border-collapse : 표 테두리와 셀 테두리의 간격 ) selected(분리) 기본 설정 / collapse (간격 제거)
- nth-child(n) : 요소의 n번째 값 선택 (의사클래스)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table th,table td {
	margin: 1px;
	padding: 8px;
}

table {
/* border 속성  */
	border-top: 3px solid;
	border-bottom: 1px solid;
	border-collapse: collapse;
	/* collapse: 표 테두리와 셀 테두리 간의 간격 */
}

table th {
	background-color: rgb(135,167,192);
	color: white;
	border-bottom: 2px solid black;
	font-size: 1.2em;
}

table td {
	border-bottom: 1px dotted;
}

table tbody> tr:nth-child(odd){
	/* nth-child : 의사클래스
	odd : 홀수, even : 짝수 */
	background-color: hsla(120,60%,80%,0.3);
}

tbody> tr:nth-child(2n){
	background-color: pink;
	}
table > tfoot > tr:nth-child(1) > td:nth-child(1) {
	background-color : green;
}

tfoot > tr:nth-child(1) > td:nth-child(2) {
	background-color : gray;
}

caption {
	font-size: 1.4em;
	margin: 5px;
}

</style>
</head>
<body>
	<table>
		<caption>해커톤 참가팀</caption>
		<thead>
			<tr>
				<th>팀명</th>
				<th>인원</th>
				<th>참가분야</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>미생물체로 만든 천연비닐</td>
				<td>3</td>
				<td>생명공학</td>
			</tr>
			<tr>
				<td>포스트 코로나 관광</td>
				<td>5</td>
				<td>관광개발</td>
			</tr>
			<tr>
				<td>반려동물 전용 IT웨어러블 기기</td>
				<td>4</td>
				<td>IT</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>전원 참가</td>
				<td colspan="2">확인</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>
Insert title here
해커톤 참가팀
팀명 인원 참가분야
미생물체로 만든 천연비닐 3 생명공학
포스트 코로나 관광 5 관광개발
반려동물 전용 IT웨어러블 기기 4 IT
전원 참가 확인

 

예제 8번
- border-radius : 모서리 부분을 둥글게 
- gradient(한 방향에더 다른 방향으로 색이 점차 흐려지거나, 변화하는 효과를 주는 속성)
브라우저 렌더링 엔진
-webkit- 크롬,사파리 엔진
-moz- 파이어폭스 
-o- 오페라
- linear-gradient (direction,color1,color2,,,color3) - 선형 그래디언트 )  시작 색상과 끝 색상 필수
direction : 그라데이션 방향
to bottom, to top, to left, to right,
ndeg (n도의 방향에서 그라데이션) 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width:200px;
            height:300px;
            border-radius:20px;
            border:1px solid rosybrown;
        }

        .grad{
            background-color: #f00;/*예전의 웹 브라우저*/
            /* 크롬엔진 */
            background: -webkit-linear-gradient(45deg, #ff0000, #ffffff);
            /* 파이어폭스 */
            background: -moz-linear-gradient(45deg,#ff0000, #ffffff);
            /* 오페라 */
            background: -o-linear-gradient(45deg,#ff0000, #ffffff);
            /*최신의 웹 브라우저 */
            background: linear-gradient(45deg,#ff0000, #ffffff);
        }
    </style>
</head>
<body>
    <div class="grad">
	
	</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-image:linear-gradient(to bottom,pink,blue);

        }

    </style>
</head>
<body>
    <div style="height:500px; width:400px; border:3px solid gray;">

    </div>
    
</body>
</html>

 

예제 9번
- p 태그 안에 <span> 을 통해 해당 영역만 css스타일 다르게 적용 
- font 여러 요소 사용 가능 : style weight size family
- font-style : inherit ) 기본 글꼴 상속받음
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-size:medium;
        }

        #t1 {
            font-size: 1em;
            font-weight: bold;
        }

        #t2 {
            font: italic bold 30px 궁서체;
            /*여러 요소 한번에 사용 가능
            font : style weight size family */
        }

        #t3 {
            font-style:italic;
            font-size:2.0em;
        }

        #t4 {
            font-size: 2.5em;
            font-style:inherit;
            /*기본 폰트 상속받음.*/
            color: lime;
        }

        p {
            color:blue;
            font-size: 1.5em;
        }

        .accent{
            font-weight:bold;
            font-size:2em;
            color:red;

        }
        
        #wrapper{
            width:300px;
            padding:50px;
            margin:50px;
            border:1px solid black;
        }

    </style>
</head>
<body>
    <p id="t1">문단1</p>
    <p id="t2">문단2</p>
    <p id="t3">문단3</p>
    <p id="t4">문단4</p>

    <div id="wrapper">
        <h1>표준 웹 기술</h1>
        <p><span class="accent">H</span>TML</p>
        <p><span class="accent">C</span>SS</p>
        <p><span class="accent">J</span>AVASCRIPT</p>
    </div>
</body>
</html>

 

예제 10번
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text_align</title>
<style type="text/css">
div{
	text-align:center;
	text-decoration:none;
	
}

h1 {
	text-decoration:underline;
}

p.date{
	text-align:left;
	text-decoration:none;
	/* 바꾸는 상황을 대비해서 설정*/
}

p.news{
	text-align:right;
	text-decoration:overline;
}

#company{
	text-align:inherit; /*부모-자식 관계일 때
	div의 자손으로서 부모요소의 속성값을 상속받음(가운데 정렬처리) */
	text-decoration:line-through;
}


</style>
</head>
<body>
<div>
	<h1>텍스트 정렬</h1>
	<p class="date">2022년 6월</p>
	<p class="news">"메타버스는 거부할 수 없는 '환경'이 되었다."</p>
	<p id="company">MBC</p>
</div>
</body>
</html>

 

예제 11번
text-transform : 문자 형태 변경
- uppercase 대문자로
- lowercase 소문자로
- capitalize 첫 글자를 대문자로
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text_trans</title>
<style type="text/css">
p.upper {
	text-transform: uppercase; /* 모든 문자를 대문자로 바꿈 */
	font-size: 30px;
	text-shadow: 10px 5px 5px #00ff00;
}

p.lower {
	text-transform: lowercase; /* 모든 글자를 소문자로 바꿈 */
}

p.capital {
	text-transform: capitalize; /* 첫글자를 대문자로  */
}

</style>
</head>
<body>
<p class="upper">abcdefg</p>
<p class="lower">ABCDEFG</p>
<p class="capital">abcdefg</p>
</body>
</html>

 

예제 12번
- 폰트명 입력 시에 글꼴명에 스페이스 있으면 반드시 " " 쓰기
- text shadow : x,y,블러,컬러
- x,y에 음수값들어오면 왼쪽 상단에 그림자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>shadow1</title>
<style type="text/css">

h1 {
	font-size: 100px;
	font-family: "Arial Rounded MT Bold";
	/* 폰트명 입력 시에 글꼴명에 스페이스가 있으면 반드시 ""를 써야 한다.
	그렇지 않으면 "" 사용하지 않아도 무관.  */
	
	color: orange; /* 글자색  */
	text-shadow: 5px 5px; /* 텍스트 그림자 x,y값 사용  */
}

.shadow1 {
	text-shadow: 5px 5px 30px #f00; /* 요소 모두 사용 시에 */
}

.shadow2 {
	color: #fff; /* rgb 16진수로 나타내기  */
	text-shadow: -7px -7px 5px #000;
	/* x,y축에 마이너스 쓰면 왼쪽 위방향으로 그림자 형성  */
}
</style>
</head>
<body>
	<h1 class="shadow1">HTML5</h1>
	<h1 class="shadow2">HTML5</h1>
	<h1 class="shadow3">HTML5</h1>
</body>
</html>

 

예제 13번
word-wrap : break-word; //스페이스가 없는 간단어의 width안에서 자동 줄바꿈 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ww</title>
<style type="text/css">
p.test{
	width: 300px;
	border: 2px solid red;
	padding: 10px;
	word-wrap:break-word; /* 스페이스가 없는 긴단어의 width안에서 자동 줄바꿈 처리  */
}


</style>
</head>

<body>
<p class="test">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</body>
</html>

'WEB > CSS' 카테고리의 다른 글

CSS3 레이아웃  (0) 2022.06.20
CSS - 박스 모델  (0) 2022.06.16

관련글

티스토리툴바