조반짝의 도전일지

● 코드 정렬 : 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; /* 정렬할 때 세로..

이미지 회전 효과 html 골격 만들어주기 #wrap .effect ho1 > figure > img = figcaption > h3 = p .effect ho2 > figure > img = figcaption > h3 = p css reset 넣어주기 이미지 사이즈 100% 로 넣어주고 ho1 사이즈와 마진 넣어주기 이미지 양면으로 합쳐주기 피그캡션과 p 태그 수정 ho1- front , back 한번에 style 넣어주기 .front > figure 로 변경하면 한번에 스타일을 적용할 수 있다. 이미지 front 앞면 돌려주기 이미지 back 뒷면 돌려주기 ●backface-visibility : hidden; 뒷면 가려주기 html mosue hover 마우스 오버효과 앞면입니다. mosue ho..

html에 body 셋팅해주기 container 안에 div, section, article 상관없이 넣어주어도 된다. *** 아이디와 클래스를 반드시 구분해서 넣어줘야한다. 기본 레이아웃 만들어주기 탭메뉴 영역 골격 만들어주기 active 클래스 넣어주기 css 영역 클래스 구분해주기 탭박스 만들어주기 active 영역 배경색 변경해주기 탭박스 flot을 띄워주어 옆으로 나란히 보내기 float 띄워 줄 시 clearfix를 넣어줘야하지만 부모(ul)에 overflow:hidden 을 대신 넣어줘도 된다. div 부분 안 쪽 여백 밑 줄간격 border-top으로 박스 밑에 선 넣어주기 자바스크립트 스니펫 가져와서 html에 붙여넣기 변수지정 긴 이름을 짧게 지정해주기 console.log(index)..

● 인라인 구조: span, strong 태그 ● strong: 글자 굵기 강하게 [가운데 정렬] 부모에 가운데 정렬을 주어야함 display: flex; justify-content: center; align-items : center; height : 100vh >> 높이값을 지정해야 가운데 세로 정렬이 됨 이미지 마우스 오버시 opacity 값주기 ho1에 배경색 흰색 지정해주고 ho1에 hover명령시 이미지 투명도가 변경되도록 opacity값을 넣어준다. hover 속도값을 넣어주기 위해 이미지에 transition 속도값 지정해준다. [figcaption 영역 수정해주기] figcaption 이미지 가운데 넣어주기 figcaption이 움직이기 위해서 ho1(부모)에 position:relat..

wrap으로 내용을 감싸주는 영역 넣어주기 h3부터 쓴 이유 h3인 이유는 태그 순서에 따라 figcaption 3번째이기 때문에 h3 웹표준에 따르는 것이 좋음 ● 블럭구조: h태그, p태그 ● vh : ex) height: 100vh - 높이값을 가로로 100개를 나눠서 100개를 사용하겠다. ● letter-spacing: 글자 자간 [이미지사이즈] 이미지 사이즈 설정 시에 이미지 width : 100% 로 설정해주는 것이 좋음 이미지 사이즈 수정 시 이미지의 부모 태그 사이즈만 수정하면 된다. 부모의 사이즈가 수정되면 이미지 사이즈도 자동으로 변경된다. ●position 을 넣어주면 너비값을 잃기 때문에 너비값을 넣어줘야함 가상요소 넣어주기(플러스 마우스오버효과) ● 한 태그에 가상요소를 최대 2..

html 내용 넣기 컨테이너는 각 아이디안에 들어가기 때문에 반드시 클래스로 넣어야한다. .container # wrap 안에 아이디 헤더 > 클래스 컨테이너 > 클래스 헤더 아이디 배너 > 클래스 컨테이너 > 클래스 배너 아이디 컨텐츠 > 클래스 컨테이너 > 클래스 컨텐츠 아이디 푸터 > 클래스 컨테이너 > 클래스푸터 바디 기본 틀 잡아주기 [css 기본 reset 코드 ] css 각 아이디별 영역 잡아주기 .container 에 background color 를 부모(아이디)의 높이값을 종속 받는다. [탭 메뉴 넣기] 탭 안에서 구분할 부분이 버튼이고, 보여지는 부분이 컨텐츠로 1번,2번 구분해서 숨기기 효과 사용한다. active: active 이름을 가진 클래스가 색깔이 다르게 들어갈 수 있음 c..

푸터까지 완성한 홈페이지 html 팝업창 내용 작성하기 엔터 미리보기에서 이렇게 뜨게됨 팝업창이 움직일 수 있도록 position: absolute; 명령을 주고 #wrap을 기준점으로 잡아 position: relative 명령을 준다. absolute;는 절대주소이기 때문에 0,0에 위치하게 됨 그래서 left: 50%, top: 50%를 한다. 하지만 top: 50%가 적용이 안되는데 #header, #banner, #contents, #footer에 들어간 float으로 인해 높이값이 없어지기 때문에 :clearfix 대신 overflow:hidden을 사용한다. 단, 네비게이션에는 overflow:hidden 사용을 하지 말것!! layer의 부모가 wrap이기 때문에 overflow:hidde..

footer _그림문자 가져오기 https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 아이콘들을 글자처럼 사용하는 그림문자를 사용 링크를 걸어야함 푸터 쪽 다운로드 클릭 free for web을 클릭해서 무료로 그림문자를 사용할 수 있다. 경로 C:\Users\guro-hi\Downloads\fontawesome-free-6.4.0-web\fontawesome-free-6.4.0-web 에서 webfonts를 연꽃축제 ..

_배너 배너에 이미지 넣기 h2 - 제목 넣기 img - 배너 이미지 넣기 css- 제목 위치 잡아주기 배너 html 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스 안내 행사 안내 행사 일정 소공연장 홍보마당 축제 소식 보도 자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 부여연꽃축제 공지사항 부여 연꽃 축제기간이 06월 15일부터 시작됩니다. 05-30 연꽃 축제기간 중 타지에서 오는 관광객에게 2,000원 할인 행사를 하고 있습니다. 05-25 서울 구로구에 계시는 분들은 부여와 자매구로 5,000원 할인하고 있습니다. 05-25 부여 연꽃 보러 많이 많이 오세요. 05-24 갤러리 바로가기 바로가기 바로가기 바로가기 바로가기 바로가기까지 css @charset "utf-8"..

html css 헤더, 배너, 컨텐츠, 푸터에 각각 float:left 명령을 넣어줘야 header가 side에 들어가게됨 헤더부분 html css - 헤더로고 html - nav영역 넣어주기 css - nav영역 넣어주기 j-query -nav 네비게이션-아코디언 형식 네비게이션 - 사이드 형식 전체 html 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스 안내 행사 안내 행사 일정 소공연장 홍보마당 축제 소식 보도 자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 전체 css @charset "utf-8"; /*reset*/ *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ text-dec..