SEA

1. 먼저 HTML 내용을 작성함 -div로 구획 나눠주고 -각 div 안에 타이틀(h1 안에 a태그), 네비(div로 한번 더 묶고, 안에 ul, li로 표현하는 등), 본문-h2, p, button 등 작성 2. CSS - 기본설정 * { margin: 0; padding: 0; box-sizing: border-box; } - 폰트 지정 : 구글에서 지원하지 않는 폰트는 폰트파일 다운받아서 사용 (@font-face 사용해서 내가 적용할 폰트패밀리 규칙을 만들어주고, 파일 경로를 지정, 포맷도 알려주게끔) -상세설정 * 전체 영역 width는 100% 줬는데 height는 100%가 아닌 100vh 준 이유 : 100%로 설정해도 적용이 안됨(번거롭게 더 설정해줘야 100% 적용됨), 100vh로 ..

* Ajax 비동기 자바스트립트 + XML 웹서버와 비동기로 통신해 웹 페이지를 동적으로 갱신하는 프로그래밍 기법 요즘은 XML 보다 JSON을 주로 사용함 페이지의 새로고침 없이 서버에 요청이 가능하므로 전체 페이지가 아닌 페이지 일부분만 업데이트할 수 있음 서버로부터 데이터를 받고 작업 수행함 * Ajax 옵션 정리 *** jquery 버전마다 처리방식, 지원여부 등이 다를 수 있음 - url 요청할 url -type GET, POST, DELETE, PUT HTTP 통신의 종류를 설정함. 기본값은 GET. - async 비동기 통신 플래그. 기본값은 true, 요청~응답까지 사용자는 비동기 처리를 계속함, false로 설정 시(동기 통신) 응답이 있을 때 까지 사용자는 기다리게 됨 - data 서버..

17-1 문서 객체 모델 (DOM) 1. 문서 객체 모델 알아보기 2. DOM 요소에 접근하고 속성 가져오기 문서 계층 구조 자바스크립트에서는 프로그래밍 할수있는 모든 대상을 객체화함 웹 문서의 요소들을 프로그래밍하기 위해서는 각각의 요소들을 객체화시켜야하고, 이를 문서 객체 모델이라 함 문서 객체 모델(DOM) : 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 예) 웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체로 관리함 웹 문서의 요소(태그)들은 다음과 같이 요소의 계층 관계로 나타낼 수 있다 이 요소(태그)들만으로는 웹문서를 다 이해할 수 없음 -> 각 태그의 속성, 태그가 감싸고 있는 텍스트의 내용까지 포함해서..

16-1 자바스크립트와 객체 객체 알아보기 자바스크립트와 내장 객체 객체 알아보기 자바스크립트에는 이미 여러 객체들이 포함되어있음. 그중에서 Date 객체를 중심으로해서 객체의 사용방법에 대해 알아보자. 객체(object)란 프로그램에서 인식할 수 있는 모든 대상을 말함 자바스크립트에서 데이터를 저장하고 처리하는 기본 단위 자바스크립트 객체 자바스크립트 안에 미리 정의해놓은 객체가 있음 문서 객체 모델(DOM) : 웹 문서 안에 포함된 이미지, 링크, 텍스트필드 등을 모두 별도의 객체로 관리하는 것. 웹 문서를 좀더 다이나믹하게 꾸미기 위해 하나하나 요소를 조절하기 위해 사용함 브라우저 관련 객체 : 웹 브라우저 정보를 객체로 관리함. 웹 브라우저 주소, 화면 등을 별도의 객체로 관리함 내장 객체 : 웹..

15-1 함수와 이벤트 함수 처리해야할 명령들을 묶어놓은 것. 두 수를 더해서 알람창으로 보여주기 위한 명령들 var num1 = 2; var num2 - 3; var sum = num1 + num2; alert("결과값 : " + sum); 이를 함수로 묶어서 나타내보자 function addNumber() { var num1 = 2; var num2 - 3; var sum = num1 + num2; alert("결과값 : " + sum); } addNumber(); 함수의 시작과 끝이 명확해짐 정의된 함수의 이름을 호출하여 언제든 사용할 수 있음. [기본형] function 함수이름(매개변수) { 수행할 명령들 } var과 let let는 ES6(ECMAScript6, 자바스크립트 표준화 6버전) 이..

