1. 웹 사이트 제작 참고 사이트
- html, css 연습 사이트 : https://www.w3schools.com/
- 네이밍 참고 사이트 : https://www.curioustore.com/#!/
- 브라우저별 css 호환성 확인 사이트 : https://caniuse.com/
- 스크립트 + css 효과 참고사이트 : https://wsss.tistory.com/
- 벤치마킹 사이트 : gdweb.co.kr
2. 제공하는 서비스에 따른 UI 특징
1) 대민 서비스
- 특징 : 누구나 접근 가능하기 때문에 UI구성이 사용자 친화적이고 화면구성이 어색하지 않아야한다.
- 예시 : 정부24, 배달의 민족, 네이버 등
2) 내부용 서비스
- 특징 : 업무 중심으로 사용되기 때문에 UI 구성이 접근하기 쉽고 용이해야함.
- 예시 : 통계 대시보드, 그룹웨어 등
3. 메뉴 포함된 css 분석하기
<!DOCTYPE html>
<html>
<head>
<style>
ul { /* ul:순서가 중요하지 않은 리스트 */
list-style-type: none; /* 표준으로 제공되는 스타일 */
margin: 0; /* 여백값 */
padding: 0; /* 내용과 테두리 사이의 간격 */
overflow: hidden; /* 해당 HTML 요소 밖으로 빠져나온 컨텐츠를 숨김*/
background-color: #333; /* 배경색 */
}
li { /* li:순서가 중요한 리스트 */
float: left; /* 왼쪽으로 정렬 */
}
li a, .dropbtn { /* 드랍버튼 */
display: inline-block; /* 원하는 너비의 엘리먼트를 배치 */
color: white; /* 색깔:흰색 */
text-align: center; /* 글자:가운데맞춤 */
padding: 14px 16px; /* 텍스트와 테두리 사이의 간격 */
text-decoration: none; /* 선 스타일:선없음. */
}
li a:hover, .dropdown:hover .dropbtn { /* hover:마우스를 위에 올렸을때,드랍버튼 */
background-color: blue; /* 배경색:파랑 */
}
li.dropdown {
display: inline-block;
}
.dropdown-content { /* 드랍 다운 컨텐츠의 요소 */
display: none; /* 해당 요소 숨기기 */
position: absolute; /*absolute: 부모 요소 내부에 속박되지 않은 독립된 배치 문맥을 가짐 */
background-color: #f9f9f9; /* 배경색 */
min-width: 160px; /* 최소넚이:160px */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 박스 그림자 */
z-index: 1; /* z축 깊이:1 */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block; /* 해당 요소는 독립적인 한줄을 사용 */
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;} /* 드롭다운 컨텐츠 a만듬 */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
'수업 > 수업정리' 카테고리의 다른 글
| 2024-02-26-오전:Eclipse 서버파일 수정 (1) | 2024.02.26 |
|---|---|
| 2024-02-22-오전:table과 input, select (0) | 2024.02.22 |
| 2024-02-21-오전:Eclipse첫실습 (0) | 2024.02.21 |
| 2024-02-20-오후:절대경로 지정하기 (0) | 2024.02.20 |
| 2024-02-20-오전:Eclipse시작하기 (0) | 2024.02.20 |
