본문 바로가기

전체 글692

쉽게 만드는 오렌지 마말레이드 처음 만들때는 갈팡질팡했는데 역쉬 두번째 만드니 요령이 생긴다. 다른 요리에도 사용하려고 많이 만들어 봤다. 오렌지 중간크기 6개 설탕 600g 오렌지는 베이킹소다로 문질러 닦은 후 베이킹소다 물에 담궜다가... 물기를 완전 제거한다. 오렌지 껍질을 감자칼로 겉껍질만 살살 저며서 가는 채....난 건더기가 좋아서 껍질을 6개 모두 사용했다.흰 속껍질은 되도록 들어가지 않게 하고 레몬 반개로 즙을 만들었다. 알맹이를 믹서로 가는데 이때도 흰 속껍질을 잘 제거한다. 오렌지즙만 내려서 바글바글 끓으면 분량의 설탕을 넣고 졸여준다. * 찬물에 작은스푼으로 떨어뜨려봐서 완전히 풀어 지지도... 덩어리 바닥에 가라앉다가 바닥에서 확 퍼지는... ㅋㅋ 어렵다. 그냥 주걱으로 떨어뜨려봐서 점성 있게 똑똑 떨어질때까지 .. 2015. 4. 1.
[HTML 5 반응형 웹디자인_2015.03.27] 9. 반응형 웹프로젝트 [ 들어가면서...] ㅇ 프로젝트 구조 - [WebContent] : html 파일 - [WebContent]-[js]: 자바스크립트 파일 - [WebContent]-[css]: CSS파일 - [WebContent]-[img]: 이미지파일(png) - [WebContent]-[video]: 동영상 파일 - [WebContent]-[audio]: 오디오 파일 ㅇ 반응형 비디오 삽입 - making iframe video content work in a responsive web design : , - using the to FitVids(FitVids jQuery plugin) . 구글 콘텐츠 전송 네트워크 사용 . fitvids.js파일을 [js]폴더에 저장 후 . 비디오가 있는 영역에 제이쿼리 사용 -.. 2015. 4. 1.
[HTML 5 반응형 웹디자인_2015.03.27] 8. CSS3 [ 들어가면서...] ㅇ CSS3로 할 수 있는 것들 - 코드 몇 줄로 작업처리 둥근모서리, 배경 그레이디언트, 텍스트 새도, 박스 새도, 사용자정의 글꼴 - 자바스크립트의 일부 기능 대체 - 호버 상태 애니메이션 처리 [ CSS3 실습 ] ㅇ CSS3 규칙 - 스타일시트를 구성하는 규칙집합(rule set or rule)은 selector와 선언 블록{ }으로 구성 - selector : 태그명, id속성 값("#"), class속성(".") 값 h1{ } - 선언 블록{ } : 선언(속성+값, 콜론(:)으로 구분) 기술 / 선언과 선언 사이는 세미콜론(;)으로 구분 h1{ color: green; font-size: 20px; } ㅇ 벤더 프리픽스 - CSS3모듈 표준 규격을 미승인(W3C) -> 브.. 2015. 4. 1.
[HTML 5 반응형 웹디자인_2015.03.27] 7. 웹폼 [ HTML5에서 웹폼 구성 ] ㅇ .... type으로 구분 - 모든 폼 태그는 사이에 위치 - ,와 같은 폼태그에 태그를 붙임 이름 ㅇ 태그를 사용해 관련된 태그를 그룹화 취미 낮잠 TV시청 취미 낮잠 TV시청 ㅇ 태그의 기존 타입 :텍스트 필드 : 패스워드 필드 : 체크박스 : 라디오 버튼 : 파일 선택기 :[submit]버튼 :[reset]버튼 :[button]버튼 ㅇ 태그에 추가된 타입 :이메일 필드 :URL필드 :전화번호 필드 :숫자 필드, ▲/▼눌러 선택 :숫자 필드, 슬라이드 막대를 사용해 숫자 선택 :날짜 선택 필드 :시간 선택 필드 :검색 필드 : 색상선택 ㅇ 폼태그에서 새로 추가된 속성 list, max, min, pattern, placeholder(입력도우미, input 칸에 예시.. 2015. 4. 1.
[HTML 5 반응형 웹디자인_2015.03.27] 6. 반응형 웹디자인을 위한 HTML5 [ 들어가면서...] ㅇ 참고사이트 - www.w3chools.com ㅇ HTML5 보일러 플레이트 사용 .... 모방은 벤치마킹... 좋은 거 ㅋㅋ - 필수적인 CSS 및 미디어쿼리 제공 - http://html5boilerplate.com/ get a custom build 다운(initializr-verekia-4.0.zip) *v5.0.0.이 풀버전 - copy해 와서 코딩 - 새로운 project 만들기 - 새 project에 initializr(initializa 압축풀면) 폴더 내의 폴더와 화일을 복사 ------> 반응형 사이트의 템플릿 페이지를 얻어낼 수 있음. * HTML5 보일러 플레이트 다운로드 http://html5boilerplate.com/ [Get a custom build].. 2015. 3. 31.
[HTML 5 반응형 웹디자인_2015.03.26] 5. 유동형 레이아웃 [ 들어가면서... ] ㅇ 미디어쿼리의 한계 - 고정적인 디자인 폭은 다음 단계의 폭까지 매끄럽게 표현되지 않음 - 콘텐트 짤림 - 고정된 픽셀기반의 레이아웃을 유동적인 비례형 레이아웃으로 변경 필요 : px -> % [ 유동형 레이아웃 ] .... 화면의 크기에 따라 적절히 배분되는 레이아웃 ㅇ 고정 레이아웃을 비례형 레이아웃으로 수정 1) 고정크기(px)를 비례형(%)으로 변환하기 위한 공식 타깃 / 컨텍스트 = 결과 2) 작성단계 - 1단계 : 가장 바깥 태그를 비율로 설정 id속성 값이 wrapper의 비율 960px -> 96%로 변환 : 1단계 - 컨텍스트(960px) 설정 - 2단계 : #wrapper의 하위태그인 id속성값이 header, footer, navigation를 비율로 설정 9.. 2015. 3. 31.
[HTML 5 반응형 웹디자인_2015.03.26] 4. 미디어 쿼리 [ 들어가면서...] ㅇ 미디어쿼리 - 화면의 크기에 반응하는 페이지 배치 => 화면의 크기에 반응하는 디자인에 필요 - CSS3 모듈 중 하나 - device의 display 능력에 따라 CSS3 스타일 지정 - CSS 파일내의 가장 마지막에 기술 ㅇ CSS파일의 작성 순서 1. 공통사항을 작성 2. 특정태그에만 적용하는 사항을 작성 3. 미디어쿼리를 작성 - 특정태그가 화면크기에따라 달라지는 부분을 작성 [ 미디어 퀴리 구문 작성 위치 ] ㅇ CSS파일(.css)에 @media로 기술 화면의 크기에 따라 자연스럽게 흐르듯이 배치 -> 화면의 크기에 따라 한줄에 배치되는 메뉴의 수의 달라짐, 다음줄로 나머지 메뉴가 마저 배치됨 * float 사용 ① float 지정 - float : 방향(left/ri.. 2015. 3. 31.
[HTML 5 반응형 웹디자인_2015.03.25] 3. 반응형 웹의 개요 [ 들어가면서...] ㅇ HTML5 웹페이지 기술방식 - HTML5 : 를 사용해 영역을 구분하고, 자바스크립트가 담당하던 처리의 일부를 HTML태그의 속성에서 처리, 한글 인코딩utf-8 - CSS3 : 화면에 HTML의 태그를 표현 및 자바스크립트가 담당하던 처리의 일부를 담당 - JavaScript : 처리나 서버에 페이지요청 + HTML5, CSS에서 처리할 수 없는 기능등을 담당, 캔버스(Canvas)에서 사용하면 게임의 작성도 가능. [ 반응형 웹] (1) 반응형 디자인 예시 http://eclipse.org/ ... 배치 변경... 유동형 레이아웃 사용...확대, 축소... 미디어쿼리 + 유동형 레이아웃 사용 (2) 반응형 웹사이트를 참고하기 좋은 사이트 http://mediaqueri.es.. 2015. 3. 31.
[HTML 5 반응형 웹디자인_2015.03.25] 2. 작업 환경 설정 [ 들어가면서...용어 짚어보기 ] ㅇ 미디어 쿼리 - device에 따라 전체적인 layout 구성이나 size가 유동적으로 반응하는 것을 말한다. - 유동형 레이아웃 .... 비례형 레이아웃 : 과거에는 %로 조정했으나 pixel로.... 다시 현대에는 %로 적용 유동형 이미지, 유동형 그리드... 논란이 많은 부분이라고... 교재 저자도 설명을 아끼는... 나랑 상관은 없음 ㅇ HTML5 특징 - 시맨틱 : 예를 들면 태그와 태그로.... 코딩을 위해 선택된 태그만 봐도 뒤에는 구문이 오고 뒤에는 숫자가 오겠구나 하는 의미를 추론할 수 있도록 코딩하는 것을 말한다. - WAI-ARIA : 웹접근성 (Web Accessibility Initiative - Accessible Rich Internet .. 2015. 3. 31.
728x90

티스토리툴바