Clone Coding/Responsive Site (30) 썸네일형 리스트형 [ RESPONSIVE ] 18 게시판 (한줄/두줄 효과) [ RESPONSIVE ] 18 게시판 (한줄/두줄 효과) See the Pen [ RESPONSIVE ] 18 게시판 (한줄/두줄 효과) by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 게시판 글 앞에 동그라미 넣기 .notice1 li { position: relative; } .notice1 li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #449ce2; position: absolute; left: 0; top: 6px; } * 한줄 효과 .notice1 li { overflow: hidden; text-overflow: ellipsis; white.. [ RESPONSIVE ] 17 컨텐츠 메뉴 (반응형) [ RESPONSIVE ] 17 컨텐츠 메뉴 (반응형) See the Pen [ RESPONSIVE ] 17 컨텐츠 메뉴 (반응형) by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 16 컨텐츠 메뉴 [ RESPONSIVE ] 16 컨텐츠 메뉴 See the Pen [ RESPONSIVE ] 16 컨텐츠 메뉴 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 15 컨텐츠 타이틀 [ RESPONSIVE ] 15 컨텐츠 타이틀 See the Pen [ RESPONSIVE ] 15 컨텐츠 타이틀 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 14 컨텐츠 레이아웃 [ RESPONSIVE ] 14 컨텐츠 레이아웃 See the Pen [ RESPONSIVE ] 14 컨텐츠 레이아웃 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 3등분된 컨텐츠에서 가운데 영역만 반응형, 왼/오른쪽 영역은 고정 #contents .container { border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb; } #cont_left { float: left; width: 250px; } #cont_center { overflow: hidden; min-height: 1300px; margin-right: 250px; border-right: 1px solid #dbdbdb; b.. [ RESPONSIVE ] 13 헤더 반응형 [ RESPONSIVE ] 13 헤더 반응형 See the Pen [ RESPONSIVE ] 13 헤더 반응형 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 12 타이틀 [ RESPONSIVE ] 12 타이틀 See the Pen [ RESPONSIVE ] 12 타이틀 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 11 전체 메뉴 - 라인 효과 [ RESPONSIVE ] 11 전체 메뉴 - 라인효과 See the Pen [ RESPONSIVE ] 11 전체 메뉴 - 라인 효과 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * hover 효과 ( 밑줄이 그어지는 효과 ) .nav > div li a::after { content: ''; display: inline-block; width: 0; height: 1px; background: #25aad0; transition: all 0.2s ease-out; position: absolute; bottom: 0; left: 0; } .nav > div li:hover a::after { width: 100%; } * 반응형 사이트 강의 보는곳(WE.. 이전 1 2 3 4 다음
