20210630

choigyeongshin·2021년 6월 30일

학습한 내용

css

학습내용 중 어려웠던 점

해결방법

학습소감

학습한 내용

css

index.html

<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">

    <!--
	<style>
	    h1 {
	    	color: red;
	    }	
	</style>
    -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

    <!--
    <h1 style="background-color: pink;">Hello world</h1>
    -->


    <!--
    <header>
    	<h1>header h1</h1>
    	<p>header p</p>
    	<a href="#">네이버</a>
    </header>

    <footer>
    	<h1>footer h1</h1>
    	<p>footer p</p>
    </footer>
    -->



    <!--
    <h1>Hello world</h1>
    <h2 id="test1">Nice to meet you</h2>
    <h3 class="test2">Welcome</h3>


    <input type="text" placeholder="이름">
    <input type="password" placeholder="비밀번호">
    -->


    <!--
    <h2 id="color-1">ID 선택자</h2>
    <h3 class="bg-1 font-size-1">Class 선택자</h3>



    <p class="bg-1">Welcome</p>

    <h4 id="color-1"></h4>
    -->



    <!--
    <header id="intro">
    	<div class="container">
    		<h2>header h2</h2>
    		<p>header p</p>
    	</div>
    </header>

    <p>Out p</p>
    -->


    <!-- style 속성 > id > class > tad -->
    <!--
    <h1 style="color: gray;" id="color-2" class="color-1">Hello world</h1>
    -->

    <!--
    <header id="intro">
    	<div class="container">
    		<h1>header h1</h1>
    	</div>
    </header>
    -->


    
    <!--
    <div>
    	<h1>Nice</h1>
    	<ul>
    		<li>메뉴1</li>
    		<li>메뉴2</li>
    	</ul>
    </div>
    -->

    <!--
    <div id="bg"></div>


   <img src="icon.png"
   width="100px" height="50px" alt="네이버 로고">
   -->



</body>
</html>

style.css

/*
h1 {
	font-size: 80px;
}
*/




/*
header {
	color: red;
}

header h1,
footer h1 { 
	color: blue;
}

header p,
footer p {
	color: green;
}
*/

/*
footer h1 {
	color: blue;
}

footer p {
	color: green;
}
*/



/*
h1 {
	color: red;
}

#test1 {
	color: blue;
}

.test2 {
	color: green;
}

input[type="text"] {
	border: solid 10px red;
}

input[type="password"] {
	border: solid 10px blue;
}
*/




/*
.bg-1 {
	background-color: red;
}

.font-sise-1 {
	font-size: 50px;
}

#color-1 {
	color: red;
}

#font-stlye-1 {
	font-style: italic;
}
*/



/*
#intro h2 {
	color: red;
}

#intro .container p {
	color: blue;
}
*/

/*
#color-2 {
	color: pink;
}

.color-1 {
	color: green;
}

h1 {
	color: red;
}

h1 {
	color: blue;
}
*/

/*
#intro .container h1 {
	color: pink;
}

#intro div h1 {
	color: green;
}


#intro h1 {
	color: blue;
}

header h1 {
	color: red;
}
*/





/*
div {
	width: 100%;
	height: 300px;
	min-width: 600px;
	max-width: 800px;

	border: solid 10px red;
	border-radius: 50px;

	background-color: yellow;

	opacity: 1;
}

h1 {
	color: blue;
	font-size: 80px;
	font-style: initial;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	text-decoration: line-through;
	text-align: right;

	background-color: pink;
}

ul {
	list-style: none;
}
*/

/*
#bg {
	width: 256px;
	height: 256px;
	background-color: yellow;
	background-image: url(icon.png);
	background-repeat: no-repeat;
	background-position: top left;
}
*/