[3] 230127 개인 프로젝트 (1) 3일 차 Fri) 프로젝트 진행 및 할 것 리스트

230127 Fri 21th class [3rd day for portfolio :)]

지난 수업에서 기억 할 것

메뉴 만들 때 
(교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초 p. 261 참고하기)
HTML

		<div id="login">
		<ul>
		<li><a href="#">로그인</a></li>
		<li><a href="#">회원가입</a></li>
		</ul>
		</div>

CSS

#login {
	display: table-cell;
	width: 200px; /*너비*/
	height: 10px; /*내비게이션 영역 높이 */
	border: dotted red;
}
#login ul{text-align:center;}

#login ul li{display:inline;}
 
#login ul li a{text-decoration:none; color:navy;}

---

할 것

1) 첫번째 교재의 p. 262 참고해서

line-height: 28px;

메뉴에 넣어보기
line-height는 font-size보다 더 크고 위에 여백을 준다. 

2) 회원가입 진행은 [4]번글 참고
2023.01.02 - [1. Revision 2023/HTML5] - [4] 230102 Ch3 HTML5 멀티미디어 & 입력양식

 

3) [16]번글 참고해서 로그인, 로그아웃 변경되는 거 적용하기

2023.01.18 - [1. Revision 2023/Javascript] - [16] 230118 Ch9 자바스크립트 객체(3) Ch10 DOM과 이벤트 처리, 입력 검증(1)

 

 

반응형 웹페이지 예시
더블유스코프 회사 홈페이지 
https://www.w-scope.co.kr/home/main.php#firstPage

W-SCOPE

https://hello-woody.tistory.com/8

웹 디자인 해상도, 적응형과 반응형 차이

 

---

노랑 풍선 소스 파일 보면 아래처럼 나도 이걸 사용해야 할 것 같다.
강사님 말로는 width: 1200px 쓰는 게 낫고 세로는 마음대로 해도 된다.
아래는 반응형 웹일 때 쓴다고 한다.

<meta name="viewport" content="user-scalable=yes, width=device-width">

모두 투어 소스

<meta name="viewport" content="width=device-width, initial-scale=1" />

더블유스코프 소스

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

아래 블로그 내용을 참고한다.
https://m.blog.naver.com/lifefrom_/221907584339

[웹] width=device-width, initial-scale=1, shrink-to-fit=no