2024. 1. 4. 19:09ㆍ2023.11.21-2024.05.31
웹 만들기 ;
(자바스크립트+CSS+HTML)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<style>
body{
margin: 0;
padding: 0;
}
.navi{
width: 70%;
height: 50px;
background-color: rgb(138, 114, 62);
overflow: hidden;
}
.menui{
width: 100px;
height: 100%;
background-color: rgba(243, 201, 145, 0.664);
float: left;
/* 너 왼쪽에서부터 정렬해가 */
line-height : 50px;
/* 텍스트 높이 위 아래 높이 맞춰서 */
text-align: center;
/* 중앙정렬 */
border-radius: 10%;
margin: 0px 10px;
/* 위아래 0, 오른쪽 왼쪽 10 */
/* margin-right: 10px; 오른쪽만 10px 떼줘 */
}
.menui:hover{
/* width: 120px; */
background-color: rgb(138, 114, 62);
font-weight: bold;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="navi">
<div class="menui"><i class="xi-home"></i>홈</div>
<div class="menui"><i class="xi-document"></i>게시판</div>
<div class="menui"><i class="xi-speech-o"></i>문의사항</div>
<div class="menui"><i class="xi-lock-o"></i>로그인</div>
<div class="menui"><i class="xi-info-o"></i>도움말</div>
</div>
<hr>
<div class="menu">
<div class="menuItem" onclick="location.href='./'">home</div>
<div class="menuItem">Store</div>
<div class="menuItem">Mac</div>
<div class="menuItem">iPad</div>
<div class="menuItem">iPhone</div>
</div>
</body>
</html>
|
cs |
마진 margin
margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다.
이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않는다.
CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있다
패딩 padding
padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다.
이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다.
CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다.
overflow: hidden
overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨겨버릴 수 있습니다.
>여기서는 별 차이 없음
.navi : CSS에서 사용되는 클래스(class) 선택자
해당 코드에서는 <div> 요소에 class="navi"라는 클래스를 부여하여 스타일을 적용.
이 클래스는 네비게이션 바를 나타내는 요소에 적용.
line-height : 텍스트의 높이 조절하는 CSS속성
텍스트 줄 간격을 조절하여 텍스트가 수직으로 얼마나 간격을 띄우는지를 결정한다.
line-height를 통해 텍스트가 감싸고 있는 박스의 높이에 대한 수직 정렬을 제어할 수 있다.
값을 조절하면 텍스트가 박스 내에서 상단, 하단, 또는 중앙으로 정렬되는 정도를 조절한다.
border-radius: 주어진 요소의 테두리의 모서리 부분을 둥글게 만들어주는 CSS 속성.
이 속성은 주로 박스 모델 요소들에 적용되어 각 모서리를 부드럽게 만들거나 원형 모양의 요소를 만들 때 사용된다.
.menui:hover: 마우스 커서를 갖다 댔을 때의 상태를 정의( CSS에서 사용되는 가상 클래스)
이 클래스는 사용자가 특정 요소에 마우스를 올렸을 때의 스타일을 지정하는 데 사용된다.
여러 가상 클래스 중 :hover는 특히 요소가 마우스 오버 상태일 때의 스타일링을 정의,
주로 버튼이나 링크 등의 상호작용 요소에 사용되어 마우스를 올렸을 때 시각적인 변화를 주는데 활용.
transition-duration: 특정 속성이 변경될 때 애니메이션 효과의 지속 시간을 지정 하는 CSS 속성.
이 속성을 사용하면 변화가 일어날 때 부드럽게 애니메이션을 적용할 수 있습니다.
'2023.11.21-2024.05.31' 카테고리의 다른 글
| 240104 웹 만들기 ; position.html (1) | 2024.01.04 |
|---|---|
| 240104 웹 만들기 ; menu.html (1) | 2024.01.04 |
| 240104 웹 만들기 ; main.html (1) | 2024.01.04 |
| 240104 웹 만들기 ; index.html (1) | 2024.01.04 |
| 240102 웹 만들기 ; Write.java (1) | 2024.01.04 |