Archive: 2019

2019
WebCSS

CSS-가운데 정렬(1)-margin auto

주황색 박스를 제외한 오른쪽 공간이 auto 값으로 설정할 수 있는 margin의 최대 영역을 의미한다. 주황색 박스가 block 요소(div)이기 때문에 한 줄 전체 영역을 소유한다. 그러므로 오른쪽 공간은 쓰지 않은 것뿐 주황색 박스가 소유한 공간이다. block 요소는 한 줄에 하나씩 블럭이 쌓이듯 배치된다. text-align: center

TIL

190420_TIL(Sass 특강)

4월 20일(토)Sass 특강 패스트캠퍼스에서 제공하는 주말 하루 특강을 들었다. 짧은 시간이었기 때문에 깊은 내용을 듣지는 못하고 기초적인 내용 위주로 Sass를 맛(?)봤다. 다른 프로그래밍 언어들과는 많이 다른 css를 여타 프로그래밍 언어들과 비슷하게 사용할 수 있는 점이 새로웠다. 여지껏 알던 css가 아닌 낯선 느낌이었다. css를 사용하면서

TIL

190419_TIL(버블정렬(Bubble sort)정리)

4월 19일(금) 오늘은 기본정렬 알고리즘 중 버블정렬에 대하여 배웠다. 이 포스트에서는 나름대로 이해한 내용을 정리해보려 한다. 버블정렬을 이용하여 오름차순으로 정렬하기 위한 방법이다. 먼저, 버블정렬의 매커니즘을 알아보자. 다음과 같은 리스트가 있다고 가정하자 1li=[6, 2, 1, 4] 먼저, 버블정렬은 0번 인덱스의 들어있는 값과 1번

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