CSS 이미지 전체화면 띄우기

CSS 이미지 전체화면 띄우기

HTML을 이용해서 화면을 배치할때 이미지를 가운데로 배치하고 싶을 경우 사용하는 방법입니다. 이미지 태그를 사용하여 이미지를 배치하는 경우 부모태그에 의해서 배치가 의도하는 데로 동작을 안하는 경우가 있습니다. 특히 이미지 배치의 경우 문제가 되는부분이 가로, 세로의 정렬 부분인데요. 의외로 CSS 초보인 경우 이부분에 문제를 많이 겪고 있으신분들이 많이 있습니다. 간단한 방법은 아래와 같으며 내용은 하나하씩 설명을 드리겠습니다. 클래스이름 { max-width: 100%; max-height: 100%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; overflow: auto; position: fixed; } 원본 이미지 크기를 그대로 표시하기 위해서 ..

  • format_list_bulleted IT정보센터/HTML & CSS
  • · 2019. 6. 2.
  • textsms
아이콘 문자표 손쉽게 적용하기

아이콘 문자표 손쉽게 적용하기

요즘 한창 만들고 있는 쇼핑몰이 제로보드로 구성이 되어 있습니다. 화면을 만들고 기능을 추가하는데 메뉴구조를 파악못하면 건들기도 힘들게 되어 있던데 그러한 모듈화가 의외로 도움이 되는 부분이 많습니다. 파악만 되면 정말 쉽게 고칠 수 있게 되어 있더군요. 메인페이지를 수정하면서 메뉴별 아이콘을 적용해야 될 일이 생겼습니다. 기존에 제가 알고 있는 상식이라면 아이콘를 사이즈별로 만들고 첨부파일로 업로드한뒤 이미지의 링크를 걸어서 표기를 하는 방법이었는데요. 참으로 효율없는 방식이었습니다. 요즘에는 CDN이 워낙 잘되어 있어서 라이브러리 로드한뒤 그냥 가져다 쓰면 되게 되어있더군요. 2017/06/27 - [IT정보/PHP] - PHP 현재시간 표기방법총정리 2017/06/26 - [블로그/검색엔진최적화] ..

  • format_list_bulleted IT정보센터/HTML & CSS
  • · 2017. 6. 30.
  • textsms
CSS 스타일 분석 파이어버그 사용하기

CSS 스타일 분석 파이어버그 사용하기

혹시 티스토리 스킨 변경이나 스타일 시트를 변경하실때 어떻게 하시나요? 변경을 하고 업로드하고 어떻게 나오는지 확인하고 이렇게 하고 계신다면 정말 힘들게 작업을 하시는 건데요. 제가 알려드리는 방법은 이렇게 CSS변경을 하고 어떻게 바뀌는지 즉각적으로 알 수 있는 방법입니다. 이번시간에는 CSS 스타일 분석 방법으로 파이어버그를 이용한 방법을 알려드리겠습니다. 2017/05/03 - [마케팅/블로그] - 티스토리 블로그 방문자 카운터 알아보기 2017/05/02 - [TIPS] - 시놀로지 크론탭 사용하기 2017/05/01 - [마케팅/블로그] - 네이버에서 블로그스팟이 얼마나 노출이 잘될까? 2017/04/29 - [마케팅/FastBoot] - FastBoot 영어메뉴 한글 변경 및 메뉴추가 CSS ..

  • format_list_bulleted IT정보센터/HTML & CSS
  • · 2017. 5. 3.
  • textsms
HTML 색상표 손쉽게 찾아보기

HTML 색상표 손쉽게 찾아보기

웹코딩을 하다보면 애매한 색상을 마주할때가 있습니다. 당연히 포토샵 스포이드로 색상을 찍어보면 손쉽게 처리할 수 있지만 디자인툴을 안거치고 간편히 색상을 알 수 있는 방법은 없을까요? 웹디자이너분들은 당연히 필수적으로 디자인툴(포토샵,일러스트) 등으로 이미지를 재가공해서 사용해야 하지만, 퍼블리싱을 위한 목적이라면 이런 무거운 툴은 필요가 없겠죠 그래서 간단하게 색상 정도만 맞추는 정도라면 색상표를 보고서 바로 적용하면 작업에 능율이 오릅니다. HTML 색상표 보려고 포토샵을 켤 수는 없으니까요. 참고 사이트에 들어 갔더니 영어가 나옵니다. 하지만 간단한 영어니 겁먹지는 마세요~ 그럼 참고 링크 살펴보겠습니다. 아래 사이트에 들어가주세요. 링크 : http://html-color-codes.info 사이..

  • format_list_bulleted IT정보센터/HTML & CSS
  • · 2015. 7. 28.
  • textsms

퍼블리싱을 위한 HTML5 시작하기

개발자로 전업하기전에 잠깐 편집디자인일을 한적이있습니다. 그래서 처음 개발일을 시작할때도 사실은 웹마스터라는 직업이 한창 유행할때 그쪽으로 진로를 잡았습니다만, 너무 사람이 많아 취업이 안된다는 이야기를 듣고 포기를 한 기억이 나네요. 현재 개발자, 디자이너, 퍼블리셔 이렇게 나뉘어지는 영역구분이 퍼블리셔의 영역이 점점 디자이너로 넘어가는 단계인것 같습니다. 예전에는 디자인 영역인 CSS부분에 접근하기에 너무 힘들었지만 이제는 CSS조차 프레임워크로 손쉽게 반응형웹을 만들 수 있으니 전문분야가 점차로 엷어지는 느낌입니다. 물론 세부적으로 들어가면 역량이 차이가 나겠습니다만, 우리나라 클라이언트들이 그런걸 신경을 쓰나요? 중간과정이야 어떻든 결과물만 만들어내면되니 참 걱정이네요. 개발자로서 장래에 대한 대..

  • format_list_bulleted IT정보센터/HTML & CSS
  • · 2015. 7. 19.
  • textsms

모바일웹 개발시 전화번호 자동링크 삭제처리

반응형웹 개발을 하다가 전화번호가 아닌, 사업자번호였는데 링크가 자동으로 생성되어서 난감했던 기억이 있습니다. 특정숫자패턴이 있으면 전화번호로 인식이 되는것 같더군요. 그래서 이것을 없애볼려고 이것저것 알아보다 자동리크를 방지하는 태그를 알게되었습니다. 사용법은 아주 간단합니다. 메타태그를 추가하셔서 방지하는 방법입니다. 이렇게 하면 자동링크기능이 빠지게 됩니다만, 꺼꾸로 이게 필요할 경우나, 전화번호, 이메일, 주소등 특정한 부분만 링크를 삭제하고 싶다면 개별옵션을 사용해서 제어를 할 수 있습니다. 위의 메타태그는 전화번호,이메일,주소 모두의 자동링크를 사용하지 않습니다. 항목 설명 telephone = no 전화번호 형식의 자동링크를 사용하지 않음 email = no 이메일 형식의 자동링크를 사용하지..

  • format_list_bulleted IT정보센터/HTML & CSS
  • · 2015. 7. 8.
  • textsms