SEA

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의 미디어쿼리를 이용하는 것임 스타일 작성하기 스타일은 각 하나하나를 말함 스타일시트 문서 하나 안에 여러 스타일을 모아놓은 것 스타..

01 웹 개발 시작하기 클라이언트 -사용자가 웹 사이트에 접근할 때 사용하는 기기 -좁은 의미로는 웹 브라우저를 의미함 ->클라이언트 개발 = 프런트엔드 개발 서버 -인터넷에 연결된 컴퓨터 -웹 요소와 여러 정보가 저장됨 ->서버 개발 = 백엔드 개발 html (html5) css(css3) 반응형 웹디자인 구현에 필요 자바스크립트 지금은 html5안에 모든 기능이 다 포함되어있지만, 내용 부담을 줄이기 위해 따로 분류함 02 웹 개발 환경 만들기 웹 브라우저(크롬)와 웹 편집기(vs code)가 필요 vs code 설치 > 한국어 팩 설치 후 vs code 재실행(자동 업뎃 후 한글 적용 안될시에도 재실행하면 됨) > 배경색 변경은 관리 아이콘(톱니바귀)에서 색 테마 선택 작업폴더 지정 => 파일>폴더..

코드 구조 여러개의 구문은 세미콜론을 기준으로 구분함 줄 바꿈으로도 구문을 구분할 수 있음(세미콜론 자동 삽입) but 세미콜론 자동 삽입이 동작하지 않을 때도 있음 함수 선언문, 반복문 등 코드블록({...}) 안에서는 세미콜론 안붙여도 괜찮음 엄격 모드 모던 자바스킙트에서 지원하는 모든 기능을 활성화하기 위해서는 스크립트 맨 위에 'use strict'를 적어줘야 함 'use strict'는 스크립트 최상단이나 함수 본문 최상단에 있어야 함 이게 없어도 코드는 정상적으로 동작하지만, 모던한 방식이 아니라 옛날 방식으로 동작함. 몇몇 모던 기능과 클래스는 엄격 모드를 자동으로 활성화함 변수 -변수 선언 시 사용하는 키워드 let const - 상수 정의 시 사용(한번 값을 할당하면 더는 값을 바꿀 수 ..

Chap 6. 서블릿 기초 6.1 서블릿의 세 가지 기본 기능 서블릿 기본 기능 수행 과정 176p 요청, 응답 관련 API - javax.servlet.http 패키지에 있음 177p HttpServletRequest 의 여러 가지 메서드 178p 6.2 태그 이용해 서블릿에 요청하기 179p 서블릿과 JSP는 HTML, CSS, 자바스크립트에 자신의 기능을 추가하여, 즉 서로 연동하여 동작함. 특히 사용자의 요청은 HTML의 태그나 자바스크립트로부터 전송받아서 처리함. * 태그와 태그 잘 알아두기 - 클라이언트에서 서버로 데이터 전송하는 기능을 담당 181p 태그- name 속성의 값과 실제 입력한 데이터가 쌍으로 전송됨 태그의 여러 가지 속성 181p 6.3 서블릿에서 클라이언트의 요청을 얻는 방법..