CSS (2) (Guest, Filter, URL, Display, Opacity)

벨플라워 2020. 6. 1. 16:24

2020. 6. 1. 16:24

1. Guest

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/12_GuestStyle.css"/>
</head>
<body>	
	<div id="createform">
		<form action="서버주소" method="post">
			<div class="title">
				<label>이름</label>
				<input type="text" name="name" size="12"/>
				<label style="margin-left: 20px;">비밀번호</label>
				<input type="password" name="pwd" size="12"/>
			</div>
			
			<div class="content">
				<textarea style="margin-top: 5px;" rows="10" cols="52"></textarea>	
			</div>
			
			<div class="title" style="text-align: right">
				<input type="submit" value="확인"/>
				<input type="reset" value="취소"/>
			</div>
		</form>
	</div>
</body>
</html>


@charset "UTF-8";

#createform {
	border: solid 1px red;
	width: 400px;
	height: 250px;
	margin: 200px auto;
}

#createform .title {
	border: solid 1px blue;
	width: 400px;
	height: 250px;
	height: 30px;
	margin: 2px 0px;
	text-align: center;
}

#createform .content {
	border: solid 1px yellow;
	width: 400px;
	height: 180px;
}

2. FileSelector

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>필터 선택자 - 문자 블록 </title>
<style type="text/css">
	/*필터 선택자: 문자블록, 마우스(hover), 컨텐츠, 하이퍼링크(link,)
	
		1.문자블록
			1)선택자: first-child(속성:값;): 선택자의 첫번째 자식요소를 선택
			2)선택자: last-child(속성:값;): 선택자의 마지막 자식요소를 선택
			3)선택자: nth-child(n)(속성:값;): 선택자의 n번째 자식요소를 선택
			4)선택자: first-line(속성:값;): 첫번째 라인을 선택
			5)선택자: first-letter(속성:값;): 첫번째 글자를 선택
			6)선택자: ::selection(속성:값;): 텍스트를 마우스로 드래그하면 색깔 등 속성이 변함
			
	*/
	#content {
		width: 150px;
	}
	
	#content > li{
		list-style-type: none;
		border: 1px solid #CCCCCC;
		background-color: #EFEFEF;
		font-size: 20px;
		font-weight: bold;
		border-top-width: 0px;		
		
	}
	
	#content a {
		text-decoration: none;
		color: #000000;
		text-align: center;
		padding: 10px;
	}
	
	#content > li:first-child, #content > li:last-child {
		background-color: yellow;		
	}
	
	#content > li:nth-child(2) {
		background-color: red;
	}
	
	#content > li:first-child {
		border-radius: 10px 10px 0px 0px; /*왼쪽 상단부터 시계방향*/
	}
	#content > li:last-child {
		border-radius: 0px 0px 10px 10px;
	}
	
</style>
</head>
<body>
	<div>
		<ul id="content">
			<li style="border-top-width: 1px;"><a href="#">MENU1</a></li>
			<li><a href="#">MENU2</a></li>
			<li><a href="#">MENU3</a></li>
			<li><a href="#">MENU4</a></li>
			<li><a href="#">MENU5</a></li>
			<li><a href="#">MENU6</a></li>
			<li><a href="#">MENU7</a></li>
			<li><a href="#">MENU8</a></li>
		</ul>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>필터 선택자 - 문자 블록 </title>
<style type="text/css">
	#wrap {
		width: 900px; margin: 0px auto;
	}
	
	#wrap > #header { /*가독성을 위해*/
		width: 750px; border-bottom: 1px solid #CCCCCC;
	}
	
	#wrap > #footer{
		border: solid #CCCCCC 2px; height: 100px;
	}
	
	#wrap > #footer li {
		list-style: none;
		float: left;
		margin: 10px;
	}
	
	#wrap > #content > #history2:first-letter, #wrap > #content > p:nth-child(2):first-letter {
		font-size: 2em;
	}
	#wrap > #content > #history2:first-line, #wrap > #content > p:nth-child(2):first-line{
		font-weight:bold; color: #2160d1;
	}
	
	#wrap > #content > p:nth-child(1)::selection {
	/*선택한 문자(드래그)   ::selection */
		background-color: olive; color: red;
	}
	
