본문 바로가기
헤더 아이콘 SNS공유하기 1. FaceBook , Twitter 공유하기 미리 공유했을때 어떻게 공유가 되고 누락된 정보는 없는지 확인해볼 수 있다. https://developers.facebook.com/tools/debug 공유 디버거 - Facebook for Developers 공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. developers.facebook.com https://cards-dev.twitter.com/validator 트위터에 로그인 닫기 이전 다음 twitter.com 아이콘 공유를 사용하기 위한 메타태그를 사전에 적용 해주자. SNS공유하기 동작.. 2022. 4. 10.
transform 1. transform 속성 컨텐츠 요소를 이동(translate), 회전(rotate), 확대(scale), 기울기(skew) 등의 효과를 줄 수 있다. 애니메이션 작업 시 가장 많이 쓰는 오쇼이며, 요소를 이동시키거나 회전 시킬 수 있고 원근점(perspective)를 사용하여 3D까지 구현 할 수 있다. 즉, 요소의 움직임을 표현한다. 2. 기본문법 transform : none | matrix() | translate() | translateX() | translateY() | scale() | scaleX() | scaleY() | rotate() | skew() | skewX() | skewY() | matrix3d() | translate3d() | translateZ() | scale3d(.. 2022. 4. 10.
fontawesome - icon FontAwesome을 통해 이미지 파일을 대신하여 아이콘을 넣는 방법에 대해 정리해두자 https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 우선은 동작하는 원리를 익히기 위해 하위 버전으로 해보자. 1. Font Awesome 4 (Latest Version: 4.7.0) FontAwsesome 사용을 위한 CSS,Font 파일은 미리 다운로드를 받아두자. 이제 FontAwesome을 통해 icon을 사용할 준비를 해보자. 1. CSS 연동을 통한 사전 준비 .. 2022. 4. 10.
box-shadow 1. 예제 코드 .header .header_tit h1 { font-size: 30px;color: #fff;background: #51b0dc;display: inline-block;padding: 5px 30px 5px 30px; font-weight: 900;transition: box-shadow 0.25s ease-in-out;} .header .header_tit h1:hover { box-shadow: inset -9em 0 0 0 #257fac, inset 9em 0 0 0 #257fac;} .header .header_tit a { font-size: 16px;color: #fff;background: #4a9abf; display: inline-block;padding: 10px 20.. 2022. 4. 9.
text-transform 1. 대문자로 변경하기 text-transform: uppercase; 2. 소문자로 변경하기 text-transform: lowercase; 3. 텍스트의 앞 한글자만 변환할 경우 text-transform: capitalize; 더보기 hello web is free 단, text-transform 은 IE9이상 에서만 지원이 가능하다고 한다. 2022. 4. 9.
transition 속성 - transition CSS 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 더보기 #resize { height: 100px; width: 150px; -webkit-transition: width 1s, height 3s; transition: width 1s, height 3s; } #resize:hover { width: 300px; height: 500px; } transition 의 속성 변화를 width, height값을 다르게 설정할 수도 있다. - transition 속성 - 모든 속성들은 transition에 한번에 사용할 수 있다. - transition-timing-function 속성 1. linear : 전환(transition) 효과가 처음부터 끝까지.. 2022. 4. 9.
인라인 구조 vs 블럭 구조 태그 종류 - 인라인태그 vs 블록구조 * 인라인구조 태그 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , * 블록구조태그 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 2022. 4. 9.
여백 초기화 참고 여백 초기화 (참고) * 여백 초기화 */ body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form, figure, figcaption {margin:0; padding:0;} /* a 링크 초기화 */ a {color: #222; text-decoration: none;} a:hover {color: #2698cb;} /* 폰트 초기화 */ body, input, textarea, select, button, table {font-family: 'Nanum Gothic', AppleSDGothicNeo-Regular,.. 2022. 4. 9.

티스토리툴바