티스토리

LEVEL IS NULL
검색하기

블로그 홈

LEVEL IS NULL

minshxxx.tistory.com/m

컴퓨터공학도의 블로그

구독자
0
방명록 방문하기

주요 글 목록

  • [#8] 원 페이지 사이트와 패럴랙스 스크롤링 효과 만들기 08-1 원 페이지 사이트 만들기 CSS를 사용해 원 페이지 사이트 만들기 웹 문서에 fullPage.js 플러그인 적용하기 원 페이지 사이트에서 내비게이션 지정하기 - 앵커 사용하기 공감수 0 댓글수 0 2021. 2. 23.
  • [#7] 화면 크기에 반응하는 미디어 쿼리 07-1 뷰포트와 미디어 쿼리 알아보기 뷰포트(viewport): 화면의 크기나 기기의 방향을 체크할 때 사용하는 것 width=device-width: 문서 너비를 현재 기기의 너비에 맞춥니다 initial-scale=1: 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정합니다. 미디어쿼리(media query) @media [only|not] 미디어 유형 [and 조건] * [and 조건] @media screen and (min-sidth:921px) and (max-width: 1260px) {} 07-2 미디어 쿼리 사용하기 방법 1. 외부 CSS 파일로 정의하기 @import url(css 파일 경로) 미디어 쿼리 조건 방법 2. 웹 문서에서 직접 정의하기 07-3 가변 이미지 가변 이미.. 공감수 0 댓글수 0 2021. 2. 22.
  • [#6] 웹의 기본은 텍스트 - 타이포그래피 06-1 웹과 타이포그래피 타이포그래피 (Typography): 활자 글꼴의 배열, 글자를 활용한 모든 디자인을 가르키는 말 06-2 빅 타이포그래피 빅 타이포그래피(Big Typography): 화면에 커다랗게 표시하는 텍스트 06-3 웹 폰트 크기와 색상 조절이 자유롭다. 모든 기기에서 볼 수 있다. 06-4 무료로 사용하는 구글 웹 폰트 fonts.google.com 공감수 0 댓글수 0 2021. 2. 22.
  • [#5] 풀 스크린 배경과 캐러샐 05-1 풀스크린 배경 이미지나 동영상을 화면 전체에 가득 채워서 풀 스크린으로 보여주는 기법 05-2 이미지로 만드는 풀 스크린 배경 1. 풀 스크린 배경에 적합한 이미지 2. 화질이 좋은 이미지 3. 용량이 크지 않는 이미지 05-3 동영상으로 만드는 풀 스크린 배경 HTML5에는 태그가 이썽서 플러그인 프로그램 없이도 웹 브라우저에서 직접 도영ㅇ상을 재생할 수 있음 1. 동영상 파일은 용량이 작을수록 좋다 2. 로딩되는 동안 보여줄 포스터 이미지도 함께 준비 3. 가급적 오디오는 제거하고 넣는 것이 좋음 05-4 풀 스크린 배경에 어울리는 고스트 버튼 '고스트 버튼(Ghost Button)': 테두리나 배경이 투명하고 희미해서 버튼이 아닌 것처럼 문서 배경이 그대로 드러나는 버튼 장점: 배경 이미지.. 공감수 0 댓글수 0 2021. 2. 22.
  • [#4] 클릭에서 스크롤로! - 원 페이지 사이트 04-1 한 페이지에 모든 내용을 담다! - 원 페이지 사이트 원 페이지(One Page) 사이트: 웹 사이트를 한 페이지로 만드는 것, 한 페이지에 모든 내용이 다 들어 있기 때문에 따로 메뉴를 선택하지 않아도 위아래나 좌우로 스크롤하면서 보고 싶은 내용을 찾아볼 수 있어 편리, 화면마다 다르게 디자인하면 스크롤할 떄 새로운 내용을 볼 수 있으므로 사용자의 호기심 자극, 전체 사이트를 한페이지로 만들거나 시작 페이지만 한 페이지로 만들기도 함 내용이 많을경우 내비게이션 바에 있는 메뉴를 클릭해 한 번에 원하는 위치로 옮겨 갈 수 있게 설계하는 것이 좋음 페이지를 로딩하는데 일반 사이트보다 시간이 걸리므로 텍스트와 이미작 화면 가득 채워져 있는 사이트보다는 여백이 많은 사이트를 원 페이지 사이트로 만드는.. 공감수 0 댓글수 0 2021. 2. 22.
  • [#3] 반응형 웹에 어울리는 그리드 레이아웃 디자인 03-1 그리드 시스템 웹 사이트를 구성할 때 콘텐츠를 유연하게 배치하기 위한 시스템 '960px의 12칼럼 그리드 시스템'이란 화면 너비를 960px로 하고 12개의 칼럼으로 나눈 그리드 시스템 [ 특징 ] 시각적으로 안정된 디자인 단순한 웹 디자인 내용을 원하는 대로 배치 03-2 그리드 레이아웃을 만드는 방법 4가지 방법1. 가변 그리드 레이아웃 사이트의 레이아웃을 백분율로 지정하는 것, 웹 요소 배치가 그대로 유지되기 때문에 단순한 레이아웃의 사이트에 적합 방법2. CSS의 float 속성을 사용한 그리드 레이아웃 float 속성은 특정 요소를 화면의 왼쪽이나 오른쪽으로 띄우고 다른 내용은 그 옆으로 흘러가도록 만드는 속성 방법3. 플렉스 박스를 사용한 그리드 레이아웃 그리드 레이아웃을 기본으로 .. 공감수 0 댓글수 0 2021. 2. 22.
  • [#2] 입체에서 평면으로! - 플랫 디자인 02-1 불필요한 요소는 최소하하다! - 플랫 디자인 플랫 디자인: 평평하고 납작한 디자인, 웹 요소에서 입체감을 주는 효과를 제거하고 단순하게 표현하는 기법 02-2 플랫 디자인, 이렇게 만들어야 한다. - 플랫 디자인에서 '직관성'이 제일 중요하다. - 일반적으로 6~8가지 색상을 메인 색상으로 사용함. - 타이포그래피도 중요한 역할을 함. 02-3 구글의 디자인 철학 - 머터리얼 디자인 구글 서비스나 안드로이드에서 일관되게 사용하고 있는 디자인 '플랫 디자인'이라는 경향을 받아들이면서 또 다른 구글의 디자인 철학이 더해진 구체적인 디자인 방법 02-4 콘텐츠에 집중하다! - 카드형 디자인 페이스북이나 핀터레스트 등 한꺼번에 많은 양의 정보를 표시해야 하는 사이트에서 내용을 카테고리별로 묶어 일부 내.. 공감수 0 댓글수 0 2021. 2. 22.
  • [#1] 다양한 화면 크기에 최적화하다! - 반응형 웹 01-1 반응형 웹이란? 사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여주는 웹 01-2 반응형 웹은 만능일까? 장점 1. 기기의 화면 크기나 해상도에 구애받지 않는다. 장점 2. 화면의 변화에 즉시 반응 장점 3. 어느 기기에서든 사이트 주소가 같다. 장점 4. 유지 관리가 편하다 장점 5. 최선 웹 표준을 따름 단점 1. 예전 브라우저 버전과 호환성에 문제가 있을 수 있음 단점 2. 사이트 디자인이 단순함 01-3 반응형 웹 디자인 패턴 살짝 수정 패턴: 화면 너비를 조절하면 레이아웃에는 변화 없이, 글자 크기나 이미지 크기만 변함 유동형 패턴: 살짝 수정 패턴과 비슷하지만 모바일 화면에서는 레이아웃이 바뀔 수 있음 칼럼 드롭 패턴: 여러 칼럼으.. 공감수 0 댓글수 0 2021. 2. 22.
  • [#4] 함수와 메서드 자바스크립트에서 함수는 function 키워드와 화살표(=>) 기호로 만드는 두 가지 방법이 있습니다. 타입스크립트 함수는 이를 바탕으로 타입 기능을 추가한 것입니다. 이번 장은 함수를 효과적으로 구현하는 방법과 클래스의 메서드를 구현하는 방법을 설명합니다. 04-1. 함수 선언문 function 키워드로 만드는 함수 선언문 구조 function 함수 이름(매개변수1, 매개변수2[, ...]){ 함수 몸통 } void 타입 값을 반환하지 않는 함수는 반환 타입이 void입니다. void 타입은 함수 반환 타입으로만 사용할 수 있습니다. void 타입의 예 function printMe(name: string, age: number): void { console.log(`name: ${name}, age:.. 공감수 0 댓글수 0 2021. 2. 21.
  • [#3] 객체와 타입 이 장에서는 자바스크립트가 아닌 타입스크립트 시각에서 객체와 타입의 개념, 그리고 관련 구문을 살펴봅니다. ​03-1. 타입스크립트 변수 선언문 자바스크립트와 타입스크립트의 기본 타입 유형 자바스크립트 타입 타입스크립트 타입 수 타입 Number number 불리언 타입 Bollean boolean 문자열 타입 String string 객체 타입 Object object let과 const 키워드 ES5 자바스크립트는 variable의 앞 세 글자를 딴 var라는 키워드를 사용해 변수를 선언할 수 있습니다. ESNext 자바스크립트는 let과 const라는 키워드를 도입해 다른 프로그래밍 언어와 같은 방식으로 동작하게 했음 ESNext 에서는 var 사용을 지양함. let 변수 이름 [= 초깃값] con.. 공감수 0 댓글수 0 2021. 2. 21.
  • [#2] 타입스크립트 프로젝트 생성과 관리 이 장에서는 타입스크립트로 프로젝트를 개발하는 방법과 타입스크립트의 import와 export 키워드를 사용해 여러 개의 소스 파일을 관리하는 방법, 그리고 tsc 타입스크립트 컴파일러의 설정 파일인 tsconfig.json의 내용을 살펴봅니다. ​02-1. 타입스크립트 프로젝트 만들기 npm i -D typescript ts-node타입스크립트 프로젝트는 보통 typescript와 ts-node 패키지를 설치합니다. 앞에 @types/ 가 붙는 타입 라이브러리들은 항상 index.d.ts라는 이름의 파일을 가지고 있고 이 파일의 내용을 바탕으로 라이브러리가 제공하는 함수들을 올바르게 사용했는지 검증합니다. ​ 타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 tsconfig.json 파일이 있.. 공감수 0 댓글수 0 2021. 2. 21.
  • [#1] 타입스크립트와 개발 환경 만들기 이 장에서는 타입스크립트에 관해 알아보고, 타입스크립트 개발 관련 프로그램 설치 방법을 살펴보겠습니다. 01-1. 타입스크립트란 무엇인가? 자바스크립트의 3가지 종류 - ES5 - ESNext - TypeScript 트랜스파일 어떤 프로그래밍 언어로 작성된 소스코드를 또 다른 프로그래밍 언어로 된 소스코드로 바꿔주는 프로그램을 말함 텍스트로 된 소스코드를 바이너리 코드로 바꿔주는 컴파일러와 구분하기 위해서 생긴 용어 01-2. 타입스크립트 주요 문법 살펴보기 ESNext의 주요 문법 1) 비구조화 할당 2) 화살표 함수 3) 클래스 4) 모듈 5) 생성기 6) Promise와 async/await 구문 ​ 타입스크립트의 고유의 문법 살펴보기 1) 타입 주석과 타입 추론 2) 인터페이스 3) 튜플 4) 제.. 공감수 0 댓글수 0 2021. 2. 21.
  • [Vue.js] #2 CORS 정책 오류 해결 기존에 Vue 서버만 돌리고 있던 구조에서 express 서버를 따로 가동시켜 Vue에서 해당 닉네임을 express로 요청 처리하고 express는 받은 닉네임을 가지고 riot api 서버에 요청한 뒤 데이터를 받은 후 그대로 Vue 서버로 전송하여 처리하니 Cors 문제가 해결되었다. 공감수 0 댓글수 0 2021. 2. 11.
  • Do it! 스터디 완료 후 받은 책 공감수 0 댓글수 0 2021. 2. 6.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.