반응형
CSS: html문서의 레이아웃, 색깔 등을 변경, 설정할 때 쓰임
선택자
특정 태그를 선택하여, 해당 태그의 속성을 변경 하는 목적으로 사용됨=>CSS 사용 전체 이유
tag 선택자
tag를 선택하면 태그 선택자, 특정태그를 선택하여 CSS 속성을 적용할 수 있음
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
div {
background-color: #ffd800;
border: 5px solid #afffff;
}
</style>
</head>
<body>
<h1>제목 입니다.</h1>
<p>본문 입니다.</p>
<div>
<h1>제목입니다.</h1>
<p>본문입니다.</p>
</div>
</body>
</html>
head 태그에다가 <style></style>넣어서 css적용
div{}: 선택자=>div를 선택함
background-color: 배경색
font-weight: 글씨 두께
-bold: 두껍게
border: 테두리
-solid, dash red 등으로 선 종류와 색깔을 바꿀 수 있음
자세한 내용을 보고 싶다면↓
더보기
https://developer.mozilla.org/ko/docs/Web/CSS/border
border - CSS: Cascading Style Sheets | MDN
border: solid; border: 2px dotted; border: outset #f33; border: medium dashed green; border: inherit; border: initial; border: unset; border 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을
developer.mozilla.org
더보기
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
div {
background-color: #ffd800;
border: 5px solid #afffff;
}
h1 {
background-color: aqua;
border-bottom: 5px solid azure;
}
</style>
</head>
<body>
<h1>제목 입니다.</h1>
<p>본문 입니다.</p>
<div>
<h1>제목입니다.</h1>
<p>본문입니다.</p>
</div>
</body>
</html>
div 처럼 h1도 설정 변경 가능
더보기
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
div {
background-color: #ffd800;
border: 5px solid #afffff;
}
h1 {
background-color: aqua;
border-bottom: 5px solid azure;
}
li {
color: #07916e;
}
</style>
</head>
<body>
<h1>제목 입니다.</h1>
<p>본문 입니다.</p>
<div>
<h1>제목입니다.</h1>
<p>본문입니다.</p>
</div>
<ul>
<li>안녕</li>
<li>Hi</li>
<li>Hello</li>
</ul>
</body>
</html>
li 태그 선택자
더보기
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
li,
p,
h1 {
background-color: #ffd800;
border: 5px solid #afffff;
}
h1 {
background-color: rgb(3, 255, 87);
border-bottom: 5px solid rgb(255, 0, 85);
}
p {
color: #07916e;
}
</style>
</head>
<body>
<header>
<h1>주식회사</h1>
</header>
<nav>
<ul>
<li>회사소개</li>
<li>제품소개</li>
<li>고객센터</li>
<li>공지사항</li>
</ul>
</nav>
<section>
<p>
우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
</p>
</section>
<footer>
<p>서울시 oo구 oo동 oo빌딩</p>
</footer>
</body>
</html>
코드를 볼 때 h1이 위 아래 중복이 되는데 중복되는 부분은 아래 것이 우선적으로 보여짐
* 선택자(전체 선택자)
전체라는 의미의 *선택자를 사용하면 문서 전체를 선택하는 의미가 있다
문법:
<style>
* {
color: #00d0ff;
}
</style>더보기
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* {
color: #ff0000;
background-color: blueviolet;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<header>
<h1>주식회사</h1>
</header>
<nav>
<ul>
<li>회사소개</li>
<li>제품소개</li>
<li>고객센터</li>
<li>공지사항</li>
</ul>
</nav>
<section>
<p>
우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
</p>
</section>
<footer>
<p>서울시 oo구 oo동 oo빌딩</p>
</footer>
</body>
</html>
전체와 특정태그의 혼합
전체적으로 속성을 설정한 다음 특정 태그의 속성을 변경함
더보기
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
li,
p,
h1 {
background-color: #ffd800;
border: 5px solid #afffff;
}
h1 {
background-color: rgb(3, 255, 87);
border-bottom: 5px solid rgb(255, 0, 85);
}
p {
color: #07916e;
}
* {
color: #ff0000;
}
</style>
</head>
<body>
<header>
<h1>주식회사</h1>
</header>
<nav>
<ul>
<li>회사소개</li>
<li>제품소개</li>
<li>고객센터</li>
<li>공지사항</li>
</ul>
</nav>
<section>
<p>
우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
</p>
</section>
<footer>
<p>서울시 oo구 oo동 oo빌딩</p>
</footer>
</body>
</html>
전체 선택자와 태그 선택자가 겹칠 경우 태그 선택자를 위주로 보여줌
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
li,
p,
h1 {
background-color: #ffd800;
border: 5px solid #afffff;
}
h1 {
background-color: rgb(3, 255, 87);
border-bottom: 5px solid rgb(255, 0, 85);
}
p {
color: #07916e;
}
* {
color: #ff0000;
background-color: blueviolet;
}
</style>
</head>
<body>
<header>
<h1>주식회사</h1>
</header>
<nav>
<ul>
<li>회사소개</li>
<li>제품소개</li>
<li>고객센터</li>
<li>공지사항</li>
</ul>
</nav>
<section>
<p>
우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
</p>
</section>
<footer>
<p>서울시 oo구 oo동 oo빌딩</p>
</footer>
</body>
</html>
전체 선택자에 margin, padding 추가
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
li,
p,
h1 {
background-color: #ffd800;
border: 5px solid #afffff;
}
h1 {
background-color: rgb(3, 255, 87);
border-bottom: 5px solid rgb(255, 0, 85);
}
p {
color: #07916e;
}
* {
color: #ff0000;
background-color: blueviolet;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<header>
<h1>주식회사</h1>
</header>
<nav>
<ul>
<li>회사소개</li>
<li>제품소개</li>
<li>고객센터</li>
<li>공지사항</li>
</ul>
</nav>
<section>
<p>
우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
</p>
</section>
<footer>
<p>서울시 oo구 oo동 oo빌딩</p>
</footer>
</body>
</html>
margin: 바깥쪽 여백
padding: 안쪽 여백
+속성:
text-decoration: underline =>글 아래 밑줄
반응형