조반짝의 도전일지

html 골격잡아주기 body 안에 section태그로 박스 잡아주기 css에서 편집해주기 1. body에 화면 배경색과 크기를 잡아준다. 2. section 편집 : 박스를 만들어주고 section (작업할 영역)위치를 잡아준다. h1 태그로 제목 넣어주기 css 에서 h1 편집 position띄워서 위치를 잡아준다. 구글폰트에서 웹폰트 가져오기 h1에 font-family: .. 웹폰트를 가져온다. 폰트 명령어 간소화하기 ▼ font: 폰트크기 / 줄간격 '폰트종류' ; section 안에 article태그를 넣어준다. article에 class이름을 sky이라고 지정 article에 이미지를 넣어준다. css > article 편집해주기 이미지 sky, sun위치 잡아주기 각각 이미지에 positi..

피그마에서 이미지 600 x 600 px 사이즈로 만들어서 작업할 폴더에 export하기 css reset 셋팅하기 html 바디안에 section(카드부분)이 들어가야한다. css 에서 편집하기 body: 배경색 넣어주기 ! section 태그 박스 넣어주기 width : 340px 너비값 넣어주고 높이값은 안넣어준다. 하지만 padding 값을 넣어주면 너비값이 지정되어있기 때문에 높이값이 30+30 으로 되서 60px이 지정됨 margin : 50px auto; 는 박스를 가운데 정렬을 해준다. box-shadow: 10px 10px 30px rgba(0,0,0,0.1) > 그림자 투명도 지정해준다. html에 다시 돌아가서 섹션 안에 nav 태그 넣어주기 폰트어썸에서 bar 아이콘 복사해서 nav..

01 상하 슬라이드 html > 골격 만들어주기 css> reset 하기 css 에 .container / 클래스 태그 style 넣어주기 ● 변수 지정 : const / let 으로 이름 지정가능 ●setInterval: 일정시간 간격으로 애니메이션을 반복할 수 있다. 이미지 상하로 이동하는 슬라이드 @charset "utf-8"; /* reset */ *{ margin: 0; padding: 0; box-sizing: border-box; color: #222; } li{ list-style: none; } a{ color: #222; text-decoration: none; } img{ display: block; } .clearfix::before, .clearfix::after{ content:..

원근감을 이용한 회전효과 html 골격만들기 >css figure라는 공통된 태그를 넣어주면 명령어를 줄여서 쓸수 있다. ● perspective : 투시점 , 부모에게 적용해야함 left 가 기준점(relative)이고 figcaption 수정하기 figcaption에 translateZ를 추가해서 이미지와 피그캡션을 z축으로 띄어준다. left 이미지 효과주기 .front , .back 에 transform-style 넣어준다, ● transform-style : preserve-3d > 3d로 사용하겠다. 아래에 #wrap .left .front{} 하나 더 만들어준다. transform: rotateY / 시간값 / backface-visibility: hidden 적용 #wrap .left:ho..

html 골격만들기 클래스에 이름을 공통으로 쓰기 위해서는 클래스에 이름을 2개로 사용해줌 figure 태그로 이미지 앞면, 뒷면의 태그를 넣어준다. css에서 효과는 똑같으니까 effect이름으로 스타일을 넣어준다. ● >표시는 바로밑에 자식에게 사용해야한다. figure 피그캡션 수정하기 _효과주기 left / right 각각 front,back 효과를 주어야한다. hover 시 효과 넣어주기 > html 왼쪽이미지 앞면 왼쪽이미지 뒷면 오른쪽이미지 앞면 오른쪽이미지 뒷면 > css @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } img{ display: block; } body{ height: 100vh; backgroun..

html 골격만들기 ul에 class="list" li에 class="list_img" 클래스 지정해주기 css 스타일 넣어주기 - 제이쿼리 스니펫 body에 붙여넣기 - 변수- 이름지정해주기 // 배너 이미지슬라이드 const banner = $(".banner"); const list = $(".banner > .list"); const listImg = $(".banner > .list > .list_img") // setInterval(function(){},3000); // 3초마다 function(){}를 불러와서 실행시키라는 명령어 -애니메이션 넣어주기 // setInterval(function(){},3000); // 3초마다 function(){}를 불러와서 실행시키라는 명령어 setIn..

● 코드 정렬 : 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..