홈페이지 만들기 기초 4번째 시간
와... 띄어쓰기 잘못하면 한참 찾아 해매야한다 #side .logo를 #side. logo로 잘못써놓고 한참을 찾았다 이러한 잔실수를 줄이는게 가장 급선무 인것같다
기본적인 레이아웃 연습은 이번강의로 끝난 듯하다 아직 공식들을 더 외워야 하며
오타와 띄어쓰기에 유의하여 작업해야 할 듯하다
시험장에 emmet기능 없으면 아래 것은 외워야 한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
가로 메뉴 만들어보기
제이쿼리라는 것을 이용해서 만든다 보통 script에 시험장에서 제공해주는 코드를 쓰는 것 같다
이런식의 코드를 사용한다
<nav class="nav">
<ul>
<li><a href="#">MENU-1</a></li>
<li><a href="#">MENU-2</a></li>
<li><a href="#">MENU-3</a></li>
<li><a href="#">MENU-4</a></li>
</ul>
여기서 #는 클릭 시 전환되는 사이트로 여기선 가상의 사이트 #를 삽입하였다
제이쿼리 코드는 필수로 외워야할 사항이다 조금길기 때문에 집에 잘보이는 곳에 메모해서 붙여 놔야겠다 :)
제이쿼리 코드중에서 1.12.4를 자꾸 빼먹어서 스크롤이 먹지 않았던 것 같다
$(".nav > ul > li").mouseenter(function(){
$(".nav > ul > li > ul").stop().slideDown(200);
});
$(".nav > ul > li").mouseeleave(function(){
$(".nav > ul > li > ul").stop().slideup(200);
});
그리고 위에 ajax.googlepis.com/ajax/libs/jquery/1.12.4/jquery.min.js를 쳐줘야하는데
마지막 숫자를 잘입력하지 않는 습관이 나도 몰래 있었나보다...;;
이거 스크롤 내리기 공부 좀 더 해야 할 것 같다 레이아웃까진 코드 입력숫자와 형식이 비슷했는데
메뉴가 생기고 나서 코드가 몇 배로 더 생겨나고 제이쿼리코드 까지 생기고 밑에 옵션까지 입력하다 보니
외워야할 형식과 코드까지 생겨서 난이도가 점점 더 어려워 지는 것 같다 그리고 오타와 띄어쓰기 빼먹은 코드 확인은
매번 강조해도 모자라지 않은 것 같다...;;
'디자인' 카테고리의 다른 글
| 세로유형의 탭메뉴 디자인 (0) | 2020.11.24 |
|---|---|
| 웹메뉴탭 가로유형3 (0) | 2020.11.23 |
| 웹디자인 기초배우기 (0) | 2020.11.18 |
| 웹디자인 기능사 독학으로 도전 (0) | 2020.11.16 |
| 디자인 배워 봅시다 더욱! (0) | 2020.11.09 |