스포츠마케터의 초보 개발자 도전기
HTML / CSS / JS/ jQuery study 02 본문
ex001_color : CSS를 사용한 글자 색상 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS를 사용한 글자 색상 변경</title>
<!-- CSS(Cascade Style Sheet) : 웹페이지의 디자인 적용을 위한 문법 -->
<!--www.colorpicker.com-->
<!-- #aaccff -> #acf로 줄일 수 있음. 대소문자 구분 없음 -->
<style>
h1{color:brown;}
h2{color:blue;}
h3{color:#ACF;}
p{color:#00D8FF;}
</style>
</head>
<body>
<h1>스타일 연습1</h1>
<h1>스타일 연습2</h1>
<h2>스타일 연습3</h2>
<h3>스타일 연습4</h3>
<p>스타일 연습5</p>
</body>
</html>
ex002_class : class접근을 통한 CSS정의
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class 접근을 통한 css정의</title>
<style>
/*스타일 시트 내부에서의 주석*/
/*text2라는 클래스를 가진 태그를 검색*/
/*.text2{color:#f00;}*/
.text{color:blue;}
/*h2태그 중 text2라는 클래스를 가진 태그에게만 속성을 적용*/
h2.text2{color:chartreuse;}
p.text{color:red;}
</style>
</head>
<body>
<!--클래스는 디자인'만'을 위한 식별자로써, 중복된 이름을 허용한다-->
<h2 class="text">클래스 연습</h2>
<h2 class="text2">클래스 연습2</h2>
<p class="text2">개구쟁이 뽀로로</p>
<p class="text">장난꾸러기 크롱</p>
</body>
</html>
ex003_class : 일부분지정태크(span)의 CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>일부분 지정태그(span)의 css</title>
<style>
.box{color:red;}
span{color:gray;}
/*아래와 같이 범위를 상세하게 줄이며 스타일을 적용할 수도 있다
공백은 특정태그의 자식 태그를 찾으시오의 의미*/
div.box h2 span.s_blue{color:blue;}
.s_green{color:green;}
</style>
</head>
<body>
<div class="box">
<h2><span>타요타요</span> 타요타요 개구쟁이 꼬마버스</h2>
<div class="box">
<h2>꼬불꼬불 <span class="s_blue">울퉁불퉁</span> 험한 길도 두렵지 않아</h2>
</div>
</div>
<h2><span class="s_green">어두컴컴</span> 빛이 없는 긴 터널도</h2>
</body>
</html>
ex004_id : id를 통한 CSS적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id를 통한 css적용</title>
<style>
/*클래스 접근은 .으로,
아이디 접근은 #으로*/
#test{color: red;}
h1#test2{color:blue;}
</style>
</head>
<body>
<!--id는 디자인과 디자인외의 모든 형식에서 접근이 가능
id는 절대로 중복된 이름으로 만들지 않는다-->
<h1 id="test">아이디 연습중1</h1>
<h1 id="test2">아이디 연습중2</h1>
</body>
</html>
ex005_border
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border(선)</title>
<style>
p{border-width: 20px; /*선 두께*/
border-color:blue;} /*선 색상*/
.b1{border-style: none;}
.b2{border-style: hidden;}
.b3{border-style: dotted;}
.b4{border-style: dashed;}
.b5{border-style: solid;}
.b6{border-style: double;}
.b7{border-style: groove;}
.b8{border-style: ridge;}
.b9{border-style: inset;}
.b10{border-style: outset;}
.div1{border:10px solid green;}
.div2{border: 10px red solid;}
.div3{border: 1px solid black;
width: 200px;
height: 150px;}
.div4{border-bottom: 5px solid red;
border-top: 5px double blue;}
</style>
</head>
<body>
<p class="b1">border 연습중</p>
<p class="b2">border 연습중</p>
<p class="b3">border 연습중</p>
<p class="b4">border 연습중</p>
<p class="b5">border 연습중</p>
<p class="b6">border 연습중</p>
<p class="b7">border 연습중</p>
<p class="b8">border 연습중</p>
<p class="b9">border 연습중</p>
<p class="b10">border 연습중</p>
<div class="div1">
div에 속성적용하기
</div>
<div class="div2">
div 2 속성
</div>
<div class="div3">
div 3 속성
</div>
<div class="div4">
div 4 속성
</div>
</body>
</html>
ex006_padding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding(안쪽여백)</title>
<style>
p{border: 5px solid red;
background:yellow;
width: 300px;}
.box1{padding: 20px;} /*상하좌우*/
.box2{padding: 20px 50px;} /*상하, 좌우*/
.box3{padding: 20px 50px 30px;} /*상, 좌우, 하*/
.box4{padding: 0 50px 30px 70px;} /*상, 우, 하, 좌(시계방향) 0픽셀은 px 생략 가능*/
.box5{padding-left: 20px ;
padding-top: 10px;}
</style>
</head>
<body>
<p class="box1">padding 연습중</p>
<p class="box2">padding 연습중</p>
<p class="box3">padding 연습중</p>
<p class="box4">padding 연습중</p>
<p class="box5">padding 연습중</p>
</body>
</html>
ex007_margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin(바깥쪽 여백)</title>
<style>
p{border: 3px dashed blue;}
div{border: 5px solid red;
width: 200px;}
.box1{margin:20px;} /*상하좌우*/
.box2{margin:20px 50px;} /*상하,좌우*/
.box3{margin:30px 50px 60px;}/*상,좌우,하 아래위 박스 마진이 겹치면 큰수치값이 작은수치값을 먹음*/
.box4{margin:20px 30px 50px 70px;} /*상, 우 , 하, 좌*/
</style>
</head>
<body>
<p>나는 p</p>
<p>나는 p</p>
<div class="box1">margin 속성 연습</div>
<div class="box2">margin 속성 연습</div>
<div class="box3">margin 속성 연습</div>
<div class="box4">margin 속성 연습</div>
</body>
</html>
ex008_boader_form
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border 연습</title>
<style>
.p1{border-top: 20px;
border-right: 5px;
border-bottom: 15px;
border-left: 10px;
border-color: red;
border-style: solid;}
.p2{border-top: 10px red solid;
border-right: 10px blue solid;
border-bottom: 10px green solid;
border-left:10px cyan solid;}
.p3{border-top: solid;
border-right: double;
border-bottom: dashed;
border-left: dotted;}
.p4{border-width: 3px 5px 10px 15px;
border-style: solid dotted double groove;
border-color: red blue orange aqua;}
</style>
</head>
<body>
<p class="p1">aaaaaaaaaaa</p>
<p class="p2">aaaaaaaaaaa</p>
<p class="p3">aaaaaaaaaaa</p>
<p class="p4">aaaaaaaaaaa</p>
</body>
</html>
ex009_boader_form
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.t1{border-style: solid hidden;
border-width: 15px;
border-color: red;
padding: 10px;}
.t2{border-width: 10px 0 10px;
border-color: red;
border-style: solid;
width: 600px;
padding: 10px;
text-indent: 15px; /*첫줄 들여쓰기*/
text-align: center; /*글자 정렬*/
line-height: 25px; /*줄 간격*/
letter-spacing: 10px; /*자간*/
}
</style>
</head>
<body>
<p class="t1">지난 시즌을 앞두고 튀르키예 페네르바체를 떠나 나폴리에 합류한 김민재는 빅리그 첫해 적응기가 필요할 것이라는 전망을 깨고 나폴리 주전 수비수로 맹활약을 펼쳤다.
강력한 신체 조건과 뛰어난 수비 지능, 압도적인 스피드를 바탕으로 세리에A 공격수들을 모두 제압해 내며 나폴리를 33년 만에 세리에A 우승으로 이끌었다.
김민재는 시즌이 끝나고 지오바니 디로렌초와 테오 에르난데스를 제치고 세리에A 최우수 수비상을 받아 활약을 인정받았다.
또 나폴리가 UEFA 챔피언스리그에서 구단 최고 성적인 8강에 오르는 데에도 김민재의 역할이 결정적이었다는 평가가 따랐다.</p>
<p class="t2">지난 시즌을 앞두고 튀르키예 페네르바체를 떠나 나폴리에 합류한 김민재는 빅리그 첫해 적응기가 필요할 것이라는 전망을 깨고 나폴리 주전 수비수로 맹활약을 펼쳤다.
강력한 신체 조건과 뛰어난 수비 지능, 압도적인 스피드를 바탕으로 세리에A 공격수들을 모두 제압해 내며 나폴리를 33년 만에 세리에A 우승으로 이끌었다.
김민재는 시즌이 끝나고 지오바니 디로렌초와 테오 에르난데스를 제치고 세리에A 최우수 수비상을 받아 활약을 인정받았다.
또 나폴리가 UEFA 챔피언스리그에서 구단 최고 성적인 8강에 오르는 데에도 김민재의 역할이 결정적이었다는 평가가 따랐다.</p>
</body>
</html>
ex010_font
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font</title>
<style>
/*글자크기*/
.a1{font-size: 20px;}
/*글자 기울이기*/
.a2{font-style: italic;}
/*글자 두껍게*/
.a3{font-weight: bold;}
/*폰트 패밀리 : 브라우저에서 적용 안될 수 있으니 여러개 준비(하나만해도 되긴함)
여러개의 글꼴을 준비해두고, 브라우저에서 지원되는 글꼴을 골라서 사용할 수 있도록 해주는 속성*/
.a4{font-family: "궁서", "굴림", sans-serif;}
/*대문자를 소문자사이즈로, 소문자를 대문자로*/
.a5{font-variant: small-caps;}
/*간략화 순서 : weight, style, variant, size, font-family : 빼고 해도 되나 순서바뀌면 안됨*/
.a6{font : bold italic small-caps 30px "돋움", "굴림";}
.a7{font : bold 30px "돋움", "굴림";}
.a8{font : 30px italic bold small-caps "돋움", "굴림";}
</style>
</head>
<body>
<p class="a1">font 연습</p>
<p class="a2">font 연습</p>
<p class="a3">font 연습</p>
<p class="a4">font 연습</p>
<p class="a5">The end</p>
<p class="a6">간략화 적용</p>
<p class="a7">간략화 적용</p>
<p class="a8">간략화 적용</p>
</body>
</html>
ex011_ul_css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* *body의 모든 태그들(*)의 margin과 padding을 제거 */
*{margin:0;
padding:0}
div{width:300px;
margin:0 auto; /*위 아래 마진은 0, 좌우마진을 브라우저 정 중앙에 배치*/
}
p{border:1px solid red;}
ul{border:1px solid blue;}
li{border:1px solid pink;
background:pink;}
</style>
</head>
<body>
<div>
<p>우리가게 메뉴판</p>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</div>
</body>
</html>
ex012_dl_css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{margin: 0;
padding: 0;}
dl{width:600px;
margin:0 auto;
border:5px double;}
dt{background: blueviolet;
border-bottom: 10px solid blue;
text-align: center;
letter-spacing: 10px;
font-size: 30px;
font-weight: bold;
padding: 30px}
dd{text-indent: 15px;;}
.d1{border-bottom: 2px dotted;}
</style>
</head>
<body>
<dl>
<dt>한국의 속담</dt>
<dd class="d1">
까마귀 날자 배 떨어진다
</dd>
<dd class="d2">
발 없는 말이 천리간다
</dd>
</dl>
</body>
</html>
ex013_dl_css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{margin: 0; padding: 0;}
dl{width:800px;
height: 600px;
margin:15px auto;
border:1px solid grey;}
dt{text-align: center;
font-size: 30px;
font-weight: bold;
padding: 20px}
.proverb{text-align: center;
line-height: 50px;
height: 50px;
font-weight: bold;
font-size: 20px;
margin: 10px;
background: violet;
border-bottom: 5px solid blue;}
.mean{border-bottom: 2px dotted;
padding: 15px;
margin:10px;
text-indent: 15px;}
.mean1{border-bottom: hidden;
padding: 15px 15px 20px 15px;
text-indent: 15px;}
</style>
</head>
<body>
<dl>
<dt>한국의 속담</dt>
<dd class="proverb">
1. 까마귀 날자 배 떨어진다
</dd>
<dd class="mean">
어떤 행동을 하거나 무엇인가를 시작하면 그에 따른 결과가 따라온다.
</dd>
<dd class="proverb">
2.발 없는 말이 천리간다
</dd>
<dd class="mean">
정확한 사실과는 다르지만, 비록 허위라도 널리 퍼져서 많은 사람이 믿게 되는 일이 있다.
</dd>
<dd class="proverb">
3.오늘은 나비가 되어라, 내일은 병아리가 되어라
</dd>
<dd class="mean">
어떤 대는 날쌔고 즐겁게, 어떤 때는 조용하고 신중하게 행동하라.
</dd>
<dd class="proverb">
4.바늘 도둑이 소도둑된다.
</dd>
<dd class="mean1">
작은 범죄를 저지르는 사람은 점점 큰 범죄를 저지르는 사람이 될 수 있다.
</dd>
</dl>
</body>
</html>'develop > WEB' 카테고리의 다른 글
| HTML / CSS / JS/ jQuery study 05 (0) | 2024.05.17 |
|---|---|
| HTML / CSS / JS/ jQuery study 04 (0) | 2024.05.17 |
| HTML / CSS / JS/ jQuery study 03 (0) | 2024.05.17 |
| HTML / CSS / JS/ jQuery study 01 (0) | 2024.05.16 |
| Apache Tomcat9.0 server + eclipse 설정 (0) | 2024.05.16 |
'develop/WEB' Related Articles
more
