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

HTML 색상표 손쉽게 찾아보기

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

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

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

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

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

[CSS] 반응형웹페이지의 필수 - 미디어쿼리 활용

반응형웹페이지에서 제일처음 고려해야할건 역시나 익스플로러 7과 익스플로러8 인것 같습니다. 왜냐하면 웹표준을 따르지도 않을 뿐더러 플러그인을 통한 반응형지원이 완벽하지가 않아서 디자이너/퍼블리셔분들이 항상 고생하고 계십니다. 반응형 웹페이지 사용은 간단합니다. 각각 디바이스 기기의 해상도에 맞춰서 화면 크기를 잡아주는 것이죠. 반응형 웹페이지는 크게 3가지 정도로 나눌수 있겠네요. 디바이스 해상도 기준을 320px, 1024px 로 잡고 320px 이하면 모바일, 1024px 이하면 타블렛, 이상이면 데스크탑 이렇게 말이죠. 크게 개념을 잡으면 간단하게 나뉘어지지만. 스마트폰도 레피나 해상도 지원되는것도 있고, 타블렛도 일반 피씨 해상도 넘어선지 오래입니다. 게다가 모바일은 가로세로 전환이 있죠. 그래서..

• format_list_bulleted IT정보센터/HTML & CSS
• · 2015. 6. 26.
• textsms

[CSS] 반응형웹 개발시 기종별해상도 테스트 사이트

반응형 페이지를 테스트할 때 기기별로 화면이 제대로 나오는지 확인이 필요할때 유요한 사이트가 있어서 소개해 드립니다. 예전에는 반응형웹페이지를 개발 할때 모든 기기를 구비해서 테스트할 수 없으니 모발일버전으로 소스를 고쳐서 화면 해상도 바꿔가면서 확인하거나, 아는 지인들 불러서 잘나오냐고 확인했던 기억이 있네요. 기종별해상도테스트 : http://troy.labs.daum.net 사이트에 들어가시면 상단위의 URL에 링크주소를 입력하시고 왼쪽의 기기를 선택하시면 기기별로 화면이 제대로 표시되고 있는지 확인이 가능합니다. 이런거 만드신분 상줘야 됩니다. 진짜 ㅠ 디바이스를 선택하면 선택한만큼 나열이 되구요 한화면에서 상태를 전부 볼수 있어서 유용하네요. 국내 발매된 거의 모든 모바일기기가 있는것 같네요. ..

• format_list_bulleted IT정보센터/HTML & CSS
• · 2015. 6. 23.
• textsms

반응형 CSS 프레임워크 부트스트랩을 체험해보다

이것도 나중에 포스팅 하겠지만 제로보드로 현재 작업중인 사이트가 있습니다. 근데, 제가 JAVA 쪽이다 보니 PHP는 전혀 몰라서 문법적으로 수정하는걸 못하고 있었어요.. 대략 끼워 맞춰서 억지로 만들고는 있지만 원하는 기능을 구현을 못하고 있었는데, 우연히 부트스트랩 동영상을 봤습니다. 아... 퍼블리싱을 공부하고 있는 저한텐 거의 충격이네요. jQueryMobile을 봤을 때도 그냥 모바일용 프레임 워크라는 느낌이었는데.. 이건 뭐 혁명 수준입니다. 우선 유툽 보시죠!! 영어의 압박이 있지만 후반부에 드래그해서 반응형 페이지를 만드는걸 보면 왠지 xCode 느낌도 나구요.. 드림위버가 제일 비슷한것 같네요. 예전에 퍼블리싱 공부하던책에서 부트스트랩을 잠깐 언급한게 기억이 납니다. 잘짜여진 CSS집합체..

• format_list_bulleted IT정보센터/HTML & CSS
• · 2015. 6. 17.
• textsms