0. 목차
1. header, div 등 구역의 중요성
<!DOCTYPE html>
<html lang="en">
<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>카카오톡 소셜</title>
</head>
<body>
<!--
1) 관련있는 태그끼리는 한 번 더 묶어준다.
2) 나중에 콘텐츠를 옮겨야 할 경우 횟수를 줄이도록 구성한다.
-->
<header>
<h2>친구</h2>
<nav>
<ul>
<li>검색</li>
<li>추가</li>
<li>음악</li>
<li>설정</li>
</ul>
</nav>
</header>
<article>
<div>
<img src="https://via.placeholder.com/50x50">
<div>
<h3>지은</h3>
<p>inspiring day</p>
</div>
</div>
</article>
<hr>
<article>
<ul>
<li>
<div>
<img src="https://via.placeholder.com/50x50">
<div>
<h3>김민호</h3>
<p>Minho Kim</p>
</div>
</div>
</li>
<li>
<div>
<img src="https://via.placeholder.com/50x50">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</div>
</li>
</ul>
</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>w3</title>
</head>
<body>
<header>
<h1><a href="#">W3 schools</a></h1>
<nav>
<li><a href="#">Tutorials</a></li>
<li><a href="#">References</a></li>
<li><a href="#">Exercises</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Pro new</a></li>
</nav>
<div>
<ul>
<li>mode</li>
<li>번역</li>
<li>검색</li>
</ul>
</div>
<div>
<a href="#">Website</a>
<a href="#">Paid Courses</a>
</div>
<div>
<a href="#">Log in</a>
</div>
</header>
<section>
<div>
<h2>Learn to Code</h2>
<h3>With the world's largest web developer site.</h3>
<input type="text" autocomplete="false">
<button type="button"><img src="#"></button>
<h4><a href="#">Not Sure Where To Begin?</a></h4>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>네이버 뉴스</title>
</head>
<body>
<div><!-- 뉴스의 전체 묶음 -->
<div><!-- 왼편 이미지 기사 -->
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
</a>
<a href="#">
<p>원주에 마련된 시인 김자하의 빈소[포토타임]</p>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
</a>
<a href="#">
<p>원주에 마련된 시인 김자하의 빈소[포토타임]</p>
</a>
</li>
</ul>
</div>
<div> <!-- 오른쪽 테스트 기사 -->
<div>
<a href="#"><span>한동훈 "정의와 상식의 법치"</span></a>
<a href="#"><span>'만병의 근원' 염증</span></a>
<a href="#"><span>이준석 "한동훈 딸 대필 의혹?"</span></a>
</div>
<div>
<a href="#"><span>한동훈 "정의와 상식의 법치"</span></a>
<a href="#"><span>'만병의 근원' 염증</span></a>
<a href="#"><span>이준석 "한동훈 딸 대필 의혹?"</span></a>
</div>
<div>
<ul>
<li><a href="#"><span>한동훈 "정의와 상식의 법치"</span></a></li>
<li><a href="#"><span>'만병의 근원' 염증</span></a></li>
<li><a href="#"><span>이준석 "한동훈 딸 대필 의혹?"</span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>네이버 레시피</title>
<style>
/* @import "./css/style.css" */
@import url("css/style.css");
</style>
</head>
<body>
<article>
<h2>레시피</h2>
<ul>
<li>
<a href="https://via.placeholder.com/300x200">
<div>
<em>[푸드클래스]이진형 셰프</em>
<h3>원조 파니니의 맛, 직접 만들 수 있어요</h3>
<p>바삭바삭한 빵 속에 준비한 재료 가득<br>
파니니의 원조</p>
<div>
<span>#다이어트</span>
<span>#샌드위치</span>
</div>
</div>
</a>
</li>
</ul>
</article>
</body>
</html>2. CSS(1)
<!DOCTYPE html>
<html lang="en">
<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 {
color: blue;
background-color: aliceblue;
}
p {
color: brown;
}
em {
font-size: 25px;
}
</style>
</head>
<!--
[CSS3 규칙]
1) 상속 : 부모태그로부터 상속(자신을 둘러싼 태그)
2)
-->
<body>
<h3>부모 스타일 상속</h3>
<hr>
<p>웹 문서의 내용과 디자인을 분리한다.</p>
<p><em>HTML</em>은 문서의 내용이고 <em>CSS</em>는 문서의 표현을 담당한다.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>CASCADE</title>
<!--
캐스케이딩 : 위에서 아래로 흐른다.
같은 태그에 여러 가지 스타일시트가 적용될 때 스타일이
합쳐져서 적용됨(부모가 아니더라도)
하나의 태그에 서로다른 CSS값을 적용하다보면 충돌 발생하기도함
-->
<style>
p {
color: brown;
font-size: 12px;
}
</style>
</head>
<body>
<p style="font-size: 25px;">동시에 적용</p>
<p>다르게 적용된다.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>OVERRIDING</title>
<!--
오버라이딩(overriding) : 덮어쓰기.
동일한 CSS 프로퍼티에 서로 다른 값은 설정하는 충돌 시
우선순위가 높은 스타일을 적용하는 규칙
[기준]
1) 스타일 우선순위(importance, Specificity, order)
1> (제일 중요)사용자(클라이언트) 스타일시트 : ex.색맹을 위한 고대비설정을 무시할수는 없음
2> !important - 어떤 스타일보다 우선 적용(css에 적으면 바로 적용됨)
3> 일반 스타일시트
4> 기본 브라우저 스타일 : ex.텍스트는 기본적으로 black 이다.
(우선순위)
(높음)inline > id > class > tag
2) 스타일 상속
-->
<style>
p {
background-color: red /*!important*/;
}
.myclass {
background-color: gray;
}
#myid {
background-color: blue;
}
h2 {
color: brown;
}
h2 {
color: blueviolet; /* 똑같은 태그에 똑같은 프로퍼티 적용이라도 제일 최근 작성한게 적용됨 */
}
</style>
</head>
<body>
<p>스타일 우선순위</p>
<p class="myclass">!important</p>
<p id="myid">일반 스타일시트</p>
<p class="myclass">우선순위를 작성해보자.</p>
<!-- 클래스는 중복사용 가능! -->
<!-- <p id="myid">id를 중복사용해보자</p> (id는 중복사용해서는 안된다 class만 가능)-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>샘플</title>
<style>
h3, li {
color: blue;
}
li {
font-size: 20px;
}
body.main{
background-color: aliceblue;
}
div.notice {
color: red;
}
div ul#list {
background-color: mistyrose;
}
div > strong, li > strong{
color: dodgerblue; /* > 는 상속관계를 나타냄 __ 부모 > 자식 */
}
div > ul > li > strong {
color: dodgerblue; /* 자식 관계 */
}
body strong {
color: green; /* 자손 관계(2단계 까지만) */
}
</style>
</head>
<body class="main">
<h3><strong>Web</strong> Programming</h3>
<hr>
<div>
<div>5월 <strong>학습 내용</strong></div>
<ul id="list">
<li class="notice">HTML</li>
<li><strong>CSS</strong></li>
<li>Javascript</li>
</ul>
<div class="notice">
월~금: 10시 ~ 1시
</div>
</div>
</body>
</html>3. 기록해두는 중요 내용!!!
- inline 이라는 의미가 태그에 style 바로 작성하는것
- 우선순위 최상위 포지션
- CASCADE
- 같은 태그에 여러 가지 스타일시트가 적용될 때 스타일이
합쳐져서 적용됨(부모가 아니더라도)
하나의 태그에 서로다른 CSS값을 적용하다보면 충돌 발생하기도함
- 같은 태그에 여러 가지 스타일시트가 적용될 때 스타일이
- sector, nav, main, article, aside 태그 있는거 몰랐음
- div 사용을 최대한 줄일 수 있겠군!
- OVERRIDING
- 오버라이딩(overriding) : 덮어쓰기.
동일한 CSS 프로퍼티에 서로 다른 값은 설정하는 충돌 시
우선순위가 높은 스타일을 적용하는 규칙 - 스타일 우선순위(importance, Specificity, order)
1> (제일 중요)사용자(클라이언트) 스타일시트 : ex.색맹을 위한 고대비설정을 무시할수는 없음
2> !important - 어떤 스타일보다 우선 적용(css에 적으면 바로 적용됨)
3> 일반 스타일시트
4> 기본 브라우저 스타일 : ex.텍스트는 기본적으로 black 이다. - 스타일 상속
(우선순위 높음)inline > id > class > tag
- 오버라이딩(overriding) : 덮어쓰기.
<a href="https://via.placeholder.com/300x200"> <!-- 이런식으로 이미지 사이즈 기록하는 방법 div > strong, li > strong{
color: dodgerblue; /* > 는 상속관계를 나타냄 __ 부모 > 자식 */
}body strong {
color: green; /* 자손 관계(2단계 까지만) */
}4. 한줄 후기
- 이전에 미리 공부해둔 부분이긴했는데, 따로 기록해둔 바 없어서 기록하는 하루!
필요하다면 공부하는 개발자, 한승준