부트스트랩(bootstrap) 기본 Layout 만드는 법을 간략하게 적는다.
부트스트랩 레이아웃으로 만들면 PC(Desktop/Notebook) 와 스마트폰에서 하나의 코드로 동시 이용할 수 있어서 편리하다.
설계 및 분석
1. 윈도우 기반 APM 인 autoset9 에서 지정한 web 디렉토리 밑에서 파일이 생성되도록 한다.
2. brackets 에디터에서 파일을 생성하고 Shift + Tab키를 눌러 html 기본 코드를 자동 생성한다.
3. https://www.w3schools.com 에서 bootstrap 메뉴를 선택하여 부트스트랩과 관련된 헤더 코드를 복사하여 추가한다.
4. Layout 는 상단 메뉴, 좌측 메뉴, 본문, footer 로 구현한다.
5. CSS를 추가한다.
|
Link2Me
<div class="box">
<div class="something1"></div>
<div class="something2">
<a class="mylink">My link</a>
</div>
</div>
$(".mylink").click(function() { // 아래 4개는 모두 동일한 결과 반환
$(this).parent().siblings(".something1");
$(this).parent().prev(); // if you always want the parent's previous sibling
$(this).parents(".box").children(".something1");
$(this).closest('.box').children('.something1');
});
closest()는 모든 부모 요소를 대상으로하여 원하는 요소만 선택자로 가져올 수 있다.
만약 하나가 아닌 모든 부모 요소를 반환할 필요가 있다면 parents() 메소드를 사용한다.
parent()는 해당 요소의 바로 위에 존재하는 하나의 부모 요소를 반환한다.
Link2Me
메뉴 만들기
설계 및 분석
1. 메뉴를 만들 아이템을 ul 태그, li 태그로 HTML 코딩한다.
2. CSS 로 가로 메뉴를 만든다.
코드를 하나 하나 추가하면서 어떻게 변경되는지 Editor(brackets 과 크롬브라우저 개발자 모드 활용)에서 확인
기본적인 메뉴 형태가 만들어졌다면 이제 제어를 위한 코드는 jQuery 를 이용하여 구현한다.
3. jQuery 를 이용하여 메뉴를 선택하면 배경 이미지가 변경되도록 코드 구현한다.
- 현재 적용된 class 를 제거한다.
- 선택된 li에 class 를 추가한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Title </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('#navigation li').on('click',function(){ $('#navigation li').removeClass('selected'); $(this).addClass('selected'); }); }); </script> <style> #navigation li { list-style: none; padding: 5px; float: left; cursor: pointer; } #navigation .selected { background-color: red; color: white; }
</style> </head> <body> <ul id="navigation"> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> <li class="selected">메뉴4</li> <li>메뉴5</li> <li>메뉴6</li> </ul> </body> </html> |
Link2Me
