조반짝의 도전일지

[face4 영역 작업] html mark up -video: 경로지정해서 영상 삽입 후 뒤에 효과 명령어 넣기 controls: 시작, 정지 버튼이 활성화 muted: 음소거 , muted와 autoplay를 같이 써줘야 autoplay이가 실행이 된다. .face4 css edit video size 줄이기 width: 100% p태그와 em태그를 옆으로 나열하는 방법 1. float(left, right)로 띄워줌 단, 부모태그에 overflow: hidden 이나 clearfix 적용 2. display: inline-block >> 너비값이 있어야함 3. position 으로 위치지정 [.face5 영역 작업] html markup .face5 css edit .pic 이미지 편집 backgro..

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..

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

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

html 생성 linear-gradient(각도, 색상코드) - 직선 그라디언트 색상 코드 두가지로 사용하면 한 가지 명령어가 안 먹을 시에 둘 중 하나가 들어올 수 있도록 한다. 전에는 브라우저마다 속성이 다르기 때문에 배경색과 그라디언트색상을 두가지 사용했지만 지금은 거의 브라우저가 통일된상태이다. _가운데 정렬 3총사 flex: 자식들을 옆으로 보내주는 것이 특징 alian-items: center; - 세로 가운데 정렬, 높이값이 있어야 적용이 됨 justfy-content: center; - 가로 가운데 정렬 border-radius: __px 는 이미지위에 피규어가 있기 때문에 이미지에 명령을 줘야함 figcaption이 움직이려면 부모(figure)가 기준점(relative)이 되어야함 fi..

#header = = = : header의 역할만 함 : div와 똑같은 역할 border: 테두리선 wrap에 높이값 넣지 않는다. 그 이유는 wrap의 높이 값이 고정되어있으면 유동적으로 수정이 불가능 01 웹디자인 참고 사이트 본문 폰트크기 : 13px -14px 눈누: 눈누 (noonnu.cc) 구글폰트: Browse Fonts - Google Fonts Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Color - Materialize (materializecss.com) Color - Materialize To apply a background color, jus..