</style>
</head>
<body>
	<div id="wrap">
		<div id="header">
			<h1>설립개요</h1>
		</div>
		
		<div id="content">
			<p>
				중소기업 지원업무의 전문성과 효율성을 확보하고 중소기업에 대한 기술,
				경영, 인력등의 종합지원체계를 구축함으로써 중소기업의 경쟁력 제고를 위해 설립된
				진흥원은 종소기업의 자생력을 키우고 안정적인 경영여건을 조성하기 위하여 끊임없이 노력하고 있습니다.
			</p>
			<p id="history1">
				2014년 4월 9일 <br/> 진흥원 사명변경 6월3일 판교 이전
			</p>
			<p id="history2">
				2013년 1월 12일 <br/> 다누리 시민청 개관 5월 9일 꿈꾸는 청년가게 명동점 개관 5월 10일 큐비드 광화문 개관
				6월 21일 다누리 강남점 개관 7월 20일 서울크리에티브랩 개관 6월27일 다누리 성북점 개관
			</p>
		</div>
		
		<div id="footer">
			<ul>
				<li><img src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif" alt="이미지 준비중"></li>
				<li><img src="https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"  height="50px"></li>
			</ul>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>필터 선택자 - 마우스 </title>
</head>
<style>
	#sub > li{
		font-size: 2em; font-weight: bold; color: orange;
		list-style-type: none; float: left; margin-left: 20px;
	}
	#sub >li:hover {
		color:blue; font-size: 3em; cursor: progress;
	}
	
</style>
<body>
	<div>
		<ul id="sub">
			<li>사과</li>
			<li>바나나</li>
			<li>딸기</li>
			<li>포도</li>
			<li>오렌지</li>
		</ul>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>필터 선택자</title>
</head>
<style>
	.form_style > input:focus {
		background-color: yellow;
	}
	.form_style > input:enabled {
		color: red; font-weight: bold;
	}
	.form_style > input:disabled {
		color: blue;
	}
	.form_style > label {
	display: inline-block;
	width: 80px;
	}
	
</style>
<body>
	<div>
		<form class="form_style">
			<label>이름</label>
			<input type="text" name="name"/><br/>
			
			<label>아이디</label>
			<input type="text" name="id"/><br/>
			
			<label>비밀번호</label>
			<input type="password" name="pwd"  value="" disabled="disabled"/><br/>
		</form>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>필터 선택자</title>
</head>
<body>
	 <div id="wrap">

        <div id="header">
            <h1>CSS </h1>
        </div>

        <div id="content">
            <ul>
                <li>
                	<a href="http://www.naver.com" target="_blank">네이버</a>
                </li>
                <li class="fa">
                	<a href="http://www.yahoo.com" target="_blank">야후</a>
                </li>
                <li>
                	<a href="http://www.google.com" target="_blank">구글</a>
                </li>
            </ul>
        </div>

        <div id="footer">
            <ul>
                <li><img src="http://www.kosta.or.kr/resources/images/common/f-logo.png"></li>
            </ul>
        </div>
    </div>
</body>
</html>

3. URL

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>단위 + URL</title>
<style type="text/css">
	/*CSS 단위: %, 16px, 1.0em*/
	/*URL 단위*/
	#wrap {
		width: 800px; height: 1000px;
		margin: 0px auto;
		border: 1px solid #CCCCCC;
	}	
	
	#wrap > #content1 {		
		width: 80%; height: 45%; margin: 0px auto;
		border: 1px solid red;
		background-image: url("./../bmw.png");
		background-size: 50%;
		/*background-repeat: no-repeat;*/
		font-size: 2em; color: white; font-weight: bold;
		text-align: center; line-height: 60px;
	}
	
	#wrap > #content2{
		width: 500px; height:230px; margin: 20px auto;
		border: 1px solid red;
		
		background-image: url("http://academy.kitri.re.kr/static/images/acad/common/h1_logo.gif");
		font-size: 1.5em; color: green; font-weight: bold;
		text-align: center; line-height: 230px;
	}
</style>
</head>
<body>
	<!-- 이미지, 오디오, 비디오: 상대 경로 또는 이미지 주소(URL) 복사 -->
    
    <div id="wrap">
        <div id="content1">해당 이미지는 저작권 보호를 받습니다.</div>
        <div id="content2">해당 이미지는 저작권 보호를 받습니다.</div>
        <div id="content3">해당 이미지는 저작권 보호를 받습니다.</div>
    </div>
