Clone Coding/Responsive Site (30) 썸네일형 리스트형 [ RESPONSIVE ] 10 전체 메뉴 [ RESPONSIVE ] 10 전체 메뉴 See the Pen [ RESPONSIVE ] 10 전체 메뉴 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 가상요소 .nav > div li::before { content: ''; width: 3px; height: 3px; background-color: #25a2d0; position: absolute; left: 0; top: 6px; } * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 09 헤더 아이콘 공유하기 [ RESPONSIVE ] 09 헤더 아이콘 공유하기 See the Pen [ RESPONSIVE ] 09 헤더 아이콘 공유하기 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 트위터, 페이스북 공유하기 버튼 (head) * 공유 미리보기 * 트위터, 페이스북 공유 스크립트 * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 08 헤더 아이콘 [ RESPONSIVE ] See the Pen [ RESPONSIVE ] 08 헤더 아이콘 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * transition - 정리필요 transition: all 0.3s ease; * transform (가운데정렬) - 정리필요 left: 50%; top: -40px; transform: translateX(-50%); * 도형만들기 (아래로 세모/화살표) - 정리필요 .header .header_icon li a span::before { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border-top: 5px solid.. [ RESPONSIVE ] 07 헤더 타이틀 [ RESPONSIVE ] 07 헤더 타이틀 See the Pen [ RESPONSIVE ] 07 헤더 타이틀 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! box-shadow box-shadow 속성은 박스 요소의 그림자를 설정합니다. box-shadow : none | h-shadow | v-shadow | blur | spread | color | inset /* h-shadow | v-shadow | color를 설정한 경우 */ box-shadow: 10px 20px #ccc; /* h-shadow | v-shadow | blur | color를 설정한 경우 */ box-shadow: 10px 20px 10px #ccc; /* h-shadow | .. [ RESPONSIVE ] 06 헤더 메뉴 [ RESPONSIVE ] 06 헤더 메뉴 See the Pen [ RESPONSIVE ] 06 헤더메뉴 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! background 속성 background 속성은 배경 속성 값을 정의합니다. 문법 background : background-attachment | background-blend-mode | background-clip | background-color | background-image | background-origin | background-position | background-repeat | background-size | inherit; 속성 속성 값 설명 background-attachment.. [ RESPONSIVE ] 05 아웃라이너 [ RESPONSIVE ] 05 아웃라이너 반응형 사이트 반응형 사이트 전체 메뉴 반응형 사이트 서브 타이틀 반응형 사이트 컨텐츠 반응형 사이트 왼쪽 컨텐츠 반응형 사이트 왼쪽 컨텐츠1 반응형 사이트 왼쪽 컨텐츠2 반응형 사이트 왼쪽 컨텐츠3 반응형 사이트 가운데 컨텐츠 반응형 사이트 가운데 컨텐츠1 반응형 사이트 가운데 컨텐츠2 반응형 사이트 가운데 컨텐츠3 반응형 사이트 오른쪽 컨텐츠 반응형 사이트 오른쪽 컨텐츠1 반응형 사이트 오른쪽 컨텐츠2 반응형 사이트 오른쪽 컨텐츠3 반응형 사이트 푸터 반응형 사이트 예제 (완성본) Click! GitHub에서 보기 Click! * Outliner 확인하는 사이트 Click! * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 04 문서셋팅 [ RESPONSIVE ] 04 문서셋팅 1. 메타 데이터 태그는 웹 문서에 대한 정보를 나타냄 1) 검색로봇 제어 - 모든 검색엔진에 유효하지는 않음. ALL : 기본값. 'index,follow'를 지정한 것과 같음. NONE : 'NOINDEX, NOFOLLOW'를 지정한 것과 같음. INDEX : 그 페이지를 수집대상으로 한다. FOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다. NOINDEX : 그 페이지를 수집대상에서 제외한다. NOFOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않는다. 2) 설명문 입력 - 3) 키워드 입력 - 4) 작성자 입력 - 5) 저작도구 입력 - 대체로 제작에 적용 된 프레임웍 등을 지칭 함. 6) 저작권 입력 - 7) .. [ RESPONSIVE ] 03 반응형 레이아웃 유형5 [ RESPONSIVE ] 03 반응형 레이아웃 유형5 See the Pen [ RESPONSIVE ] 03 반응형 레이아웃 유형5 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! 이전 1 2 3 4 다음
