728x90
반응형

section 3

비주얼 스튜디오 코드 82_반응형 웹갤러리

html mark up css edit h1태그의 가상요소 만들기 폰트어썸 링크걸고 폰트어썸 넣기 폰트어썸 css edit main html mark up article 20개 만들기 article css edit 플러그인 사용 isotope 홈페이지 접속 Isotope · Filter & sort magical layouts (metafizzy.co) Isotope · Filter & sort magical layouts Install Download CDN Link directly to unpkg. Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --s..

비주얼 스튜디오 코드 48_Parallax

menu1을 클릭했을 때 section1이 나올 수 있도록 링크를 걸어준다. 나머지 section 내용 넣어주기 css reset 넣어주기 css 편집 셋팅 #contents 편집 ●background: radial-gradient (ellipse farthest-corner at center center, 색상코드 영역(0%), 색상코드 100%) 멀리있는 코너부터 서서히 바꾸어줘라 나머지 #section 도 백그라운 그라데이션 넣어주기 #nav 편집 ● position: fixed; nav 고정시키기 패럴럭스 J-Query 이용해서 script 넣어주기 꼭지점(offset) 찾기 메뉴를 클릭하면 해당 section으로 창이 뜬다.

비주얼 스튜디오 코드 47_ 반응형 레이아웃

레이아웃 01 ●header태그: 헤더는 로고와 네비가 포함된 영역 ●aside태그: css편집 바탕색은 body에서 주면된다. ●aside, section 이 float으로 띄워져 있기때문에 footer가 aside, section 밑으로 겹쳐서 들어가게된다. footer 영역에 clear:both를 주어 aside, section영역 바로 아래에 위치된다. ●반응형 @media 영역 화면너비 0~1200px 화면 너비에 따라서 화면 스타일이 다르게 나오게 된다. 화면의 크기에 따라 스타일을 따로 준다. #wrap 너비값으 100%는 wrap이 꽉 차지만 95%는 양쪽 여백이 나온다. wrap이 1200px 이기 때문에 최대크기를 1200px를 하면 충돌이 날 수 있다. 그래서 좀더 큰 크기인 1220..

728x90
반응형