잡기36 [어라운지]"한컵 정원"을 분양 받았네요. https://www.arounz.co.kr/event/goods_event.php?event_ix=0298 어라운지 선유도점 카톡에 가입하고 간단한 설문만 하면 받을 수 있는 이벤트!! Go Go [2015.04.25] 정원이도 받고 따뜻하고 맛난 아메리카노도 한잔! 어라운지는 방문할 때마나 푸근한 느낌이예요. 따뜻한 봄햇살 때문이겠지요? but 비올 때도 좋다능.... [2015.04.27] 정원이를 사무실에 데리고 와서 정성스럽게 물을 뿌려주었네요. 어떤 넘이 태어날 지 설레는 마음으로... 영양제를 주고 싶은 맘... 꾹 누렀어요. * 영양 과다로 많은 아이들을 보내버렸답니다. 어디로??? [2015.04.28] 이렇게 빨리? 불어오르다니... 오돌도톨하게 부직포 안에서 꿈틀거리는 정원이를 만날 .. 2015. 4. 28. [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. [HTML 5 반응형 웹디자인_2015.03.25] 1. 오리엔테이션 e-book만 다운 받아놓고 해야지 해야지 하던 HTML5 교육을 이제 시작하게 되었다. 서울시 인재개발원 HTML5로 구현하는 반응형웹사이트.... 3일 교육으로 만족스럽지는 않겠지만 항상 그렇지만 기본적인 것만 배우고 나머지는 본인의 노력.... 노력....이 관건이라능 나에게는 새로운 분야라 미리 예습도 하고 기대가 크다. 웹프로그래밍 입문은 미리 읽었고 모던 웹디자인은 교육 중에 읽어 나갈 계획... 교육 교재는 반응형 웹디자인(HTML5와 CCS로 작성하는) 거금 3마넌짜리... 책 표지도 산뜻하고... 외국저자라 군더더기 없는 깔끔한 내용편집이 눈에 띈다. http://book.naver.com/bookdb/book_detail.nhn?bid=7013962 이해를 돕기 위한 전반적인 개괄 설명.. 2015. 3. 31. 나와 함께한 아보카도... 2014.02.13 이제 아보카도도 길러 보려고요. 아보카도 살은 먹고 안에 큼직한 씨가 숨어 있네요. 씨는 요구르트에 구멍내서 고정하고 크린싱크림 통에 넣은 후 씨가 2/3 잠기게 수경재배했어요. 아가야! 건강하게 자라렴 2014.03.20 새 식구가 생길 것 같다. 1달하고 일주일 전에 물에 담궈 두었던 아보카도씨가 쩍 갈라지고 안에 아가씨가 보이기 시작! 역시 너 살아있는 생명이었구나... 하지만 내가 해줄께 없구나. 그저 발아하고 뿌리 내리고 잎이 나고.... 할때까지 그저 예쁜 화분 하나 사놓고 기다릴 뿐... 새 식구가 생길 것 같다. 1달하고 일주일 전에 물에 담궈 두었던 아보카도씨가 쩍 갈라지고 안에 아가씨가 보이기 시작! 역시 너 살아있는 생명이었구나... 하지만 내가 해줄께 없구나. 그.. 2015. 3. 16. 풀무원 쿠킹 클래스 풀무원 쿠킹 클래스 우연한 기회에 풀무원 쿠킹 클래스에 참여항 200명 응모자중 12명에 드는 행운을 얻었다. 2가지 요리를 배우고 직접도 실습도 하고... 그리고 아줌마들과의 수다로 스트레스를 날려 버리는 행복한 시간들이었다.깨끗하고 쾌적한 요리 시설이 돋보이는 풀무원 쿠킹 클래스는 수서역 4번 출구 로즈데일빌딩 3층 풀무원 본사에서 이루어졌고맛난 요리는 두부티라미슈와 깻잎페스토파스타!귀가길에는 푸짐한 선물까지...풀무원 사랑하지 않을래야 사랑하지 않을 수 없다. 광팬 등록!!!작년엔 엄마와 어린이를 위한 영어 쿠킹 클래스가 있었고 올해도 계획하고 있단다.EBS 영어 선생님과 영어로 하는 요리 교실이다. 어린아이가 있으신 분들은 도전해 보시길... 2014. 8. 8. 이전 1 2 3 다음 728x90
