웹 페이지에서는 자바스크립트를 사용해 사용자 반응 등을 처리합니다. 이 절에서는 웹 페이지에서 자바스크립트를 사용하는 방법을 살펴보겠습니다. 앞에서 살펴본 스타일시트처럼 두 가지 방법으로 웹 페이지에 자바스크립트를 추가할 수 있습니다. 내부 자바스크립트HTML 페이지에 자바스크립트 코드를 추가하는 가장 쉬운 방법은 HTML 페이지 내부에서 자바스크립트 코드를 곧바로 작성하는 것입니다. script 태그를 사용해 HTML 페이지 내부에 자바스크립트 코드를 작성합니다. 외부 자바스크립트 실제로 자바스크립트 코드를 입력하다 보면 1000행이 넘을 때가 많습니다. 이러한 코드를 한 파일에 입력하면 매우 복잡해지기 때문에 자바스크립트 파일을 분리해서 사용합니다. 외부 자바스크립트 파일은 script 태그의 src..
웹 페이지는 스타일시트를 사용해 스타일을 적용합니다. 이 절에서는 앞에서 작성한 HTML 페이지에 다음 두 가지 방법으로 스타일시트를 적용해 보겠습니다. 내부 스타일시트 스타일시트를 가장 손쉽게 사용할 수 있는 방법으로 , style 태그를 사용해 HTML 페이지 내부에 스타일시트를 직접 입력합니다. 내부 스타일시트를 사용하는 방법은 간단하므로 [기본 예제 2-2]에서 설명합니다. 외부 스타일시트 스타일시트가 짧다면 HTML 페이지 내부에 입력해도 괜찮습니다. 하지만 여러 사람이 함께 협업을 해야 하고 프로젝트의 규모가 클 때는 HTML 페이지 내부에 스타일시트를 삽입하는 것보다는 외부 스타일시트를 사용하면 좋습니다. 외부 스타일시트는 스타일시트를 별도로 생성하고 link 태그의 href 속성을 사용해 ..
이제 마지막으로 웹 페이지에 자바스크립트를 적용하겠습니다. 모듈별로 나누어 설명하려고 [코드 14-10]처럼 script 태그를 세 부분으로 구성했습니다. 자바스크립트 태그 기본 구성 3.1 풀다운 메뉴 구성 풀다운 메뉴는 종합 예제에서 살펴보았으므로 어렵지 않을 것입니다. [코드 14-11]처럼 .outer-menu 태그에 hover() 메소드를 적용하고, 각 상황에 맞게 display 속성을 변경합니다. 풀다운 메뉴 구성 // 풀다운 메뉴$(document).ready(function () {// 풀다운 메뉴$('.outer-menu').hover(function () {$(this).find('.inner-menu').css('display', 'block');}, function () {$(thi..
기본 레이아웃이 구성된 우베 페이지에 스타일시트를 하나씩 적용해 보겠습니다. 2.1 초기화 초기화 부분에서는 [코드 14-2]의 요소를 초기화 합니다. 종합 예제에서도 언급했듯이 태그에 적용되는 기본 스타일이 조금씩 다른 문제를 해결하려면 스타일을 강제로 지정해야 합니다. 초기화 코드 2.2 헤더 구성 헤더는 [코드 14-3]처럼 구성합니다. 7장에서 다룬 '절대 위치를 사용해 요소를 중앙에 배치'를 적용해 제목을 중간에 위치시키고, float 속성을 사용해 각 메뉴를 양쪽에 배치합니다. 부모 태그에 height 속성을 강제로 부여했으므로 overflow 속성은 별도로 입력하지 않았습니다. 또 header title 태그에 text-indent 속성을 부여해 기존의 내부 글자 Interest를 화면에서 ..
위 파일을 사용해 시작합니다. pinterest_start.html은 [코드 14-1]처럼 구성되어 있고, 실행결과는 [그림 14-2]와 같습니다.그다지 어려운 구성은 아니므로 자세한 설명은 생략합니다. 시작 페이지 Intesrest정보데이터데이터데이터데이터데이터데이터사용자데이터데이터데이터데이터FollowingCategoriesEverythingPopularGiftLorem ipsum dolor sit ametLorem ipsum dolor sit amet UserLorem ipsum dolor sit amet.
기본 레이아웃이 구성된 웹 페이지에 스타일시트를 하나씩 적용해 보겠습니다. 3.1 초기화 초기화 부분에서는 [코드 13-5]의 요소를 초기화합니다. 종합 예제에서도 언급했듯이 태그에 적용되는 기본 스타일이 조금씩 다룬 문제를 해결하려면 스타일을 강제로 지정해야 합니다. 초기화 코드 3.2 공통 구성 공통 구성은 [코드 13-6]처럼 작성합니다. 이렇게 하면 클래스에 container 라고 입력한 태그가 모두 중앙 정렬되며, 위쪽과 아래쪽에 여백이 생깁니다. 공통 구성 3.3 헤더 구성 헤더는 [코드 13-7]처럼 작성합니다. 대부분 간단한 내용이므로 이 장의 앞부분에서 살펴본 테크닉을 사용해 input 태그로 풀다운 메뉴를 만들었습니다. 그리고 label 태그로 input 태그의 체크 상태를 변경할 수 ..
jpg 파일 두 가지와 html 파일을 사용해 시작합니다. html 파일은 [코드 13-4]처럼 구성되어 있습니다. 그다지 어려운 구성은 아니므로 자세한 설명은 생략합니다. 단, 모바일 페이지이므로 viewport meta 태그를 사용했습니다. 시작 페이지 ▼HanbitbrandNetworkStoreSupportMauris imperdiet eros mi, et tempor est prottitor eget. Praesent mattis tellus eu neque pharetra, quis pulvinar sem rhoncus. Morbi maximus justo urna, ac malesuada nulla suscipit in.ⓒ1991-2017 Example. All rights reserved.
보통 CSS와 자바스크립트를 구분할 때 'CSS는 디자인할 때 사용하고, 자바스크립트는 사용자와 상호 작용할 때 사용한다'고 말합니다. 그런데 사실 CSS는 사용자와 상호 작용할 때도 사용할 수 있습니다. 프로젝트를 본격적으로 만들기 전에 상호 작용할 때 사용할 수 있는 CSS부터 알아봅니다. 1.1 동위 선택자 5장에서 CSS 선택자를 배웠습니다. [표 5-1]에서 CSS 선택자를 설명할 때 다루지 않은 선택자가 하나 있는데, 바로 '동위 선택자' 입니다. 동위 선택자는 동위 관계(같은 단계에 있는 것)에서 뒤에 위치한 태그를 선택할 때 사용합니다. [표 13-1] 도우이 선택자 형태 설명 선택자 A + 선택자 B 선택자 A 바로 뒤에 위치하는 선택자 B를 선택 선택자 A ~ 선택자 B 선택자 A 뒤에..
IT로 먹고사는 사람들의 IT 생활리뷰
