CSS 썸네일형 리스트형 커서 손모양 넣기 (cursor:pointer;) a 태그 등을 넣었을때는 링크가 걸려있기 때문에 자동으로 커서가 손모양으로 바뀝니다. 그런데 간혹 onclick으로 액션을 걸어주거나 할때는 커서 모양이 바뀌지 않아서 유저에게 혼란을 줄 수 있는데요! 이럴때 간편하게 커서모양을 바꾸는 방법이 있어서 소개해 드리려고 합니다. /*링크되지 않은 이미지지만 마우스를 올렸을때 마우스 커서가 손모양으로 바뀝니다.*/ 위 예제를 보시면 쉽게 이해될거에요. 바로 스타일에 cursor:pointer; 을 넣어주시는 겁니다. 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로 .. 자동줄바꿈 : 긴 텍스트 줄 바꿈 안될 때 (word-break:break-all;) 퍼블리싱을 하다 보면 텍스트가 정해진 가로 값 영역을 넘어가는 경우 어떤 기준으로 줄바꿈 해줘야 할지 설정을 해줘야 합니다. 단어별로 다음 줄로 넘겨준다든지, 단어에 상관없이 무조건 다음 줄로 넘겨준다든지... 이럴 때 필요한 css 를 알아보도록 하겠습니다. ※ word-break .text {word-break:break-all;} word-break 에서 느껴지실 텐데 말 그대로 다 잘라준다고 생각하시면 됩니다. 줄바꿈 처리를 하지 않으면 기본적으로 단어 위주로 다음 줄로 줄바꿈이 이뤄질 것입니다. 근데 여기서 문제가 띄어쓰기를 하지 않고 글을 썼을 경우에 모든 글을 한 단어로 생각해서 글을 쓰는 영역의 가로 값을 넘어가도 뚫고 작성이 된다는 것입니다. 이때 word-break을 사용하시.. 자동줄바꿈 : 말 줄이기 비교 (text-overflow : visibile, text-overflow : ellipsis) 게시판에 글이 노출될때 타이틀이 길면 말이 잘리거나 두줄로 나타나는 경우가 있는데요 이럴때 유용한 말줄이기 팁을 알려드리겠습니다. 클래스를 long, short 두가지로 만들었으니, 하단에 소스를 카피해서 확인해 보세요~ 말줄임 활용하기 참 쉽죠??? 말줄임 활용하기 참 쉽죠??? 아래는 적용된 모습입니다. ^-^ 마우스오버 시 효과 넣기 (background-position) 마우스를 올렸을 때 백그라운드 포지션이 바뀌면서 롤오버 효과를 내는 것이 가능합니다. 소스를 보면 하단과 같습니다. 메뉴 1 메뉴 2 메뉴 3 이때 아래와 같이 버튼의 롤오버와 온을 한 이미지로 만들어 줍니다. 위에 마우스를 올리지 않았을 때, 아래쪽에 마우스를 올렸을때 이미지를 연결해 줍니다. 여기서 중요한게 마우스를 오버했을때 포지션위치를 바꾸는 것인데, a:hover; 에서 background-position:0 -(이미지 height에 1/2 높이)px; 를 꼭 체크합니다. 본 포스팅에 샘플파일을 첨부했으니 다운받아서 테스트 고고!! 마우스오버 시 백그라운드 색상 변환 요즘 디자인을 중요시 생각하다보니 이미지 위주의 사이트가 많이 늘어나고 있습니다. 이미지 위주의 사이트를 제작하게 되면, 텍스트와 정보를 좀 더 효과적으로 전달하기 위한 도구나 방법이 필요한데요. 제가 오늘 추천해 드리려는 방법은 마우스를 오버를 했을때 위처럼 백그라운드를 어둡게 눌러주면서 텍스트를 띄어주는 방식입니다. 위 방법은 이미지를 강조하고 해당 내용이나 전하려는 인포를 좀 더 가독성 있게 전달할 수 있어서 자주 사용하고 있습니다. 소스는 아래와 같이 상당히 간단합니다. 좋은과일 고르는 방법!! pic background에 이미지 주소를 교체해 주시고 사이에 원하시는 문구를 써주시면 됩니다. 밑에는 완성된 모습 움짤입니다~ 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의 가로값이 유동적이고 픽스되.. 이전 1 다음
