개발(Web)/Web

[CSS] CSS 기초 30분 요약

shinyelee 2021. 1. 31. 22:31

Learn the basics - 제주 코딩 베이스 캠프 30분 요약 시리즈

001.css

h1 {
	color:red
}

001.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="001.css">
</head>
<body>
	<h1>외부 CSS</h1>
	<h1 style="color:blue;">인라인 CSS</h1>
</body>
</html>


002.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1, h2, h3 {
	color: skyblue;
}
</style>
<!-- h1, h2, h3는 선택자(selector)
	 color는 속성(property)
	 skyblue는 값(value) -->
</head>
<body>
	<h1>hello world</h1>
	<h2>hello world</h2>
	<h3>hello world</h3>
	<h4>hello world</h4>
	<h5>hello world</h5>
	<h6>hello world</h6>
</body>
</html>


003.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {color: red;}
h2 {color: blue;}
.one {color: green;}
.two {border: solid 1px black;}
#three {font-style: italic;}
#four {color: black;}
</style>
<!-- * 범용 선택자
	 h2 타입 선택자
	 . 클래스 선택자
	 # 아이디 선택자 -->
</head>
<body>
	<h1>범용 선택자 *</h1>
	<h2>타입 선택자 h2</h2>
	<h3>범용 선택자 *</h3>
	<p>범용 선택자 *</p>
	<p class="one">클래스 선택자 .one</p>
	<p class="two">클래스 선택자 .two</p>
	<p class="one two">클래스 선택자(class끼리 중첩 가능) .one two</p>
	<p id="three">아이디 선택자 #three</p>
	<p id="four">아이디 선택자 #four</p>
	<p id="three four">아이디 선택자(id끼리 중첩 불가) #three four</p>
</body>
</html>


004.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.one {font-size: 32px;}
.two {font-size: 2em;}
.three {font-weight: normal;}
div {font-size: 16px;}
.box-one {
	width: 40vw;
	height: 30vh;
	background-color: green;
}
.box-two {
	width: 200px;
	height: 100px;
	background-color: red;
}
</style>
</head>
<body>
	<p class="one">class one / font-size 32px</p>
	<p class="two">class two / font-size 2em</p>
	<h1 class="three">class three / font-weight normal</h1>

	<div>
		<p class="box-one">창 크기 기준 퍼센트 단위</p>
		<p class="box-two">픽셀 단위</p>
	</div>
</body>
</html>


005.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {color: white;}
.one {
	width: 200px;
	height: 200px;
	background-color: red;
	padding: 20px;
	border: solid 20px black;
}
.two {
	width: 200px;
	height: 200px;
	background-color: red;
	padding: 20px;
	border: solid 20px black;
	box-sizing: border-box;
}
.three {
	width: 200px;
	height: 200px;
	background-color: green;
	margin: 20px;
	border: solid 20px black;
	border-radius: 20px;
}
.four {
	width: 200px;
	height: 200px;
	background-color: blue;
	border: solid 20px black;
	opacity: 0.5;
}
.five {
	width: 200px;
	height: 200px;
	background-color: yellow;
	border: dotted 20px black;
}
</style>
</head>
<body>
	<div class="one">
		padding 20px<br>
		때문에 넓어짐<br>
		(200+20)*(200+20)
	</div>
	
	<div class="two">
		사각형이 넓어지는게 싫다면?<br>
		box-sizing: border-box;로<br>
		200*200 안에서 해결 가능
	</div>
	
	<div class="three">
		margin은 넓이에<br>
		포함되지 않음<br>
		radius 둥글게
	</div>
	
	<div class="four">
		padding, margin 미적용<br>
		opacity 투명도
	</div>
	
	<div class="five">
		padding, margin 미적용<br>
		dotted 점선
	</div>
	<p>border 속성은 이 외에도 double, dashed, groove, ridge, inset, outset 등 다양함</p>
</body>
</html>


006.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.container {
	width: 600px;
	height: 600px;
	background-color: skyblue;
	position: relative;
	top: 10px;
	left: 10px;
}
.one {
	width: 100px;
	height: 100px;
	background-color: red;
	position: absolute;
	margin: -50px;
	top: 50%;
	left: 50%;
}
.two {
	width: 100px;
	height: 100px;
	background-color: blue;
	position: absolute;
	top: 30px;
	left: 30px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="one"></div>
		<div class="two"></div>
	</div>
	
	<p>
		위치 기준점 정할 때<br>
		absolute는 절대<br>
		relative는 상대
	</p>
	
	<p>
		.center {<br>
		width: 100px;<br>
		height: 100px;<br>
		background-color: yellow;<br>
		position: absolute;<br>
		top: 0;<br>
		bottom: 0;<br>
		left: 0;<br>
		right: 0;<br>
		margin: auto;<br>
		}<br>
		이런 식으로 설정하면 화면 크기에 맞춰서 가운데로 자동정렬됨
	</p>
</body>
</html>


007.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@800&display=swap" rel="stylesheet">
<style>
	h1 {font-family: 'Nanum Myeongjo', serif;}
</style>
</head>
<body>
	<h1>구글폰트 나눔명조 적용하기</h1>
</body>
</html>


008.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.black {
	width: 100px;
	height: 100px;
	background-color: #000000;
	color: #ffffff;
	border: solid 1px black; 
}
.white {
	width: 100px;
	height: 100px;
	background-color: #ffffff;
	border: solid 1px black; 
}
.gray {
	width: 100px;
	height: 100px;
	background-color: #333333;
	color: #ffffff;
	border: solid 1px black; 
}
.red {
	width: 100px;
	height: 100px;
	background-color: #ff0000;
	border: solid 1px black; 
}
.green {
	width: 100px;
	height: 100px;
	background-color: #00ff00;
	border: solid 1px black; 
}
.blue {
	width: 100px;
	height: 100px;
	background-color: #0000ff;
	color: #ffffff;
	border: solid 1px black; 
}
.one {
	width: 100px;
	height: 100px;
	background-color: #FFB6C1;
	border: solid 1px black; 
}
.two {
	width: 100px;
	height: 100px;
	background-color: Beige;
	border: solid 1px black; 
}
</style>
</head>
<body>
	위치별로 빨빨초초파파, 빛의 삼원색 생각하면 됨
	<div class="black">#000000<br>zero*6<br>검정색</div>
	<div class="white">#ffffff<br>full*6<br>흰색</div>
	<div class="gray">#333333<br>중간*6<br>회색</div>
	<div class="red">#ff0000<br>빨빨없없없없<br>빨강</div>
	<div class="green">#00ff00<br>없없초초없없<br>초록</div>
	<div class="blue">#0000ff<br>없없없없파파<br>파랑</div>
	<div class="one">#FFB6C1<br>color value</div>
	<div class="two">Beige<br>color name</div>
</body>
</html>


출처

반응형