Archive: 2019/4

2019
TIL

190418_TIL(파이썬 기초정리)

Jump to python 내용 정리파이썬이란 무엇인가? 1990년 암스테르담의 귀도 반 로섬이 개발한 인터프리터 언어이다. 파이썬과 C는 찰떡궁합이다. 전반적인 뼈대 -> 파이썬, 빠른 실행속도를 필요로 하는 부분 => C 파이썬은 줄을 맞추지 않으면(들여쓰기) 실행이 되지 않는다. “Life is too short, You need pytho

TIL

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

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

TIL

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

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

WebCSS

transition and transform

Transition(이전)과 Transform(변형) 이해하기 Trasition(전이) 요소 박스에 지정된 속성이 점진적으로 변환하는 기능을 의미한다. 이 기능을 이용하면 속성이 변화하는 과정을 통해 애니메이션 효과가 적용되어 동적인 느낌을 줄 수 있다. transition property 속성 요소에 지정된 속성을 변환하고자 할 때 사용하는 속성. 속성

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가 배치에 영향을 미치는 것을 해제하기