스포츠마케터의 초보 개발자 도전기
HTML / CSS / JS/ jQuery study 03 본문
ex001_ background
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{background: url(image/backgroundImage.gif) no-repeat;}
/*
repeat : 바둑판식 정렬
no-repeat : 한개만 표시
repeat-x : 가로(x축)만 표시
repeat-y : 세로(y축)만 표시
*/
</style>
</head>
<body>
</body>
</html>
ex002_back_position : 배경이미지의 위치선정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경 이미지의 위치선정</title>
<style>
p{padding: 50px; width: 400px; height: 150px;}
.back1{background: yellow url(image/background.jpg) no-repeat right bottom ;}
.back2{background: yellow url(image/background.jpg) no-repeat 20px 100px ;}
.back3{background: yellow url(image/background.jpg) no-repeat center ;}
.back4{background: yellow url(image/background.jpg) no-repeat 70% 10% ;}
</style>
</head>
<body>
<p class="back1">
back1
</p>
<p class="back2">
back2
</p>
<p class="back3">
back3
</p>
<p class="back4">
back4
</p>
</body>
</html>
ex003_li_back : li 점말고 이미지로 바꾸기 (이미지파일 필요)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.u1 li{list-style: none;
background: url(image/arrow.gif) no-repeat 0 center;
padding-left:10px;}
.u2 li{list-style: none; /*default 값은 disc*/
background: url(image/arrow.gif) no-repeat 0 60%;
padding-left:10px;}
</style>
</head>
<body>
<ul class="u1">
<li>홈</li>
<li>갤러리</li>
<li>게시판</li>
<li>사이트맵</li>
</ul>
<ul class="u2">
<li>홈</li>
<li>갤러리</li>
<li>게시판</li>
<li>사이트맵</li>
</ul>
</body>
</html>
ex004_list_style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.c1{list-style: none;}
.c2{list-style: disc;} /*default 값*/
.c3{list-style: circle;}
.c4{list-style: square;}
.c5{list-style: upper-alpha;}
.c6{list-style: lower-alpha;}
.c7{list-style: upper-roman;}
.c8{list-style: lower-roman;}
</style>
</head>
<body>
<ul>
<li class="c1">스타일</li>
<li class="c2">스타일</li>
<li class="c3">스타일</li>
<li class="c4">스타일</li>
<li class="c5">스타일</li>
<li class="c6">스타일</li>
<li class="c7">스타일</li>
<li class="c8">스타일</li>
</ul>
</body>
</html>
ex005_자손(후손)선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자손(후손) 선택자</title>
<style>
#header h1{color:red;}
#content h1{color:blue;}
</style>
</head>
<body>
<div id="header">
<h1>후손(자손)선택자</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
<div id="nav2">
<h1>Navigation</h1>
</div>
</div>
<div id="content">
<h1>Content title</h1>
<p>Basic css</p>
</div>
</body>
</html>
ex006_자식선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식선택자</title>
<style>
.header > h2{color:red;}
.header > div > h2{color:green;}
</style>
</head>
<body>
<div class="header">
<h2>안녕하세요</h2>
<div>
<h2>반가워요</h2>
</div>
<h2>엄마아빠 나도</h2>
</div>
<div class="section">
<h2>나는 section</h2>
</div>
</body>
</html>
ex007_inline_to_block : 인라인요소 → 블록요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인요소 -> 블록요소</title>
<style>
li{list-style: none;}
img{display: block;} /*인라인을 블록으로 변경*/
span{display: block;}
a{display: block; /*a태그에서 블록처리가 되어있지 않으면 다른 코드 침범할 수 있어 자주 씀*/
border:1px solid black;
padding: 10px 0;}
a{text-decoration: none;}
</style>
</head>
<body>
<ul>
<li>
<img src="image/acid2Test.jpg" alt="웃는얼굴">
<span>웃는이미지</span>
<span>어때?</span>
<a href="#">이거 눌러도 안되지</a>
</li>
</ul>
</body>
</html>
ex008_ul_menu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{margin:0; padding:0;}
li{list-style: none;}
ul{width:130px;
margin-left:10px;}
a{display: block;
text-decoration: none;
background-color: red;
padding: 5px;
margin: 3px 0;
color:white}
/*:을 사용하는 가상클래스는 스타일에 대한 처리를 바로 진행한다기보다 사용자가 원하는 시점에, 원하는 상황에만 동작하도록 처리가 가능*/
a:hover{font-weight:bold;
background:green;
color:yellow;
text-decoration: underline;} /*글자밑에 라인*/
</style>
</head>
<body>
<div id="box">
<h1>메뉴판</h1>
<ul>
<li><a href="#">짜장면</a></li>
<li><a href="#">짬뽕</a></li>
<li><a href="#">탕수육</a></li>
<li><a href="#">볶음밥</a></li>
</ul>
</div>
</body>
</html>
ex009_word_wrap
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*영문을 띄어쓰기 없이 길게 입력하면 width값을 줘도 영역밖으로 내용이 빠져나가는데,
이것을 너비에 강제로 맞춰서 엔터를 적용해주는 기능이 word-wrap:break-word다.*/
p{word-wrap: break-word;
width: 100px; padding:10px; background: #96f;}
</style>
</head>
<body>
<p>
이 영역에는 매우 긴 영단어가 포함되어 있습니다.
sajflksjalkfdjlkasjdlkfjskldfjlkasjasjkhdjkshdgfjkgsdkhjagfhjsgdfhjgashj
</p>
</body>
</html>
ex010_overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지정된 영역을 벗어난 텍스트 처리</title>
<style>
p{width:250px;
height: 100px;
border:1px solid black;}
.p1{overflow: hidden;} /*정해진 영역 내부의 요소들만 보여줌*/
.p2{overflow: scroll;} /*내용에 상관없이 언제나 보여지는 스크롤*/
.p3{overflow: auto;} /*내용이 넘칠때만 스크롤*/
.p4{overflow: visible;} /*default 값, 부모크기에 상관없이 모든 내용을 그대로 보여줌*/
</style>
</head>
<body>
<p class="p1">
미국 캘리포니아주 로스앤젤레스 다저스타디움에서 열린 ‘2024 메이저리그’ 샌디에이고 파드리스와 LA 다저스의 경기에서 벤치클리어링이 일어났다.
대기 타석에 있던 김하성도 황급히 달려 나와 상대 팀과 시비가 붙은 주릭슨 프로파를 말리느라 진땀을 뺐다.
벤치클리어링은 5회 1사 주자 없는 가운데 프로파 타석 때 일어났다.
</p>
<p class="p2">
미국 캘리포니아주 로스앤젤레스 다저스타디움에서 열린 ‘2024 메이저리그’ 샌디에이고 파드리스와 LA 다저스의 경기에서 벤치클리어링이 일어났다.
대기 타석에 있던 김하성도 황급히 달려 나와 상대 팀과 시비가 붙은 주릭슨 프로파를 말리느라 진땀을 뺐다.
벤치클리어링은 5회 1사 주자 없는 가운데 프로파 타석 때 일어났다.
</p>
<p class="p3">
미국 캘리포니아주 로스앤젤레스 다저스타디움에서 열린 ‘2024 메이저리그’ 샌디에이고 파드리스와 LA 다저스의 경기에서 벤치클리어링이 일어났다.
대기 타석에 있던 김하성도 황급히 달려 나와 상대 팀과 시비가 붙은 주릭슨 프로파를 말리느라 진땀을 뺐다.
벤치클리어링은 5회 1사 주자 없는 가운데 프로파 타석 때 일어났다.
</p>
<p class="p4">
미국 캘리포니아주 로스앤젤레스 다저스타디움에서 열린 ‘2024 메이저리그’ 샌디에이고 파드리스와 LA 다저스의 경기에서 벤치클리어링이 일어났다.
대기 타석에 있던 김하성도 황급히 달려 나와 상대 팀과 시비가 붙은 주릭슨 프로파를 말리느라 진땀을 뺐다.
벤치클리어링은 5회 1사 주자 없는 가운데 프로파 타석 때 일어났다.
</p>
</body>
</html>
ex011_first_child : 가상클래스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-child 가상클래스</title>
<style>
li{list-style: none;
display: inline;}
li:first-child{color:red;}
li:last-child{color:blue;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
ex012_pseudo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>슈도(pseudo)클래스</title>
<style>
li{list-style: none;
display: inline;
margin-left:15px;}
li:nth-child(odd){color:red;} /*홀수번째에만 적용*/
li:nth-child(even){color:green;}/*짝수번째에만 적용*/
li:nth-child(4n){background-color: yellow;;} /*숫자의 배수에만 적용*/
li:nth-child(6){background-color: purple;} /*지정된 숫자에만 적용*/
/*a태그의 가상 클래스는 반드시 hover, active순으로 정의해야한다.*/
a:hover{color:orange;}
a:active{color:red; text-decoration: none;}
</style>
</head>
<body>
<a href="#">링크 가상 클래스</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
ex013_z-index : 절대좌표와 z인덱스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>절대좌표와 z인덱스</title>
<style>
*{margin:0; padding:0}
p{
border:1px solid black;
padding:10px;
width:80px;
height:80px;
/*절대좌표(absolute) : body기준 0,0 위치로 이동*/
position:absolute;
}
/*z-index값이 클 수록 화면 위쪽에 표시된다*/
.box1{background: yellow;
left:10px; top:10px;
z-index:2;}
.box2{background: orange;
left:30px; top:30px;
z-index: 1;}
.box3{background: teal;
left:50px; top:50px;
z-index: 5;}
</style>
</head>
<body>
<p class="box1">박스1</p>
<p class="box2">박스2</p>
<p class="box3">박스3</p>
</body>
</html>
ex014_float
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float(왼쪽, 오른쪽 정렬)</title>
<style>
*{margin:0; padding:0;}
#container{font: 15px "굴림", sans-serif;
width:500px;
border:5px solid #caa;
padding:10px;
background: #fdd;
margin:10px auto;
overflow: hidden;} /*자식 객체가 float 코드를 사용할 경우 overflow:hidden을 사용하여 계속 자리를 잡아놓게 함 (float 해제)*/
h1{text-align: center;}
/*float는 '부유'의 의미로, 부모에게 영향을 받지않고 공중에 떠있는 모양이 된다
이 경우 부모는 자식을 포함하는 영역을 지정하는 것이 불가하므로, 이를 해결하기 위해
float을 해제(부모가 자식의 높이를 인지하도록)가 필요*/
.green{width:200px; height:100px;
background: #dda;
float:left;}
.coffee{width:200px; height:100px;
background: #ba7;
float:right;}
</style>
</head>
<body>
<div id="container">
<h1>float연습중</h1>
<div class="green">
녹차
</div>
<div class="coffee">
커피
</div>
</div>
</body>
</html>
ex015_float
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 3단계</title>
<style>
*{margin:0; padding:0;}
#content{width:330px;
border:5px double black;
margin:10px auto;
overflow: hidden;}
#content div{width:100px; height:100px;}
.left{width:100px; height:50px;
background: purple;
border:1px solid red;
float:left;}
.center{width:100px; height:50px;
background: brown;
border:1px solid red;
float:left;
margin-left : 12px;}
.right{width:100px; height:50px;
background: blue;
border:1px solid red;
float:right;}
</style>
</head>
<body>
<div id="content">
<div class="left">
나는 왼쪽
</div>
<div class="center">
나는 가운데
</div>
<div class="right">
나는 오른쪽
</div>
</div>
<div id="content">
<div class="left">
나는 왼쪽
</div>
<div class="center">
나는 가운데
</div>
<div class="right">
나는 오른쪽
</div>
</div>
</body>
</html>
ex016_float_css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{margin:0; padding:0;}
li{list-style: none;
float:left;
margin-right:12px;
border: 1px solid black;}
li:nth-child(3){margin-right:0;}
ul{
width: 550px;
overflow:hidden;
padding:0 0 10px 10px;}
span{display: block;
margin: 15px 0;}
a{text-decoration: none;
color:grey}
a:hover{color:red;}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<img src="image/acid2Test.jpg" alt="웃는 얼굴">
<span>칫솔만 있으면 쉬워요<br>전복 손질법</span>
</a>
<p>
<a href="#">블로그</a> |
<a href="#">kevin</a></p>
</li>
<li>
<a href="#">
<img src="image/acid2Test.jpg" alt="웃는 얼굴">
<span>칫솔만 있으면 쉬워요<br>전복 손질법</span>
</a>
<p>
<a href="#">블로그</a> |
<a href="#">kevin</a></p>
</li>
<li>
<a href="#">
<img src="image/acid2Test.jpg" alt="웃는 얼굴">
<span>칫솔만 있으면 쉬워요<br>전복 손질법</span>
</a>
<p>
<a href="#">블로그</a> |
<a href="#">kevin</a></p>
</li>
</ul>
</body>
</html>
ex017_menu_css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{margin:0; padding:0;}
li{list-style: none;}
ul{width: 200px; height:350px;
border: 1px solid gray;
background: lightgray;
margin:10px auto;}
a{display: block;
color:black;
width: 140px;
text-decoration: none;
text-align: center;
padding: 20px;
margin:20px auto;}
/*하단 선생님 코드*/
.menu-box{width:130px;
background-color: #f0f0f0;
border:1px solid #ccc;
padding:10px;
text-align: center;
margin:10px auto;}
.item{margin-bottom: 10px;}
a:hover{background:black; color: white;}
</style>
</head>
<body>
<ul>
<li><a href="#">COMPANY</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COMMUNITY</a></li>
</ul>
<!--하단 선생님 코드-->
<div class="menu-box">
<div class="item">
<a href="#">COMPANY</a>
</div>
<div class="item">
<a href="#">PRODUCT</a>
</div>
<div class="item">
<a href="#">SERVICE</a>
</div>
<div class="item">
<a href="#">COMMUNITY</a>
</div>
</div>
</body>
</html>
ex018_float_css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {margin: 0;
padding: 0;}
#container {width: 600px;
border: 5px solid red;
margin:10px auto;}
.header{width: 600px;
border-bottom:5px solid black;
text-align: center;
color: white;
background: blue;
padding: 10px 0;}
.content{overflow: hidden;}
.left{width:280px;
background: pink;
border-right: 20px solid grey;
padding:5px;
float:left;}
.right{width:280px;
padding:5px;
float:right;}
.footer{width: 600px;
border-top:5px solid black;
text-align: center;
color: white;
background: darkblue;
padding: 10px 0;}
</style>
</head>
<body>
<div id="container">
<div class="header">
우리의 자랑 스포츠의 꽃
</div>
<div class="content">
<div class="left">
15일(한국시간) 끝난 2023-24 시즌 잉글랜드 프리미어리그 32라운드 결과 아스날과 리버풀이 동반 패배하면서 맨체스터시티가 1위를 지켰다.
먼저 리버풀은 홈 구장 안필드에서 크리스탈 팰리스에 충격적인 0-1 패배를 당했다.
전반 14분 에즈에게 허용한 선제골이 결승골로 이어졌다. 볼 점유율 70%로 일방적인 경기를 펼쳤지만 끝내 크리스탈 팰리스의 골문을 열지 못했다.
전반 16분엔 추가골을 허용할 뻔했다. 일대일 기회에서 골키퍼를 제치고 날린 슈팅이 골라인을 넘기 직전 앤디 로버트슨이 걷어 냈다.
</div>
<div class="right">
15일(한국시간) 끝난 2023-24 시즌 잉글랜드 프리미어리그 32라운드 결과 아스날과 리버풀이 동반 패배하면서 맨체스터시티가 1위를 지켰다.
먼저 리버풀은 홈 구장 안필드에서 크리스탈 팰리스에 충격적인 0-1 패배를 당했다.
전반 14분 에즈에게 허용한 선제골이 결승골로 이어졌다. 볼 점유율 70%로 일방적인 경기를 펼쳤지만 끝내 크리스탈 팰리스의 골문을 열지 못했다.
전반 16분엔 추가골을 허용할 뻔했다. 일대일 기회에서 골키퍼를 제치고 날린 슈팅이 골라인을 넘기 직전 앤디 로버트슨이 걷어 냈다.
</div>
</div>
<div class="footer">
우리의 자랑 스포츠의 꽃
</div>
</div>
</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 02 (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
