Stories.pe.kr
여행과 요리에 관한 이야기
반짝이는 여행의 순간과 따뜻한 한 끼의 기록
반짝이는 여행의 순간과 따뜻한 한 끼의 기록
HTML의 태그는 크게 블록 요소(block element)와 인라인 요소(inline element)로 나누어 집니다. 이 부분을 명확히 이해하고 있어야 CSS를 사용하는데 어려움이 없습니다. 이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 “왜 적용이 되지 않지?” 라는 상황이 발생할 수 있습니다. 예를들면…. 인라인 요소는 height가 적용되지 않는다. 인라인 요소는 width가 적용되지 않는다. 블록 요소는 vertical-align 이 […]
아이콘 폰트인 폰트어썸 (Font Awesome)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 폰트어썸 (Font Awesome) 폰트어썸 (Font Awesome) 홈페이지 바로가기 폰트어썸은 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 다양한 형태의 아이콘이 빠르게 업데이트되고 있으며 깃헙에서 51000여개의 star를 받고 있을 정도로 사랑을 받고있습니다. 현재 유료서비스를 시도하고 […]
자동차 오너로써 HUD (전방표시장치 [Head Up Display])만 봐도 대단해 보이는데 해드램프를 이용한 네비게이션까지 나온다고 하니 UX 발전의 끝은 어디인가 하는 생각이 듭니다. 메르세데스-벤츠에서 해드램프를 이용한 네비게이션인 디지털 라이트(Digital Light)를 공개했다고 합니다. 디지털 라이트를 쉽게 설명한다면 해드라이트에 고성능 프로젝터를 달아놓은 것이라고 보면 될것 같은데요. 메르세데스-벤츠는 눈부심 방지가 적용된 2백만 픽셀의 해상도에 해당하는 헤드 라이트를 장착헸디고 합니다. […]
아이콘 폰트인 XEICON을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. XEICON XEICON 홈페이지 바로가기 한 시대를 풍미했던 PHP 무료게시판 서비스인 제로보드가 네이버의 서포트를 받으면서 Xpressengine 바뀌었습니다. XEICON은 그 Xpressengine에서 서비스를 제공하고 있는 아이콘 폰트 서비스 입니다. 제공하는 방법과 사용 방법이 폰트어썸 (Font Awesome)과 거의 흡사하여 […]
웹디자인을 하면서 레이아웃을 잡는 방법에 대해서 시대별로 많은 변화가 있었습니다. Web이 나오기 시작한 초창기에는 Table을 이용하여 화면의 레이아웃을 잡았고 웹표준, 웹접근성이 이슈화 되면서 시멘틱한 마크업이 대세가 되면서 CSS의 DIV를 이용한 방법으로 레이아웃을 잡았습니다. CSS3로 버전업이 되면서 레이아웃 구현애 대한 방법으로 Flexbox가 탄생하게 되었고 2017년 현재 레이아웃을 편리하게 구현하기 위해서는 Flexbox를 사용하여 구현하는 것이 최선이라 할 […]
웹디자인을 하다보면 input이나 textarea등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input이나 textarea에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline은 […]
이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 ‘…’으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. <div class=”txt_line”>통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line […]
소매치기로 부터 나의 핸드백을 지키는 확실한 제품이 나왔습니다. 아직 시제품이긴 하지만 상당히 아이디어가 좋습니다. 말레이시아의 업체인 Ash Be Nimble에서 개발을 하였고 제품명은 Handbag Dytonator이라고 합니다. 핸드백 엑세서리 형태로 판매가 된다고 하네요. 사용방법은 내 핸드백이 소매치기를 당했을 경우 핸드폰으로 Handbag Dytonator에게 폭발코드를 문자메시지를 보내면 Handbag Dytonator에 있는 SIM카드가 이것을 인식하여 약 5초 후에 폭발을 한다고 합니다. […]
겨울의 마지막을 보내기 위해 2017년 2월 24일.. 대관령 삼양목장을 다녀왔습니다.대관령쪽에 유명한 대형목장이 삼양목장과 양떼목장이 있으며 보통은 겨울이 아닌 봄, 여름, 가을에 양들이 초원을 자유로이 거니는 모습과 양에게 먹이를 주기위해 주로 방문하는 장소입니다.하지만 우리는 겨울의 설경을 보기위해 대관령 삼양목장을 다녀왔습니다. 겨울에 방문하는 삼양목장의 장점은 봄, 여름, 가을에는 목장에서 운행하는 정기버스를 타고 이동을 하며 구경을 해야 하는 […]
처음에 미디어 쿼리를 디바이스별로 정리를 해볼까 하다가 새로운 디바이스가 나올때마다 해상도 파악하고 기록하고… 삽질할 것을 생각하니 엄두가 나지 않아서 범용적으로 사용할 수 있는 방법으로 정리를 해야할 것 같아 포스팅을 합니다. 그래도 먼저 디바이스별 해상도에 대해서 궁금한 사람이 있을 수 있으니 신상 디바이스까지 업데이트를 잘 해주고 있는 사이트를 2개 공유하고 넘어 갑니다. mydevice screensiz.es 기본 설정 […]
