728x90
반응형
<목차>
1) CSS
1-1) 기본 문법
1-2) 선택자 / 선택자 우선순위
1-3) 텍스트
1-4) 목록
1-5) 자손 선택자
1-6) 박스 모델
1) CSS
1-1) 기본 문법
01.CSS 기본문법.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css_folder/style01.css" />
<title>CSS 기본문법</title>
<!--
CSS
CSS(Cascading Style Sheets)는 HTML이나 XML로
작성된 문서의 시각적 표현을 정의하는 스타일 시트 언어.
CSS를 사용하면 웹 페이지의 레이아웃, 색상, 글꼴 등을
쉽게 조정할 수 있으며, 일부 CSS 속성은 부모 요소로부터
자식 요소에 상속이 가능하다.
선택자 {
스타일 속성 : 속성 값
}
스타일을 적용하는 방법
1. 인라인 방식(직접 태그 안에 style 속성에 접근)
2. <head> 태그의 <style> 태그 내에서 선택자로 접근
3. 외부파일로부터 선택자로 접근
-->
<style>
body {
background-color: beige;
}
h1 {
font-size: 50px;
color: pink;
}
</style>
</head>
<body>
<h1>내부 Stylesheet</h1>
<h2>내부 Stylesheet</h2>
<h3 style="font-size: 80px; color: red">인라인 Style</h3>
</body>
</html>
style01.css
h2 {
font-size: 100px;
color: blue;
}
1-2) 선택자 / 선택자 우선순위
02.CSS 선택자.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 선택자</title>
<style>
/* 태그 선택자 - 특정 태그를 사용한 요소에 스타일 적용 */
p {
text-align: center;
color: red;
}
/* 아이디 선택자 - 특정 부분에 스타일 적용 */
#pid {
text-align: left;
color: green;
}
/* 클래스 선택자 - 특정 부분에 스타일 적용 */
.pclass {
text-align: right;
color: yellow;
}
/* 그룹 선택자 - 둘 이상 요소에 같은 스타일 적용 */
p,
h1 {
color: red;
}
/* 자손(자식, 손자 포함) 선택자 */
p b {
color: blue;
}
/* 전체 선택자 - 모든 요소에 스타일 적용 */
* {
font-size: 25px;
line-height: 35px;
}
/* 속성 선택자 */
input[type="text"] {
background-color: cadetblue;
}
</style>
</head>
<body>
<p>
동해물과 백두산이 <b>마르고</b>닳도록
<span><b>하느님</b>이 보우하사</span>
우리나라 만세
</p>
<p id="pid">HTML은 재밌다</p>
<p class="pclass">CSS도 재밌다</p>
<div class="pclass">JavaScript도 재밌다</div>
<h1>프로그래밍 언어</h1>
<p>HTML 시험 준비</p>
INPUT 태그 : <input type="text" size="20" />
</body>
</html>
03.CSS 선택자 우선순위.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 선택자 우선순위</title>
<!--
CSS 선택자
1. 태그
2. 아이디
3. 클래스
4. 연결선택자(부모와 자식, 자손, 이웃, 인접)
>, +, ~ // p > b {} : p 태그의 자식 요소 중 b 태그에 스타일을 적용할 때 사용함!
5. 속성선택자(해당 속성을 가지고 있는 태그에 접근)
6. 가상선택자
a: hover {}
CSS 적용 우선순위
1. !important
!important 키워드는 우선순위를 무시하고 해당 스타일을 강제로 적용
2. 인라인 - 1000
3. 아이디 선택자(#) - 100
4. 클래스 선택자(.) - 10
5. 태그 선택자 - 1
...
-->
<style>
body {
color: blueviolet;
font-size: 30px;
}
h1 {
color: red;
/* !important */
}
.text {
color: blue;
}
#text {
color: green;
}
</style>
</head>
<body>
<h1>CSS 적용 우선순위 - 태그</h1>
<h1 class="text">CSS 적용 우선순위 - 클래스</h1>
<h1 id="text" class="text">CSS 적용 우선순위 - 아이디</h1>
<h1 style="color: yellow; font-size: 20px">CSS 적용 우선순위 - 인라인</h1>
<h1>CSS 적용 우선순위 - !important</h1>
</body>
</html>
1-3) 텍스트
04.CSS 텍스트.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- web font -->
<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=Gamja+Flower&display=swap"
rel="stylesheet"
/>
<title>텍스트 서식</title>
<style>
/*
font-size : 텍스트 크기
font-weight : 글자의 두께 100 ~ 900, bold(700),
bolder, lighter, normal(400)
font-family : 글꼴 지정
font-style : 문자 스타일(normal, italic)
color : 글꼴의 색상 지정
text-decoration : 텍스트의 줄 표시 / 제거
text-transform : 대소문자 변환
text-shadow : 텍스트 그림자 효과
*/
body {
color: blueviolet;
font-family: 궁서;
font-style: italic;
}
a {
color: brown;
/* text-decoration: line-through --> 취소선을 표시해줌 */
text-decoration: line-through;
}
h1 {
font-size: 16px;
font-weight: bolder;
}
p.copy {
text-transform: capitalize;
text-align: center;
text-shadow: 1px 1px blue;
}
#pid {
font-family: Gamja Flower;
}
</style>
</head>
<body>
<h1>CSS 서식 관련 속성</h1>
<a href="">네이버 바로가기</a>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
<p class="copy">copyright all reserved by scit 2024</p>
<p id="pid">Web font - 사용하기</p>
</body>
</html>
※ 위의 Web Font 출처 : Google Fonts
1-4) 목록
05.CSS 목록.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>목록 서식</title>
<style>
.menu {
list-style: none;
}
/*
::before
::after
텍스트, 이미지, 속성을 삽입할 수 있음
HTML 구조를 변경하지 않고도 추가 컨텐츠를
삽입하고 스타일을 적용시키는 키워드
*/
.menu li::before {
content: "👍 ";
}
.menu li::after {
content: " :after";
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<ul class="menu">
<li>menu-1</li>
<li>menu-2</li>
<li>menu-3</li>
<li>menu-4</li>
<li>menu-5</li>
</ul>
</body>
</html>
1-5) 자손 선택자
06.CSS 자손 선택자.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 자손 선택자</title>
<style>
.box {
border: 10px solid red;
width: 400px;
height: 400px;
}
/* 자식 선택자만 */
.box > div {
border: 10px solid blue;
width: 200px;
height: 200px;
}
/* 자식 선택자의 자손 */
.box > div div {
border: 10px solid green;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!-- div : 영역을 만들어주는 태그 -->
<div class="box">
<div>
<div></div>
</div>
</div>
</body>
</html>
1-6) 박스 모델
07.CSS 박스모델.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>박스모델</title>
<style>
/*
border-style : 테두리의 스타일을 지정
속성값: solid, dashed, dotted, double, ...
border-width : 테두리의 두께를 지정
border-color : 테두리의 색깔을 지정
border : 한 번에 모든 테두리의 속성을 할당
*/
.box {
border-width: 10px;
border-style: solid;
border-color: violet;
/* border: 1px solid violet;은 위의 코드와 동일한 역할을 함! */
width: 400px;
height: 400px;
border-bottom: 10px dotted black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
08.CSS 박스모델(radius).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>박스모델(border-radius)</title>
<style>
div {
border: 10px solid black;
width: 200px;
height: 200px;
}
/*
border-radius : 테두리를 둥글게 처리
top-left, top-right, bottom-right, bottom-left
*/
.box1 {
border-radius: 20px;
background-color: aqua;
}
.box2 {
border-radius: 10%;
background-color: beige;
}
.box3 {
border-radius: 5px 10px 20px 30px;
background-color: lightcoral;
}
.box4 {
border-radius: 10px 30px;
background-color: lightgreen;
}
.box5 {
border-radius: 100px 100px 100px 0;
background-color: lightpink;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</body>
</html>
09.CSS 박스모델(padding, margin).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>박스모델(padding, margin)</title>
<style>
/*
padding, margin 속성의 크기 지정
1. 한 개의 값을 지정 : 4개의 동일한 크기 값 적용
2. 두 개의 값을 지정 : 위쪽 및 아래쪽, 왼쪽 및 오른쪽 적용
3. 네 개의 값을 지정 : top, right, bottom, left 순서로 적용
*/
.heading {
border: 5px solid red;
width: 300px;
text-align: center;
padding: 10px;
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<h1 class="heading">박스모델</h1>
<h1 class="heading">박스모델</h1>
</body>
</html>
10.CSS 박스모델(box-sizing).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>박스모델(box-sizing)</title>
<style>
.box {
border: 1px solid red;
text-align: center;
width: 400px;
height: 100px;
padding: 20px;
font-size: 50px;
box-sizing: content-box;
}
/*
box-sizing은
요소의 너비와 높이를 계산하는 방법을 지정
content-box(기본값)
width와 height가 컨텐츠 영역의 크기를 정의.
padding과 border는 이 크기에 추가.
border-box
width와 height가 컨텐츠, 패딩, 테두리까지
포함한 요소의 전체 크기를 정의.
따라서 요소의 총 크기는 항상 지정한
width와 height 값과 일치.
*/
</style>
</head>
<body>
<div class="box">박스모델</div>
</body>
</html>
※ F12 : Chrome 개발자 도구 실행 단축키
'HTML & CSS > HTML & CSS(2024 version)' 카테고리의 다른 글
| CSS(2) - inline / block / inline-block 요소, 배치, 메뉴 만들기, 시맨틱 태그 (0) | 2024.05.31 |
|---|---|
| HTML(3) - form, input 태그 종류 (0) | 2024.05.29 |
| HTML(2) - 이미지, 텍스트, 테이블 관련 태그 (0) | 2024.05.28 |
| HTML(1) - WEB, HTML 개념 및 구조 (0) | 2024.05.27 |