</body>
</html>

4. Display

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성</title>
<style type="text/css">
	#content > div {
		width: 100px;
		height: 100px;
		margin: 10px;
	}	
	#content > div:nth-child(1), #content > div:nth-child(2){
		background-color: #FF0000;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;		
	}
	#content > div:nth-child(3){
		background-color: #0000FF;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		border: 5px solid #FF8D00;
		box-sizing: content-box; /*기본값 생략가능, 밖으로 그린다.*/
		
	}
	#content > div:nth-child(4){
		background-color: #00FF00;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		border: 5px solid #FF8D00;
		box-sizing: border-box; /*테두리가 안으로 그려짐*/		
	}
	
	#content > div:nth-child(5), #content > div:nth-child(6), #content > div:nth-child(7){
		background-color: #0AFFB0;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		display: inline;		
	}
	#content > div:nth-child(8), #content > div:nth-child(9){
		background-color: #BAAFBC;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		display: inline-block;			
	}
	#korea > li {
		width: 300px; height: 100px;
		text-align: center; line-height: 20px;
		background-color: red; list-style-type: none;
		margin: 10px; display: inline-block;
	}
	#korea > li:nth-child(2) {
		opacity: 0.5; /*투명도 : 0~1*/
	}
	#korea > li:nth-child(3) {
		opacity: 0.25;
	}
	
</style>
</head>
<body>
	<div id="content">
		<div>content1</div>
		<div>content2</div>
		<div>content3</div>
		<div>content4</div>
		<div>content5</div>
		<div>content6</div>
		<div>content7</div>
		<div>content8</div>
		<div>content9</div>
	</div>
	<br><br>
	
	<ul id="korea">
		<li>우리나라 만세</li>
		<li>대한민국 만세</li>
		<li>KOREA FIGHTING</li>
	</ul>
</body>
</html>

5. Opacity

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>투명도</title>
<style type="text/css">
	#content > div {
		width: 100px;
		height: 100px;
		margin: 10px;
	}	
	#content > div:nth-child(1), #content > div:nth-child(2){
		background-color: #FF0000;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;		
	}
	#content > div:nth-child(3){
		background-color: #0000FF;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		border: 5px solid #FF8D00;
		box-sizing: content-box; /*기본값 생략가능, 밖으로 그린다.*/
		
	}
	#content > div:nth-child(4){
		background-color: #00FF00;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		border: 5px solid #FF8D00;
		box-sizing: border-box; /*테두리가 안으로 그려짐*/		
	}
	
	#content > div:nth-child(5), #content > div:nth-child(6), #content > div:nth-child(7){
		background-color: #0AFFB0;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		display: inline;		
	}
	#content > div:nth-child(8), #content > div:nth-child(9){
		background-color: #BAAFBC;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		display: inline-block;			
	}
	#korea > li {
		width: 300px; height: 100px;
		text-align: center; line-height: 20px;
		background-color: red; list-style-type: none;
		margin: 10px; display: inline-block;
	}
	#korea > li:nth-child(2) {
		opacity: 0.5; /*투명도 : 0~1*/
	}
	#korea > li:nth-child(3) {
		opacity: 0.25;
	}
	
</style>
</head>
<body>
   <ul>
      <li>우리나라 만세!!</li>
      <li>대한민국 만세!!</li>
      <li>KOREA FIGHTING!!</li>
    </ul>
</body>
</html>

6. Position

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>투명도</title>
<style type="text/css">
	/*position : static, absolute, fixed, relative*/
	
	div{
		width: 100px; height: 100px;
		margin-left: 10px; margin-top: 10px;
	}
	body > div:nth-child(1) {
		background-color: red;
		position: static; /*기본값(디폴트), 순차적으로 쌓인다.*/
	}
	body > div:nth-child(2) {
		background-color: green; 
	}
	body > div:nth-child(3) {
		background-color: blue;
	}
