본문 바로가기

공부/html, css

크로스브라우징 CSS핵 퍼블리싱을 하다보면 크로스브라우징을 신경쓰지 않을 수가 없습니다! 여기서 크로스브라우징이란 어느 브라우저에서든 동일하게 보여지도록 구현하는것을 이야기하는데 저는 크로스브라우징에 문제가 생겼을때 최후의 수단으로 CSS핵을 사용하곤 합니다. 그럼 브라우져 버전별로 알고있는 핵을 적을테니 필요하신 분들은 참고하세요~ 위 소스는 예전에 공부한다고 서칭해서 정리해 뒀던건데... 안써본 것들도 몇개있네요.
마우스오버 시 효과 넣기 (background-position) 마우스를 올렸을 때 백그라운드 포지션이 바뀌면서 롤오버 효과를 내는 것이 가능합니다. 소스를 보면 하단과 같습니다. 메뉴 1 메뉴 2 메뉴 3 이때 아래와 같이 버튼의 롤오버와 온을 한 이미지로 만들어 줍니다. 위에 마우스를 올리지 않았을 때, 아래쪽에 마우스를 올렸을때 이미지를 연결해 줍니다. 여기서 중요한게 마우스를 오버했을때 포지션위치를 바꾸는 것인데, a:hover; 에서 background-position:0 -(이미지 height에 1/2 높이)px; 를 꼭 체크합니다. 본 포스팅에 샘플파일을 첨부했으니 다운받아서 테스트 고고!!
마우스오버 시 백그라운드 색상 변환 요즘 디자인을 중요시 생각하다보니 이미지 위주의 사이트가 많이 늘어나고 있습니다. 이미지 위주의 사이트를 제작하게 되면, 텍스트와 정보를 좀 더 효과적으로 전달하기 위한 도구나 방법이 필요한데요. 제가 오늘 추천해 드리려는 방법은 마우스를 오버를 했을때 위처럼 백그라운드를 어둡게 눌러주면서 텍스트를 띄어주는 방식입니다. 위 방법은 이미지를 강조하고 해당 내용이나 전하려는 인포를 좀 더 가독성 있게 전달할 수 있어서 자주 사용하고 있습니다. 소스는 아래와 같이 상당히 간단합니다. 좋은과일 고르는 방법!! pic background에 이미지 주소를 교체해 주시고 사이에 원하시는 문구를 써주시면 됩니다. 밑에는 완성된 모습 움짤입니다~
선택자 (구조선택자) : nth-child, first-child, first-child 퍼블리싱을 할 때 CSS 선택자를 이용하면 선택이 훨씬 용이한데요. 오늘은 그 종류에 대해서 이야기 해보려고 합니다. nth-child(odd) 홀수 요소 nth-child(even) 짝수 요소 nth-child(숫자) 위에서 몇번째 요소 nth-last-child(숫자) 마지막에서 몇번째 요소 first-child 첫번째 요소 last-child 마지막 요소 쉽게 이해를 돕기 위해서 아래와 같이 코딩을 했을 때 각 선택자 별로 선택되는 모습을 보여드리도록 하겠습니다. li:nth-child(odd) li:nth-child(even) li:nth-child(3) li:nth-last-child(2) li:first-child li:last-child
div 이동 간단하니까 먼저 소스를 보여드리겠습니다!! 링크시킬 이미지나 텍스트에 (이걸 눌렀을때 위쪽으로 옮겨가는거죠) 설정을 해주세요. 그리고 이동하고자 하는 부분에 이런식으로 아이디를 지정해 주시면 끝!!! ※ top 대신 원하시는거 사용하셔도 되요!! test용 html을 하단부분에 첨부할테니 궁금하신분은 파일을 확인해 보세요~^-^
div 좌우 배열 정렬하기 html 요소에 대해서 포스팅 했을때 요소에 대해서 한번 언급했지만, div는 블럭 요소로 가로값이 얼마든지 공간을 다 차지해 버리기 때문에 자동으로 줄바꿈이 됩니다. div 가운데 정렬은 동적일 때, 가로값이 픽스 되었을 때 두 가지를 함께 전에 포스팅 했으니, 오늘은 div를 좌우로 배열하는 법을 포스팅하겠습니다. div를 좌우로 인라인요소처럼 배열하고 싶을때는 선 객체에 float:left;로 왼쪽 정렬을 설정하고, 뒤에 오는 객체는 display:inline-block;로 내용 영역을 채워줍니다. 아래 소스를 첨부했으니 테스트 해보세요.
div 가운데 정렬 (세로) 오늘은 div를 세로로 중앙정렬 하는법에 대해서 알아보려고 합니다. 예전에 div가로로 가운데 정렬하는 법을 포스팅 했었는데요! 그 내용이 궁금하신 분은 아래 링크를 클릭하시면 됩니다~ div 가운데 정렬 보러가기 div 가운데 정렬처럼 세로 중앙 정렬도 아주 간단하니까~ 한번 따라해보세요!
div 가운데 정렬 (가로) 테이블에서는 align="center" 을 사용하면 가운데 정렬이 쉽게 되지만 div 같은 경우에는 그렇지 않습니다. 예전에는 position:relative; left:50%; margin-left:-(컨텐츠 가로값의 반)px; 을 이용해서 div를 정렬했는데, margin:0 auto; 만 넣어주면 간단하게 해결됩니다. margin:0 auto; 을 사용하다보면 ie8 에서는 안먹힐 때가 종종있는데 그럴때는 상위 div에 text-align="center" 속성을 추가해 줍니다. 그런데 margin:0 auto;같은 경우는 .box 의 가로값이 픽스되었을때 가능한 정렬법입니다. (위와 같이 작업을 하고 가로값을 써주지 않으면 가운데 정렬이 안된다는;;;;) 만약에 .box의 가로값이 유동적이고 픽스되..
뷰포트 설정 (viewport) 태그를 사용하면 페이지의 초기 비율과 최대/최소 비율, 그리고 사용자에 의한 스케일 조정 여부등을 설정할 수 있습니다. 위와 같이 메타(meta)태그의 이름(name)에 뷰포트(viewport)라고 지정되어 있으면 이는 스케일을 인식합니다. 그리고 content 속성에 스케일링에 관련된 내용을 기술하면 되다. Content속성 주요 내용은 아래와 같습니다. initial-scale : 페이지가 처음 로딩 될 때의 화면 확대 비율 maximum-scale : 최대 확대 비율 (0~1.0) minimum-scale : 최대 축소 비율 (0~1.0) user-scalable : 사용자가 줌으로 확대나 축소에 대한 가능 여부 (yes,no) width : 너비 (device-width 디바이스 너비) heigh..
파비콘 만들기 (favicon) 파비콘은 favorite icon을 줄인 말로 인터넷 주소창이나, 즐겨찾기를 했을때 옆에 보이는 작은 아이콘을 말합니다. 먼저 16x16으로 파비콘으로 사용할 이미지를 제작합니다. (확장자는 png, gif, jpg로 저장해 주세요.) 이미지 제작이 끝나면 ico로 변환해 줘야하는데 아래 사이트에 접속하여 변환이 가능합니다. (ico 변환을 여러곳에서 해봤는데, 아래 사이트에서 변환한 ico 파일만 제대로 작동을 했습니다. 같은 소스로 코딩을 했는데 말이에요~) url : http://www.favicon-generator.org 위 사이트에 접속해서 찾아보기를 클릭하고, 이미지를 등록합니다. generate only 16x16 favicon.ico를 선택한 후 create favicon을 클릭하면 변환..
요소,문단,테이블 1) 요소의 종류와 특징 HTML을 사용할 때는 문법을 준수해야하며, 다음과 같은 요소의 성격을 잘 파악하고 있어야합니다. ※ 블록요소 *줄 바꿈 속성을 가짐 *기본 너비 속성이 100% *블록 요소를 포함 못함 (예외 요소 있음) *인라인 요소를 포함 ,,,,,,,,, ※ 인라인요소 *줄 바꿈 속성이 없음 *내용만큼 너비 유지 *너비와 높이 속성 사용못함 *블록 요소 포함 못함 ,,,,,,,,,,, ※ 범용 요소 *블록 요소임에도 모든 요소를 포함함 ,, 2) 문단 태그 문단 태그는 문서를 작성할 때 필요한 문단요소 입니다. ~ : 제목요소, 숫자가 작을수록 큰 제목 : 단락 구분 요소 : 주소 태그, 주소를 작성할 때 사용 : 구분선 요소 : 짧은 인용 문구 요소 : 긴 인용 문구 요소 : 강조 요소..

티스토리툴바