공부/html, css 썸네일형 리스트형 홈페이지 링크 시 뜨는 미리보기 섬네일 설정하기 홈페이지 URL을 여기저기 링크하다 보면 미리보기 섬네일 이미지가 함께 뜹니다. 이때 메타태그로 대표 이미지가 설정 돼있지 않다면 홈페이지에 제일 상단에 위치한 이미지가 대표 이미지로 인식돼 노출되게 됩니다. 효과적인 활용을 위해서 홈페이지 대표 이미지 설정을 한번 해보도록 합시다! meta property 속성 중에 og:image 만 넣어도 홈페이지 미리보기 이미지 설정이 가능하지만 다른 property 속성도 함께 작성하여 사이트에 정보를 명확하게 정의해 주는것이 좋습니다. 풀스크린 슬라이드 제작 (css만 사용하기) 마우스를 스크롤 했을 때 전체 화면 단위로 스크린이 넘어가는 풀스크린 스타일의 슬라이드 레이아웃을 구현하려면 제이쿼리를 사용해야 했는데요. 이제는 scroll-snap-type 을 이용해서 간단하게 제작이 가능합니다. 안그래도 사용하던 풀스크린 슬라이드들이 유료화 되면서 난감했는데, 천만다행 느낌 ㅠ_ㅠ) 01 02 03 04 05 각 페이지를 묶는 wrap 에다가 scroll snap type를 선언해주고 각 페이지에 scroll snap align을 선언해 줍니다. 위 소스를 하단에 첨부하니 궁금하신 분들은 다운받아서 브라우저에서 돌려보세요~ 스크롤 디자인 꾸미기 스크롤 디자인을 바꾸고 싶을 때 사용하는 소스를 공유하도록 하겠습니다. 화면 전체 디폴트 스크롤을 바꾸는 방법과 원하는 영역 스크롤을 바꾸는 방법을 나눠서 작성하였습니다. 전체 디폴트 스크롤 설정 ::-webkit-scrollbar { width: 5px; /*스크롤바의 너비*/} ::-webkit-scrollbar-thumb { background-color: #000; /*스크롤바의 색상*/ border-radius: 10px; /*스크롤바 라운드*/} ::-webkit-scrollbar-track { background-color: #eee; /*스크롤바 트랙 색상*/ border-radius: 10px; /*스크롤바 트랙 라운드*/ box-shadow: inset 0px 0px 5px rgba(0.. 링크 이미지 테두리 없애기 이미지에 a 태그를 이용해서 링크를 걸면 이미지 주변에 테두리가 생길때가 있습니다. 이럴경우 간단하게 테두리는 없애는 방법을 설명해 드리겠습니다. 이미지에 border:0px; 스타일을 추가해주면 링크 테두리가 사라지니까 필요할때 활용해 보세요. 이미지맵 좌표 찍기 (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 파일 하단에 첨부하였으니, 다운받아서 테스트 해보세요~ 사이트 이동하기 (자동 연결) 사이트를 만들때 다른페이지로 자동연결을 해줘야할 경우가 종종 생기는데요. 간단하게 meta 태그를 이용하여 페이지 넘겨주는 방법을 소개해 드리겠습니다. 위의 소스를 에 적어주시면 됩니다. background 동영상 배경 삽입 영상 위주의 포트폴리오 사이트에서 종종 볼 수 있는 배경에 풀사이즈로 동영상을 삽입하는 방법을 알려드릴까 합니다. 동영상 배경 삽입 방법으로 여러 방법이 있겠지만 제이쿼리를 사용하지 않고 간단하게 html5만을 이용해서 출력하는 모습을 보여드릴까 합니다. background 속성 오늘은 간혹 헛갈리는 background(백그라운드) 속성에 대해서 정리를 해볼까 합니다. 먼저 백그라운드를 컨트롤 할 수 있는 속성에는 총 6가지가 있습니다. background-color /*색상지정*/ background-image /*이미지 경로지정*/ background-size /*이미지 크기지정*/ background-repeat /*이미지 반복지정*/ background-position /*이미지 위치지정*/ background-attachment /*스크롤 지정*/ background 한줄 작성법 background:red url('이미지경로')no-repeat scroll 0px 20px/100px 100px; background-color background-color:#ffffff;.. video 태그로 웹에 동영상 넣기 html5는 기존의 html보다 미디어컨텐츠 및 애니메이션에 특화되었는데요. 그 중 대표적인 태그가 video 태그입니다. video 태그 기본 설정은 아래와 같습니다. 위 기본태그에 옵션값을 넣으면 컨트롤러 및 재생을 설정할 수 있습니다. 옵션에는 controls, autoplay, loop, poster, width, height, preload="none", preload="metadata", preload="auto" 등이 있으며 자세한 설명은 아래는 하단에 정리해 놨으니 참고바랍니다. controls 미디어에 컨트롤러 표시 autoplay 비디오, 오디오를 다운로드 하자마자 재생 loop 무한 반복 재생 (loop="3" 이라고 쓰면 3번 반복) poster 동영상이 화면에 나타나지 않을 때 표.. audio 태그로 웹에 음악 넣기 오늘 정리할 태그는 audio 태그로 html5에 새로나온 태그입니다. 이전에 wav나 동영상을 삽입할때 embed를 사용했는데 이번에 저도 다른게 있나 찾아보다가 우연히 알게되서 포스팅해보려고 합니다. 오디오 소스에는 총 6가지 속성이 있고요. 이름 값 설명 autoplay autoplay 자동재생 설정 controls controls 오디오 재생에 관련된 컨트롤러 표시 loop loop 무한반복 설정 (loop="3" 이라고 쓰면 3번 반복) src url 오디오 주소 설정 muted muted 음소거 설정 preload auto metadata none 오디오 재생전에 음악파일 모두 불러올지 설정 auto : 웹페이지 여는 순간 바로 다운로드 (기본값) metadata : 메타 정보만 받음 none.. 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로 .. 웹폰트 적용하기 사이트 제작 시 @font-face를 이용하여 유저의 PC에 폰트가 없어도 웹사이트에서 원하는 폰트로 화면을 보여드리는데요! 오늘은 웹폰트 적용법에 대해서 자세히 알아보도록 하겠습니다. 제가 아는 방법은 "구글 나눔고딕 폰트 적용하기"와 "서버에 폰트를 업로드하여 불러오기" 이 두가지 입니다. 먼저 "구글 나눔고딕 폰트 적용하기" 먼저 설명해 드리도록 하겠습니다. @import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css'); 구글 나눔고딕 폰트 적용하기는 매우 간편합니다. 바로 위의 소스를 스타일 시트에 넣어주시기만하면 끝!!! 워드프레스에 구글 나눔고딕 폰트를 적용하실때도 설치한 테마의 css폴더 내 style.css를 열어서 위의 소스.. 개체 변형, 회전 시키기 (transform) css3의 transsform 속성을 설명하고자 합니다, transsform은 개체의 모양을 변형 혹은 회전등의 외곡을 줄 수 있는 속성으로 기존 javascript에 의존적이던 기능을 css3 transsform 속성만으로 구현할 수 있습니다. -webkit, -moz, -ms, -o 와 같은 접두사를 통해 브라우저 호환성을 확보할 수 있지만, IE9 미만의 브라우저에서는 호환되지 않으니 유념 하시길 바랍ㄴ다. IE8 이하의 브라우저 호환성을 배제한 프로젝트라면 javascript에 의존하지 않은 깔끔한 개발이 가능하겠네요. 1. 접두사 안내 위에서 언급 되었듯, 접두사를 통해 브라우저 호환성을 확보할 수 있는데, 접두사는 transform:속성; -webkit-transform:속성; -moz-tra.. css3 Animations 속성 (animation, keyframes) css3 애니메이션 특성 특성 설명 @keyframes 애니메이션 코드를 지정합니다 animation 모든 애니메이션 속성을 나열해서 표현 가능한 속성입니다. animation-delay 애니메이션 시작 전 딜레이 시간을 설정하는 속성입니다. animation-direction 애니메이션의 방향을 설정하는 속성입니다. animation-duration 애니메이션이 플레이되는 시간을 설정하는 속성입니다. animation-iteration-count 애니메이션을 재생해야 하는 횟수를 설정하는 속성입니다. animation-name 애니메이션 네임 속성입니다. animation-play-state 애니메이션 일시 중지를 설정하는 속성입니다. animation-timing-function 애니메이션의 속도 스.. 자동줄바꿈 : 긴 텍스트 줄 바꿈 안될 때 (word-break:break-all;) 퍼블리싱을 하다 보면 텍스트가 정해진 가로 값 영역을 넘어가는 경우 어떤 기준으로 줄바꿈 해줘야 할지 설정을 해줘야 합니다. 단어별로 다음 줄로 넘겨준다든지, 단어에 상관없이 무조건 다음 줄로 넘겨준다든지... 이럴 때 필요한 css 를 알아보도록 하겠습니다. ※ word-break .text {word-break:break-all;} word-break 에서 느껴지실 텐데 말 그대로 다 잘라준다고 생각하시면 됩니다. 줄바꿈 처리를 하지 않으면 기본적으로 단어 위주로 다음 줄로 줄바꿈이 이뤄질 것입니다. 근데 여기서 문제가 띄어쓰기를 하지 않고 글을 썼을 경우에 모든 글을 한 단어로 생각해서 글을 쓰는 영역의 가로 값을 넘어가도 뚫고 작성이 된다는 것입니다. 이때 word-break을 사용하시.. 자동줄바꿈 : 말 줄이기 비교 (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 텍스트가 들어가는 .. 이전 1 2 3 다음