</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POSITION</title>
</head>
<style type="text/css">
	div{
		margin-left: 10px; margin-top: 10px;
		width: 100px; height: 100px;
	}
	body > div:nth-child(1) {
		background-color: red;
		position: absolute; /*바로 윗 부모기준으로 절대 위치, margin과 padding 사용 못함*/		
	}
	body > div:nth-child(2) {
		background-color: green; 
		position: absolute;
		top: 50px; left: 50px;
	}
	body > div:nth-child(3) {
		background-color: blue;
		position: absolute;
		top: 100px; left: 100px;
	}
	#wrap{
		width: 300px; height: 300px;
		background-color: yellow;
		top: 300px; left: 300px;		
		position: absolute;
				
	}
	#wrap > .content{
		width:100px; height: 100px;
		background-color: olive;
		position: absolute;
		top: 80px; left: 80px; /*부모와 떨어진거리*/
	}
	#apple{
		width:300px; height: 300px;
		background-color: pink;
		margin-top:10px;
	}	
</style>
<body>
  	<div></div>
    <div></div>
    <div></div>

    <div id="wrap">
        <div class="content"></div>
    </div>
        
    <div id="apple"></div>        
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POSITION</title>
</head>
<style type="text/css">
	div{
		margin-left: 10px; margin-top: 10px;
		width: 100px; height: 100px;
	}
	body > div:nth-child(1) {
		background-color: red;
		position: fixed; /*절대적(absolute) 고정위치 / 웹에서 네비게이터로 쓰면 유용할 것 같음*/		
		top: 0px; left: 0px;
	}
	body > div:nth-child(2) {
		background-color: green; 
		position: absolute;
		top: 50px; left: 50px;
	}
	body > div:nth-child(3) {
		background-color: blue;
		position: absolute;
		top: 100px; left: 100px;
	}
	#wrap{
		width: 300px; height: 300px;
		background-color: yellow;
		top: 300px; left: 300px;		
		position: absolute;
				
	}
	#wrap > .content{
		width:100px; height: 100px;
		background-color: olive;
		position: absolute;
		top: 80px; left: 80px; /*부모와 떨어진거리*/
	}
	#apple{
		width:300px; height: 300px;
		background-color: pink;
		margin-top:10px;
	}	
</style>
<body>
  	<div></div>
    <div></div>
    <div></div>

    <div id="wrap">
        <div class="content"></div>
    </div>
        
    <div id="apple"></div>        
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POSITION</title>
<style type="text/css">
/*
	<position>
	static : 원래 위치, (예를들어 div태그라면 block이므로 차곡 차곡 밑으로 쌓이는 위치)
	absolute : 절대위치
	fixed : absolute와 같지만 위치가 고정
	relative :나의 static(원래위치)로부터의 상대거리

*/
	#red{
		width: 100px; height: 100px;
		background-color: red;
	}
	#yellow{
		width: 400px; height: 400px;
		background-color: yellow;
		position: relative;
		top: 50px; left: 50px; /*relative니까 자신의 static(원래위치)으로부터 떨어진 픽셀*/
	}
	#pink{
		width: 100px; height: 100px;
		background-color: pink;
		position: relative;
		top: 100px; left: 50px;
	}
	#yellow > #green{
		width: 100px; height: 100px;
		position: relative;
		background-color: green;
		top: 0px; left: 100px;
	}
	#yellow > #blue{
		width: 100px; height: 100px;
		position: relative;
		background-color: blue;
		top: 0px; left: 300px;
	}
</style>
</head>
<body>
  	<div id="red"></div>
  	
    <div id="yellow">
    	<div id="green"></div>
    	<div id="blue"></div>
    </div>
    
    <div id="pink"></div>
</body>
</html>

'KITRI 교육 > HTML,CSS,JS (KITRI 교육)' 카테고리의 다른 글

JavaScript (Core, Function, Event, Form) (1)	2020.06.04
CSS (3) (Overflow, Colorzilla, Layout 연습) (0)	2020.06.01
CSS (1) (Selector, Multimedia, Inherit, Attribute, Board) (0)	2020.06.01
HTML(Hyper Text Markup Langunage) 이란? (1)	2020.05.31

벨플의 즐거운 개발

CSS (2) (Guest, Filter, URL, Display, Opacity)

'KITRI 교육 > HTML,CSS,JS (KITRI 교육)' 카테고리의 다른 글

+ Recent posts

티스토리툴바