Category: TIL

2019
TIL

190416_TIL(반응형 이미지, 그리드 레이아웃)

4월 16일(화)반응형 배경이미지 전체 페이지를 배경이미지로 덮는 웹 페이지 또는 마크업에 들어가지 않아도 될 이미지 요소를 반응형으로 만들고 싶을 때 사용하는 방법. padding trick을 사용한다. iframe 태그를 반응형으로 만드는 원리와 유사하다. 반응형 배경이미지 예제 우측 상단 Edit in JSFiddle 링크를 클릭하여 뷰포트 넓이를

TIL

190415_TIL(반응형 웹,미디어 쿼리,반응형 이미지)

4월 15일(월)반응형 웹 마크업 구조가 심플 할 때 유용하다. 반응형 디자인이 되기 위해서는 콘텐츠가 물과 같아야 한다. 모바일 버전을 먼저 만드는 것을 권장한다. px(픽셀) 단위의 사용은 지양해야 한다. 모바일 환경과 같은 환경에서 이미지를 줄이는 것만이 능사가 아니다 사용자에게 보여주어야할 부분을 잘라내어서 확대해야 할 때도 있다. 반응형

TIL

190412_TIL(transition, transform, IR, hexo menu, jsfiddle)

4월 12일 (금) transition(전이) 속성과 transform(변형) 속성에 대하여 배웠다. Transition(전이)요소 박스에 지정된 속성이 점진적으로 변환하는 기능을 의미. 애니메이션 효과를 적용할 수 있다. Transform(변형)요소 박스의 크기 변형 및 회전, 기울임 등을 지정할 수 있다. 2차원 변형 뿐만 아니라 3차원 변형도 가능

TIL

190411_TIL(web cafe event section markup,figure tag, hexo theme, IR기법,IS기법)

4월 11일 (목) 어제 사용해 보기로 한 카카오 오븐을 오늘 html markup 설계에 사용해 보았다. 사용 방법이 직관적이어서 적응하는데 오래 걸리지 않았고 손으로 수작업 하는 것보다 짧은 시간 안에 더욱 그럴듯한 모양새를 갖출 수 있었다. html markup 설계 뿐만이 아니라 css 설계에도 활용할 수 있을 것 같다. 수업 중에 figure

TIL

190410_TIL(LINE 웹페이지 header html,css, fontello)

4월 10일 (수) 오늘은 과제로 LINE Plus Coporation 의 header 부분의 HTML markup 과 CSS 작업을 하였다. 코딩에 들어가기에 앞서 아래 사진과 같이 수작업으로 설계를 해보았다. 수작업으로 설계를 해보니 꼼꼼한 작업을 할 수 있다는 장점이 있지만 시간이 많이 소요되어서 지루하게 느껴지는 단점이 있다. 다음 설계는 카카오 오

TIL

190409_TIL(탭메뉴,white-space:nowrap, .on() method, 유사배열,async and defer)

4월 9일 (화) 오늘은 탭메뉴를 float , position 속성 등을 사용하여 다양하게 구현해보았다. html 이나 css 보다는 탭메뉴를 동적으로 만들기 위한 방법을 정리해보고자 한다. 동적인 탭메뉴를 만들기 위한 class를 처음에 보여질 탭메뉴 태그의 작성한다. 위에서 만든 class에 display:block; 스타일을 입힌다. 나머지 첫

TIL

190408_TIL(Float, Clearfix)

4월 8일 (월)수업시간에 float 만을 활용하여 layout을 잡는 연습을 하였다. float 란 일반적인 흐름(normal flow)를 벗어나 부모 요소의 왼쪽이나 오른쪽에 배치하는 것이다. float로 요소를 배치하는 것은 상당히 까다로운 일인데 그 이유는 다른 요소의 배치에 영향을 미치기 때문이다. float가 배치에 영향을 미치는 것을 해제하기

TIL

190331-0401_TIL(프로젝트 보완, box-sizing 속성, box model, flex box)

3월 31일 (일) 오늘은 프로젝트에서 아직 부족한 점을 보완하기 위해서 오후 시간을 비워뒀다. 총 세 가지의 보완사항이 있었는데 첫번째는 to-do 입력 시 input 창 안이 공백이어도 입력이 되는 문제를 보완해야 하는 사항이었다. 이 문제는 간단하기 때문에 가장 먼저 처리하기로 했다. 조건문에 input 창 안이 공백이면 alert 창을 띄움으로써 해

TIL

190327-0330_TIL(프로젝트, 개발 프로젝트 단계 특강)

3월 30일 (토) 오늘은 패스트캠퍼스에서 주최하는 기초개발특강(UX, UI, 개발 프로젝트 단계)를 듣고 왔다. 자리가 제한되어 있었기 때문에 신청한 사람들 중에 선착순으로 들을 수 있었는데 다행히 제한인원 안에 들었다. 이 특강을 신청한 이유는 평소에도 실제 개발 업무에서 프로젝트가 어떻게 진행되는지 궁금했기 때문이다. 오늘 강의로 그 궁금증을 풀 수

TIL

190326_TIL(프로젝트 2일차)

3월 26일 (화) 어제 날씨 api를 이용하여 만든 기능은 온도, 습도, 구름량 등 많은 데이터를 알려주지만 데이터를 가져올 때 내가 위치를 지정해주어야만 했다. ##예) 서울의 날씨 데이터, 런던의 날씨 데이터## 이 정도 기능에 만족할 수는 없었고 내가 지금 현재 위치한 장소에 날씨 데이터를 받아오고 싶었다. 어떻게 기능을 구현할 수 있을지 생각해보니