내마음대로만들어보자/HTML52 반응형 사이트 - 컨텐츠 영역 레이아웃 레이아웃 연습을 할때 해봐서 알겠지만, 반응형 사이트를 만들때 주의할 점으로는 왼쪽과 오른쪽 컨텐츠 영역은 고정을 시키고 가운데 영역이 줄어 들 수 있도록 코딩을 해줘야한다. (3개의 영역 모두 width 값을 % 로 정할 경우에는 반응형 사이트를 만들경우 3개의 영역이 같이 줄어드게 된다.) ※ 예제 소스 반응형 사이트 컨텐츠 반응형 사이트 왼쪽 컨텐츠 반응형 사이트 왼쪽 컨텐츠1 반응형 사이트 왼쪽 컨텐츠2 반응형 사이트 왼쪽 컨텐츠3 반응형 사이트 가운데 컨텐츠 반응형 사이트 가운데 컨텐츠1 반응형 사이트 가운데 컨텐츠2 반응형 사이트 가운데 컨텐츠3 반응형 사이트 오른쪽 컨텐츠 반응형 사이트 오른쪽 컨텐츠1 반응형 사이트 오른쪽 컨텐츠2 반응형 사이트 오른쪽 컨텐츠3 * 레이아웃 */ body {.. 2022. 4. 12. 헤더 아이콘 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. 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. 이전 1 2 3 4 ··· 13 다음
