SEA

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..

07-1 텍스트를 표현하는 다양한 스타일 글꼴 관련 스타일 (앞에 font 로 시작함) font-family : 글꼴 종류를 지정 font-size : 글자 크기를 지정 font-style : 글자를 이탤릭체로 표시할 것인지를 지정 font-weight : 글자의 굵기 지정 웹 폰트 사용자 시스템에 설치되지 않은 폰트를 내가 사용하려 할때 폰트에 대한 정보를 웹 서버에 올려놓고 사용자가 웹사이트에 접속했을때 폰트 정보까지 함께 다운로드하게 하는 방법. 폰트를 가지고 있다면 서버에 업로드할 수도 있고, 이미 웹상에 올라온 폰트를 사용할 수도 있지만 이는 네트워크의 속도 영향을 많이 받음. 독특한 폰트를 사용하고자 하는 경우, 구글 웹폰트를 많이 사용함 구글 폰트 사용하기 language 옵션에서 한국어 선..

06-1 CSS의 기본 스타일이란... form을 이용해 회원가입 양식을 만들었을 때, 스타일을 적용하면 정렬, 마우스를 가져가면 색이 바뀌든지, 배치방법, 글꼴 등 보여지는 방식을 정해줌. 내용과 디자인을 분리하기 위해 html과 css를 구분함 스타일을 적용하기 위해서, head 태그 안에 추가해줬을 뿐임 반응형 웹 디자인 스타일시트를 사용하는 또다른 목적은 여러 기기에 탄력적으로 반응하는 문서를 만들기 위함임 요새는 웹사이트에 pc, 태블릿, 스마트티비, 스마트폰 등 여러 기기들이 접근함. 따라서 각 기기별로 화면 크기에 맞게끔 웹사이트 배치를 바꿔줘야함 이또한 css의 미디어쿼리를 이용하는 것임 스타일 작성하기 스타일은 각 하나하나를 말함 스타일시트 문서 하나 안에 여러 스타일을 모아놓은 것 스타..