class
여러 태그 재사용 가능
겹치기 가능
<head>부분
<style> 안
태그.클래스이름{
해당 클래스만 적용
}<body>안
<태그 class="클래스명">으로 클래스 지정 .class이름
해당 클래스명을 가진 태그에 모두 스타일 지정
원문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">">
<title>Css Class</title>
<!-- class 화 - 태그.클래스명/<태그 class="클래스명"> 으로 연동 -->
<style>
p{
font-family: 'Cute Font';
font-size: 25px;
width: 800px;
}
/* class . 으로 구분 */
p.txt1{
background-color: bisque;
/* 내부전체 공간 주는 것 */
padding: 20px;
}
p.txt2{
background-color: aquamarine;
/* top부터 내부에 시계방향으로 공간 */
padding: 10px 20px 30px 40px;
}
p.txt3{
background-color: cadetblue;
/* 바깥 공간 전부 공간 */
margin: 40px;
/* 글 정렬 */
text-align: center;
}
p.txt4{
background-color: brown;
}
</style>
</head>
<body>
<h1>반려동물</h1>
<h2>반려동물: 우린 왜 고양이를 까칠하다고 생각할까?</h2>
<p class="txt1">
개들은 속마음을 생물학적으로 거의 숨기지 못하는 존재처럼 보인다. 땅을 헤집고 킁킁거리고 꼬리를 흔드는 행동을 통해 만족감, 초조함 또는 순수하고도 꾸밈없는 기쁨 등을 표현한다.
</p>
<h2>"이건 기사에 쓰지 말라" 반려동물 판매업자 뜻밖의 제안 [현장에서]</h2>
<p class="txt2">
지난 2일 경찰과 동물보호단체가 들이닥친 전북 진안의 ‘강아지공장’과 지난 13일 찾은 충남 금산의 A 반려견 농장은 극과 극의 환경이었다. 역한 냄새 때문에 숨을 쉬기 어려울 정도였던 강아지공장에선 강제 임신에 사용하는 도구와 강아지 사체를 태운 흔적 등이 발견됐다. 반면 A농장에선 막 태어난 새끼들이 보송하게 빨아놓은 이불 위에서 어미젖과 이유식을 먹으며 새 가족을 기다리고 있었다. A농장의 주인 윤모씨는 유기된 시츄 한 마리를 구해온 게 사업 시작의 계기였다고 했다. “잠도 못 잘 정도로 강아지가 예뻐서” 펫숍을 차렸고, 7년 뒤 몰티즈만 키우는 농장을 꾸린 것이다. 윤씨는 “양심이 있어야 할 수 있는 직업”이라고 말했다.
</p>
<h2>반려동물 관리사 꿈을 향해 '변신'</h2>
<p class="txt3">
[대전시교육청 교육기부 공동캠페인]
우송정보대 '나는 반려동물 관리사다' 프로그램
훈련 커리큘럼·미용 실습 등 진로체험 기회 제공
</p>
<h2>"넓은 바닷가 시원한 파도소리"... 반려견과 떠나는 강릉 해변</h2>
<p class="txt4">
마음이 답답해 힐링이 절실한 날, 보기만 해도 행복해지는 반려견과 함께 동해바다로 훌쩍 떠나보는 건 어떨까?
최근 반려동물과 함께 여행하는 반려인들이 늘어나 강원도 강릉의 청량한 바다가 큰 인기를 끌고 있으며, 바닷가 근처에 반려동물 동반 입장이 가능한 식당과 카페도 눈에 띄게 많아졌다.
</p>
</body>
</html>css 링크
css 링크방법
<link rel="stylesheet" href="../css/style1.css">figure
figure 그림 아래 글씨를 넣게 해준다
그래서 figure 안에 img와 figcaption
figcaption은 figure 안에서만 사용 가능
<figure>
<img src="../Food/8.jpg" width="150">
<figcaption><b>클럽샌드위치</b></figcaption>
</figure>div
안에 여러 이미지를 넣고 스타일을 한 번에 줄 수 있음
<div>
<figure>
<img src="../Food/7.jpg" width="150">
<figcaption><b>연근조림</b></figcaption>
</figure>
</div>selector >표시
태그이름>태그이름>태그이름
첫태그 바로 아래 태그이름 바로 아래 태그이름에 스타일지정
selector space 표시
태그이름 태그이름
첫 태그이름 아래 태그에 바로 스타일 지정
css원문
div.a{
font-size: 1.5em;
font-family: 'Cute Font';
}
/* > div.b 바로 아래 */
div.b>figure{ /* figure태그 전체 */
float: left; /* float은 해제하지 않는 한 가로 정렬 */
}
/* div.b 밑에 figure 밑에 img와 figcaption을 가르킴 */
div.b>figure>img{
border: 3px solid green;
/* 왼쪽 상단 모서리부터 시계 방향으로 동그래짐 */
border-radius: 30px 60px 100px 20px;
}
/* div.b 밑에 figure 밑에 figcaption밑에 b태크를 가르킴 */
div.b>figure>figcaption>b{
font-size: 25px;
margin-left: 20px;
font-family: 'Nanum Brush Script';
}
h3.c{
/* float:left 속성을 해제하고 싶다 */
clear: both;
}
div.d{
display: flex;
/* flex안에 속성 row:가로방향(왼쪽정렬) row-reverse:거꾸로출력(우측정렬)
column: 세로방향으로 정렬 */
flex-direction: row-reverse;
}
/* >없이 한칸 띄우면 그 태그 하위 태그 */
div.d img{
border: 2px solid green;
box-shadow: 15px 15px 15px gray;
border-radius: 20px;
width: 100px;
height: 100px;
}
div.d b{
margin-left: 40px;
font-family: 'Cute Font';
color: brown;
}html원문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<!-- css링크 하면 head안에 style해놓은 것처럼 똑같이 작동함 -->
<link rel="stylesheet" href="../css/style1.css"
<title>Document</title>
<!-- style 전부 잘라내서 style1.css에 붙여놓음 -->
</head>
<body>
<!-- hspace 옆으로 공간 띄우는것 -->
<img src="../Food/1.jpg" width="200" border="1" align="left" hspace="20">
<div class="a">java <br>oracle<br>html<br>ajax</div>
<hr>
<div class="b">
<!-- figure 그림 아래 글씨를 넣게 해준다 -->
<!-- 그래서 figure 안에 img와 figcaption -->
<!-- figcaption은 figure 안에서만 사용 가능 -->
<figure>
<img src="../Food/8.jpg" width="150">
<figcaption><b>클럽샌드위치</b></figcaption>
</figure>
<figure>
<img src="../Food/1.jpg" width="150">
<figcaption><b>클럽샌드위치</b></figcaption>
</figure>
<figure>
<img src="../Food/2.jpg" width="150">
<figcaption><b>클럽샌드위치</b></figcaption>
</figure>
<!-- float 해제하려고 클래스 부여 -->
<!-- hr로도 해제 가능 -->
<h3 class="c">안녕?</h3>
</div>
<!-- div 안에 여러 이미지를 넣고 스타일을 한 번에 줄 수 있음 -->
<div class="d">
<figure>
<img src="../Food/7.jpg" width="150">
<figcaption><b>연근조림</b></figcaption>
</figure>
<figure>
<img src="../Food/9.jpg" width="150">
<figcaption><b>연근조림</b></figcaption>
</figure>
<figure>
<img src="../Food/11.jpg" width="150">
<figcaption><b>빙수</b></figcaption>
</figure>
</div>
</body>
</html>css링크 문제
만들어진 스타일 활용
- https://www.w3schools.com/bootstrap/bootstrap_ver.asp
사이트 접속 - b3 b4 b5 선택
- 필요한 코드 찾기
- 필요한 코드 밑 Try it yourself 들어가기
- 헤드에 있는 link href로 시작하고 rel이 들어있는 것 복사
- 스타일 활용할 html 헤드에 붙여넣기
- 스타일에 정확한 이름 기입
- 적용
css 원문
div.lottoball{
font-size: 50px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 3px solid gold;
background-color: gold;
border-radius: 200px;
margin: 50px;
box-shadow: 10px 10px 10px gray;
float: left;
}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/style2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="lottoball">5</div>
<div class="lottoball">12</div>
<div class="lottoball">9</div>
<div class="lottoball">22</div>
<div class="lottoball">32</div>
<div class="lottoball">44</div>
<hr style="clear: both;" color="orange" size="10">
<img src="../Food/12.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">
<img src="../Food/1.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
<img src="../Food/11.jpg" class="img-thumbnail" alt="Cinque Terre" width="250" height="250">
</body>
</html>id/class
id
div에만 줄 수 있다
태그 2개 이상 같이 쓰면 겹치거나 오류가 난다
헤드/css에서
->#이름 으로 style 적용
body에서
->태그 id="이름" 으로 지정
원문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 클래스는 동시에 여러군데 사용가능(.으로 만든다)
아이디는 #으로 만드는데 딱 한군데만 사용가능 */
.newjeans{
color: magenta;
}
div.iyou{
color: green; font-size: 20pt; width: 200px; height: 50px;
border: 1px solid purple;
}
/* id는 div에만 줄 수 있다 */
/* 태그 2개 이상 같이 쓰면 겹치거나 오류가 난다 */
#bts{
/* position 주면 top left right bottom 지정 필수 absolute 고정 */
position: absolute;
top: 400px;
left: 200px;
width: 200px;
height: 100px;
font-size: 20pt;
padding-left: 20px;
padding-right: 30px;
border: 3px dotted tomato;
}
</style>
</head>
<body>
<div style="color: brown; font-size: 15pt;
background-color: bisque; width: 200px; height: 150px;">
안녕 오늘은 목요일이야
</div>
<div class="newjeans">Hello Hi~~~</div>
<div class="iyou">내일도 비는 온다</div>
<font class="newjeans">Have a Nice Day</font>
<font class="iyou">Have a Nice Day</font>
<div id="bts">여기는 쌍용 자바반 입니다</div>
</body>
</html>class/id 활용 문제
css
#box1>ul{
list-style: none;
border: 3px groove brown;
background-color: aquamarine;
margin: auto;
padding: 50px;
text-align: center;
border-radius: 10px 50px 70px 10px;
box-shadow: 15px 15px 15px cadetblue;
}
#box1>h1{
border: 3px solid black;
margin-right: 750px;
border-radius: 100px;
background-color: blanchedalmond;
box-shadow: 5px 5px 5px gray;
}
#box1>p{
position: absolute;
top: 300px;
margin: auto;
height: 20px;
border: 3px dotted black;
background-color: coral;
box-shadow: 5px 5px 5px chocolate;
}html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../css/style3.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="box1">
<h1>div는 블럭요소입니다</h1>
<p>
주로 블럭요소로 그룹화 할 때 사용, 레이아웃(top,bottom,center,aside)
을 구현할 때 요소입니다
</p>
<ul>
<li>레이아웃구현</li>
<li>다른 div도 포함될 수 있다</li>
<li>블럭요소를 그룹화</li>
<li>id는 유일한 값</li>
</ul>
</div>
</body>
</html>
백엔드 개발자로서 성장해 나가는 성현이의 블로그~