조반짝의 도전일지

1. 다음의 BootstrapCDN 웹사이트 접속 https://www.bootstrapcdn.com/ 하단 CDN for 옆에 Bootstrap 키워드 클릭! BootstrapCDN The recommended CDN for Bootstrap, Font Awesome, Bootswatch and Bootstrap Icons 그러면, 다음과 같이 Bootstrap 웹사이트 나타남 https://getbootstrap.com/ - 중앙에 "Download" 버튼(또는 우측 상단 "Download" 버튼 클릭) 우측 상단에 Bootstrap v5.1 클릭! - v3.4.1 클릭! - 하단 Download Bootstrap 클릭! https://getbootstrap.com/docs/3.4/ Bootstrap..

한줄코딩으로 단축키를 활용할 수 있다. 빨리 코딩 가능! - case1 div>ul>li*3 div>ul>li*3 a>img>span{바로가기} a>img>span{바로가기} 바로가기 - case2 #modal>.modal_up>.uptitle+.upbody+.btn{닫기} 닫기 반응형 확인 시 사이트에 반응형 크기로 보는것이 좋다. 웹접근성 연구소 (wah.or.kr) 웹접근성 연구소 www.wah.or.kr:444 웹표준사이트 참고할 때 좋음 웹퍼블리셔 css에서 활용한 요소 확인 가능 인포메이션에서 위치별 코드 확인 가능

탭메뉴(영화차트 스와이퍼) 복습 swiper 접속 layout copy chart1 중간에 붙여넣기 swiper script 붙여넣기 위에서 이미 swiper const 지정을 했기 때문에 const 대신에 let swiper로 변경한다. 이미 지정된 const swiper는 const 삭제한다. loope 빼고 밑에 다 삭제하고 '.swiper' >' .swiper2 '로 변경 swiper-wrapper 마크업 reset.css에 여백초기화 부분에 figure, figcaption 추가하기 reset.css 에 .icon 스타일 추가하기 html 에 icon 이름을 넣어주면 reset에 넣은 icon 이미지가 들어간다. .chart1 css 편집 img를 100%로 지정하고 포스터를 기준으로 rank가..

레이아웃 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..

● 코드 정렬 : ctrl+a > ctrl + k f ● > : 바로 밑에 있는 태그를 지정할 때 사용 ex: #wrap > div 태그 명령어 줄여서 쓰는 방법 html mosue hover 마우스 오버효과 앞면입니다. mosue hover 마우스 오버효과 뒷면입니다. mouse hover_상하회전 마우스 오버효과 앞면입니다. mouse hover_상하회전 마우스 오버효과 뒷면입니다. css @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } img{ display: block; } body{ height: 100vh; background-color: #0f2027; } #wrap{ height: 100vh; /* 정렬할 때 세로..