html 썸네일형 리스트형 이미지맵 좌표 찍기 (usemap) 이미지에 링크를 걸때 사용되는 이미지맵을 공부해 볼까 합니다. 원리는 이미지를 불러와서 그 이미지를 맵으로 사용하겠다고 usemap 으로 map name을 지정해주고, area에 coords를 찍어서 링크를 연결해주는 건데요. 바로 소스 보여드리겠습니다. 여기서 좀 더 알려드려야 할건 rect, circle, poly 인데요. 위 세아이들은 링크거는 영역의 모양을 뜻합니다. rect는 사각형, circle은 원, poly는 다각형! 좌표인 coords는 포토샵에서 하나씩 좌표를 딸 수도 있지만, 친절하게도 좌표를 따주는 사이트가 있으니 활요하시면 좋을 듯 합니다. 좌표 찍어주는 사이트 보기 좌표 찍는 방법은 아래와 같습니다. 1) 이미지를 upload 해준 후 accept를 누른다. 2) 이미지가 뜨면 .. 커서 손모양 넣기 (cursor:pointer;) a 태그 등을 넣었을때는 링크가 걸려있기 때문에 자동으로 커서가 손모양으로 바뀝니다. 그런데 간혹 onclick으로 액션을 걸어주거나 할때는 커서 모양이 바뀌지 않아서 유저에게 혼란을 줄 수 있는데요! 이럴때 간편하게 커서모양을 바꾸는 방법이 있어서 소개해 드리려고 합니다. /*링크되지 않은 이미지지만 마우스를 올렸을때 마우스 커서가 손모양으로 바뀝니다.*/ 위 예제를 보시면 쉽게 이해될거에요. 바로 스타일에 cursor:pointer; 을 넣어주시는 겁니다. 맨위로 이동하기 원페이지 형식의 사이트나 한 페이지의 내용이 길어질 때 sticky header나 맨위로 이동하기 버튼을 이용해서 유저의 접근성에 편의를 제공하는데요. 오늘은 맨위로 이동하기 버튼을 넣는 법을 포스팅 해볼까 합니다. 맨위로 위 소스는 버튼을 클릭하면 순식간에 top으로 이동하는 소스인데, 추후에 제이쿼리를 이용해서 스무스하게 이동하는 소스도 포스팅 하겠습니다. 눈으로 확인 하시라고 html 파일 하단에 첨부하였으니, 다운받아서 테스트 해보세요~ background 동영상 배경 삽입 영상 위주의 포트폴리오 사이트에서 종종 볼 수 있는 배경에 풀사이즈로 동영상을 삽입하는 방법을 알려드릴까 합니다. 동영상 배경 삽입 방법으로 여러 방법이 있겠지만 제이쿼리를 사용하지 않고 간단하게 html5만을 이용해서 출력하는 모습을 보여드릴까 합니다. ul 스타일 주기 (li 불릿 교체 및 삭제, 들여쓰기 없애기) UL 스타일 주기 퍼블리싱을 할때 DIV 만큼 많이 쓰는 것이 ul (비순차목록) 인데요. ul (비순차목록) 을 사용하면 li 리스트 앞에 자동으로 동그란 불릿아이콘 (bullet icon) 이 생성됩니다. 이 불릿아이콘을 없애려면 먼저 아래의 스타일을 css에 추가해 주세요 ul li {list-style : none;} 위의 스타일을 사용해서 불릿아이콘을 없앴는데, 다른 이미지를 불릿아이콘으로 사용하고 싶을때는 list-style-image:url(경로);를 사용해 주시면 되는데요. 예제 소스 첨부해 드리도록 하겠습니다. 마지막으로 비순차목록에서 나타나는 들여쓰기를 없애주고 싶을때는 ul 태그에 padding-left:0; margin-left:0; 를 추가해 줍니다. ul {padding-left.. 폰트 그림자 넣기 (text-shadow) CSS로 폰트 그림자 넣기 (text-shadow) 퍼블리싱을 할때 입력한 텍스트에 가독성을 올리고, 입체감을 주기 위해서 텍스트 폰트에 그림자 넣는 방법을 알아보겠습니다. css에 text-shadow을 활용하는 것인데요! text-shadow 세부 옵션값들을 잘~~ 조절하면 포토샵에서 폰트에 drop shadow를 넣어주듯이 표현이 가능합니다. {text-shadow: 가로거리 세로거리 번지는정도 색상값;} 폰트에 그림자 넣기 위 옵션 중 가로거리의 옵션값이 "+"면 그림자가 오른쪽으로 생성되고, "-"면 왼쪽으로 생성됩니다. 세로거리의 옵션값이 "+" 일 때 아래쪽으로 생기고, "-" 일 때는 위쪽으로 그림자가 생성됩니다. 번지는 정도는 옵션값의 숫자가 커질수록 많이 번지구요~ 색상값은 rgba로 .. 개체 변형, 회전 시키기 (transform) css3의 transsform 속성을 설명하고자 합니다, transsform은 개체의 모양을 변형 혹은 회전등의 외곡을 줄 수 있는 속성으로 기존 javascript에 의존적이던 기능을 css3 transsform 속성만으로 구현할 수 있습니다. -webkit, -moz, -ms, -o 와 같은 접두사를 통해 브라우저 호환성을 확보할 수 있지만, IE9 미만의 브라우저에서는 호환되지 않으니 유념 하시길 바랍ㄴ다. IE8 이하의 브라우저 호환성을 배제한 프로젝트라면 javascript에 의존하지 않은 깔끔한 개발이 가능하겠네요. 1. 접두사 안내 위에서 언급 되었듯, 접두사를 통해 브라우저 호환성을 확보할 수 있는데, 접두사는 transform:속성; -webkit-transform:속성; -moz-tra.. 자동줄바꿈 : 말 줄이기 비교 (text-overflow : visibile, text-overflow : ellipsis) 게시판에 글이 노출될때 타이틀이 길면 말이 잘리거나 두줄로 나타나는 경우가 있는데요 이럴때 유용한 말줄이기 팁을 알려드리겠습니다. 클래스를 long, short 두가지로 만들었으니, 하단에 소스를 카피해서 확인해 보세요~ 말줄임 활용하기 참 쉽죠??? 말줄임 활용하기 참 쉽죠??? 아래는 적용된 모습입니다. ^-^ 자동줄바꿈 속성 (white-space, word-break, word-wrap, text-overflow) 퍼블리싱을 하다보면 div같은 공간을 설정하고 그 안에 텍스트를 넣는 경우가 많은데요. 그때 유용하게 사용할수 있는 자동줄바꿈 형식에 대해서 알아보려고 합니다. white-space 띄어쓰기나 줄바꿈, 탭으로 인한 공백 등의 공백문자를 처리하는 방법 설정. white-space:normal; /*white-space 기본값으로 연속 공백과 줄바꿈 등을 통합해서 표현*/ /*보통 띄어쓰기와 줄바꿈을 몇번 하든지 결과는 띄어쓰기 한칸 인것처럼 적용*/ white-space:pre; /*normal과 반대로 원문 그대로 출력*/ white-space:nowrap; /*공백은 nomal, 줄바꿈은 pre*/ white-space:inherit; /*부모요소의 값을 상속*/ word-break 텍스트가 들어가는 .. 마우스오버 시 효과 넣기 (background-position) 마우스를 올렸을 때 백그라운드 포지션이 바뀌면서 롤오버 효과를 내는 것이 가능합니다. 소스를 보면 하단과 같습니다. 메뉴 1 메뉴 2 메뉴 3 이때 아래와 같이 버튼의 롤오버와 온을 한 이미지로 만들어 줍니다. 위에 마우스를 올리지 않았을 때, 아래쪽에 마우스를 올렸을때 이미지를 연결해 줍니다. 여기서 중요한게 마우스를 오버했을때 포지션위치를 바꾸는 것인데, a:hover; 에서 background-position:0 -(이미지 height에 1/2 높이)px; 를 꼭 체크합니다. 본 포스팅에 샘플파일을 첨부했으니 다운받아서 테스트 고고!! 마우스오버 시 백그라운드 색상 변환 요즘 디자인을 중요시 생각하다보니 이미지 위주의 사이트가 많이 늘어나고 있습니다. 이미지 위주의 사이트를 제작하게 되면, 텍스트와 정보를 좀 더 효과적으로 전달하기 위한 도구나 방법이 필요한데요. 제가 오늘 추천해 드리려는 방법은 마우스를 오버를 했을때 위처럼 백그라운드를 어둡게 눌러주면서 텍스트를 띄어주는 방식입니다. 위 방법은 이미지를 강조하고 해당 내용이나 전하려는 인포를 좀 더 가독성 있게 전달할 수 있어서 자주 사용하고 있습니다. 소스는 아래와 같이 상당히 간단합니다. 좋은과일 고르는 방법!! pic background에 이미지 주소를 교체해 주시고 사이에 원하시는 문구를 써주시면 됩니다. 밑에는 완성된 모습 움짤입니다~ div 이동 간단하니까 먼저 소스를 보여드리겠습니다!! 링크시킬 이미지나 텍스트에 (이걸 눌렀을때 위쪽으로 옮겨가는거죠) 설정을 해주세요. 그리고 이동하고자 하는 부분에 이런식으로 아이디를 지정해 주시면 끝!!! ※ top 대신 원하시는거 사용하셔도 되요!! test용 html을 하단부분에 첨부할테니 궁금하신분은 파일을 확인해 보세요~^-^ div 좌우 배열 정렬하기 html 요소에 대해서 포스팅 했을때 요소에 대해서 한번 언급했지만, div는 블럭 요소로 가로값이 얼마든지 공간을 다 차지해 버리기 때문에 자동으로 줄바꿈이 됩니다. div 가운데 정렬은 동적일 때, 가로값이 픽스 되었을 때 두 가지를 함께 전에 포스팅 했으니, 오늘은 div를 좌우로 배열하는 법을 포스팅하겠습니다. div를 좌우로 인라인요소처럼 배열하고 싶을때는 선 객체에 float:left;로 왼쪽 정렬을 설정하고, 뒤에 오는 객체는 display:inline-block;로 내용 영역을 채워줍니다. 아래 소스를 첨부했으니 테스트 해보세요. 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.. 이전 1 다음