13 자바스크립트와 첫 만남 웹 플랫폼을 사용자와 연결해주는 매개체가 웹 브라우저임 브라우저에서 프로그래밍 할 수 있는 언어 중 하나가 자바스크립트 자바 스크립트로 무엇을 할까 1. 웹 요소를 제어 -웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음 -웹 사이트 ui 부분에 많이 활용 (예. 마우스 포인터를 올렸을 때 펼쳐지는 메뉴, 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 컨텐츠) 2. 웹 애플리케이션을 만듦 -최근의 웹 사이트는 단순 정보 제공만이 아니라 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작( 온라인 지도의 길찾기 서비스, 데이터 시각화 서비스 등) 3. 다양한 라이브러리를 사용할 수 있음 웹을 중심으로 하는 서비스가 늘어나며 브라우저가 처리할 일들이..

12-1 반응형 웹과 미디어 쿼리 같은 웹사이트더라도 접속하는 pc, 스마트폰 등 여러 기기의 화면에 맞추어 웹사이트의 내용은 유지하며 레이아웃을 바꾸어 나타남. 이때 사용하는 디자인기법을 반응형 웹 디자인이라 하고, 사용하는 기법을 미디어쿼리라 함. 반응형 웹디자인 접속하는 브라우저 화면 크기에 따라서 사이트 레이아웃을 바꾸는 것을 말함. -모바일 기기를 위한 뷰포트(viewport) 뷰포트 : 실제 내용이 표시되는 영역 pc 화면과 모바일 화면의 픽셀 표시 방법이 다름. 따라서 모바일 화면에서 의도한대로 화면을 표시하기 위해서는 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소하여 내용을 표시할 수 있음 뷰포트 지정시 태그 이용함 [기본형] 종류 설명 사용 가능한 값 기본값 width 뷰포트 너비 dev..

11-1 트랜지션과 애니메이션 변형 transform(변형) :웹문서에서 웹 요소에 움직이는 효과를 주는것. 특정 요소의 크기나 형태 등 스타일이 바뀌어 시각적인 효과를 줌. 2차원 변형/ 3차원 변형 -2차원 변형 수평이나 수직값만을 가져 수평이나 수직으로 웹 요소 변형됨 -3차원 변형 2차원 변형에 z값을 추가하면 3차원 변형이 됨 z값은 앞뒤로의 이동을 의미, 값이 커질수록 보는 사람쪽으로 다가옴 transform이라는 키워드 뒤에 필요한 함수를 적어주면 됨 위치를 옮길때 -> translate() 크기를 조절 -> scale() transfrom: translate() 가로 방향(x축)으로 옮길때는 translateX(), 세로 방향(y축)으로 옮길 때는 translateY(), x와 y를 한번에..

09-1 이미지와 그라데이션 효과로 배경 꾸미기 배경색 지정 : background-color 속성 body 태그에 배경색 속성 지정하면 배경색 깔림 배경 이미지 지정 : background-image 속성 background-color 대신 background-image 속성 이용하면 배경색 대신 배경 이미지 지정할 수 있음 url 키워드 사용, 괄호 안에 사용할 이미지 파일 경로 넣어줌 원래 이 이미지는 작은 크기이지만, 다른 옵션을 주지 않으면 웹화면에 가득 차도록 양옆, 위아래로 반복되게 이어붙여짐 다만, 이 이미지를 양옆으로만 또는 위아래로만 이어붙여지도록 하고싶다면 background-repeat 속성을 이용함 가로로만 반복-> repeat-x, 세로로만 반복->repeat-y, 가로세로 모두..

08-1 레이아웃을 구성하는 CSS 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록 레벨 요소 : 브라우저 화면에서 한 줄 전체를 차지 - 인라인 레벨 요소 : 자기가 필요한 부분만큼만 차지 - 박스모델 패딩 : 콘텐츠와 테두리 사이의 영역 마진 : 다른 박스 모델과 박스 모델 사이의 영역 브라우저-검사 들어가서 computed 탭에 들어가보면 박스모델이 보임. 컨텐츠 영역, 패딩, 테두리, 마진의 각 지정된 값이 보임 padding은 따로 지정하지 않으면 '-' 로 표시됨 margin은 따로 지정하지 않으면 브라우저 기본값이 지정됨 박스모델 - 콘텐츠 영역 실제로 내용이 들어가는 부분을 말함. 크기 지정 - width(너비), height(높이) 콘텐츠 영역의 크기만 가지고 배치하다보면 paddin..