[WEB] html,css 이용한 페이지 구현 - 2

본문 바로가기

Notice

Recent Posts

Recent Comments

Link

Tags more

Archives

Today

Total

관리 메뉴

Tech Log 🛠️

[WEB] html,css 이용한 페이지 구현 - 2 본문

WEB(html,css,js)

[WEB] html,css 이용한 페이지 구현 - 2

sehaan 2023. 4. 8. 21:17

임베디드 IOT 수업 중 진행 된 실습 내용을 기반으로 제작하였습니다.

(참고자료 : 명품 HTML5+CSS3+Javascript 웹 프로그래밍, 생능출판사)

1.CSS 를 이용한 리스트 페이지 제작

- CSS 의 hover 속성과 first-letter 속성을 이용하여 리스트 페이지를 제작

hover : 마우스를 올렸을 때의 속성을 설정. (CSS 리스트에 마우스를 올렸을 경우 초록색으로 변함)

first-letter : 첫 번째 글자만 속성을 적용.

코드

<!DOCTYPE x`html>
<!--
HTML선언
-->
<html>
<!--
HTML 구문 시작
-->
<head>
 <style>
 h3::first-letter{color:red}
 /* h3 태그의 첫 글자만 빨간색으로 한다. */
 li:hover{background: yellowgreen;}
 /* 리스트에 마우스를 올렸을 때 yellowgreen 색상으로 변경 */
 </style>
<meta charset="utf-8">
<!--
메타 데이터 형식 설정
-->
<title>셀렉터 만들기</title>
<!--
페이지 타이틀 작성
-->
</head>
<body>
<h3>Web Programming</h3>
<hr>
2학기 학습내용
<ul>
<li>HTML5</li>
<li><strong>CSS</strong></li>
<!-- 
strong 태그를 이용해 굵은체로 표기한다.
-->
<li>JAVASCRIPT</li>
</ul>
60점 이하는 F!
</body>
</html>
<!--
HTML 구문 끝
-->

2.텍스트와 박스에 shadow 속성 적용

- text - shadow

ex) text-shadow2px 2px 10px black

box - shadow

ex) box-shadow2px 2px 2px black

*왼쪽부터 v-shadaw, h-shadow , blur-radius 이다.

코드

<!DOCTYPE html>
<html>
<head>
 <title>text-shadow와 box-shadow</title>
 <style>
 h2
{
 text-align: center;
 /* 가운데 정렬 */
 coloryellow;
 /* 색상 설정 */
 text-shadow2px 2px 10px black,
 0 0 25px blue,
 0 0 5px darkblue;
}
 /* 
black 컬러는 2px, 2px ,2px
blue 컬러는 0 , 0, 25px
darkblue 컬러는 0 , 0, 5px 로 설정한다.
(왼쪽부터 v-shadaw, h-shadow , blur-radius)
*/
 img:hover
{
 box-shadow2px 2px 2px black,
 0 0 25px blue,
 0 0 5px darkblue
}
 /* 
black 컬러는 2px, 2px ,2px
blue 컬러는 0 , 0, 25px
darkblue 컬러는 0 , 0, 5px 로 설정한다.
(왼쪽부터 v-shadaw, h-shadow , blur-radius)
*/
 </style>
</head>
<body>
<h2>Most Visited Pages</h2>
<hr>
<table>
 <tr>
 <td><a href="http://www.naver.com">
 <img src="media/naver.png" width="200" height="150">
 </a></td>
 <td><a href="http://www.chosun.com">
 <img src="media/chosun.png" width="200" height="150">
 </a></td>
 <td><a href="http://www.amazon.com">
 <img src="media/amazon.png" width="200" height="150">
 </a>
 </td>
 </tr>
</table>
</body>
</html>

3.박스 모델 적용

- div태그에 padding , margin 속성을 적용해서 박스 내 이미지 배치

코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>박스 모델</title>
<style>
div{
backgroundyellow;
padding20px;
border5px dotted red;
margin30px;
}
/* 
배경색 노란색으로 설정,
padiing 값 20px로 설정
테두리는 5px 빨간색 점선으로 설정,
maring 속성은 30px로 설정한다.
*/
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의
빨간색 점선</p>
<hr>
<div>
<img src="media/img.avif" alt="고양이눈">
</div>
</body>
</html>

4. 상대위치를 적용한 페이지 제작

- 상대위치 : 같은 자손 요소와의 위치를 정함.

절대위치 : 부모 요소를 기준으로 위치를 정함.

코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative 배치</title>
<style>
div{
 displayinline-block;
 /* 
내부적으로 inline 규칙을 따르고, 
외부적으론 block 규직을 따른다. 
*/
 height50px;
 width50px;
 border1px solid lightgray;
 text-aligncenter;
 colorwhite;
 backgroundred;
}
/*
div 태그의 css 속성을 설정한다.
*/
#down:hover{
 positionrelative;
 left20px;
 top20px;
 backgroundgreen;
}
/*
"down" 아이디를 가진 클래스의 hover 속성을 설정한다.
position 속성을 상대 위치로 설정
*/
#up:hover{
 positionrelative;
 right20px;
 bottom20px;
 backgroundgreen;
}
/*
"up" 아이디를 가진 클래스의 hover 속성을 설정한다.
position 속성을 상대 위치로 설정
*/
</style>
</head>
<body>
<h3>상대 배치, relative</h3>
h와 k 글자에 마우스를 올려 보세요
<hr>
 <div>T</div>
 <div id="down">h</div>
 <!-- id값을 "down"으로 설정 -->
 <div >a</div>
 <div>n</div>
 <div id="up">k</div>
 <!-- id값을 "up"으로 설정 -->
 <div>s</div>
</body>
</html>

5. 짝수 번째에만 CSS 속성 적용

- nth-child(even) 선택자를 통해 짝수 번째에만 속성을 적용할 수 있다.

코드

<!DOCTYPE html>
<html><head><title>표 응용 1</title>
<style>
table
border-collapsecollapse;
}
/* 
표의 테두리와 셀의 테두리 사이의 간격을 없앤다.
*/
td, th
text-alignleft;
padding5px;
height15px;
width100px;
}
/* 
td,th 태그의 속성을 설정한다.
*/
thead, tfoot
backgrounddarkgray;
coloryellow;
}
/* 
thead , tfoot 태그의 속성을 설정한다.
*/
tbody tr:nth-child(even) { 
backgroundaliceblue;
}
/* 
짝수번째 요소에만 속성을 설정한다.
*/
tbody tr:hover{
backgroundpink;
}
/* 
tbody 태그에 마우스를 올렸을 때 속성을 설정한다.
마우스를 올리면 색상을 핑크색으로 변경
*/
</style></head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
<thead>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tfoot>
 <tr><th>합</th><th>310</th><th>249</th></tr>
 </tfoot>
 <tbody>
 <tr><td>황기태</td><td>80</td><td>70</td></tr>
 <tr><td>이재문</td><td>95</td><td>99</td></tr>
 <tr><td>이병은</td><td>85</td><td>90</td></tr>
 <tr><td>김남윤</td><td>50</td><td>40</td></tr>
</tbody>
</table>
</body>
</html>

6. @keyframes 어노테이션을 이용한 에니메이션 웹 제작

- 애니메이션 상태를 정의하고 이미지에 적용 (rotate)

코드

<html>
<head>
 <title></title>
</head>
<style>
@keyframes rotate
{
0%
{
 transform:rotate(-90deg);
}
50%
{
 transform:rotate(90deg);
}
100%
{
 transform:rotate(-90deg);
}
}
/* 
keyframes 어노테이션을 통해 애니메이션 중간 상태를 정의한다.
%는 애니메이션의 시작과 끝을 의미
*/
img
{
 animation-name: rotate;
 animation-duration: 2s;
 animation-iteration-count: infinite;
}
/* 
img 태그의 속성에 keyframes에서 적용했던 속성들을 적용한다. 
*/
</style>
<body>
 <h3>어지러워요</h3>
 <hr>
 <img src="media/img.avif" width="90px" height="100px">
 
</body>
</html>

7. 애니메이션의 반복 횟수 설정

- 애니메이션을 적용한 클래스 및 태그에 animation-iteration-count: 1; 적용하면 반복횟수를 설정

코드

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<style>
@keyframes a
{
from
{
 margin-left: 100%;
}
to
{
 margin-left: 0%;
}
}
/* 
@Keyframes 어노테이션을 통해 애니메이션을 정의하고 이름을 설정한다. (a) 
*/
strong
{
 padding: 3px;
 border: 2px solid black;
}
p
{
 animation-name: a;
 animation-duration: 3s;
 animation-iteration-count: 1;
}
/*
p태그에 미리 설정해둔 애니메이션을 적용하고 시간, 반복 횟수를 설정한다.
*/
</style>
<body>
<h3>애니메이션 응용</h3>
<hr>
<p><span><strong>?</strong>질문 있습니다.</span></p>
</body>
</html>

저작자표시

'WEB(html,css,js)' 카테고리의 다른 글

html & css 기초 개념 정리 (2)	2023.04.23
[WEB] html,css 이용한 페이지 구현 - 1 (0)	2023.03.30

'WEB(html,css,js)' Related Articles

more

티스토리툴바