조반짝의 도전일지

cont_cont 영역 column col4 편집하기 css 편집하기 마우스오버 효과 주기 span에 display:block하고 overflow:hidden을 해야 em이 안보인다. strong태그 가운데 정렬하기 .hover2 편집하기 .hover4 css 편집하기 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 로그인 가입 CONTACT US ENGLISH 하이미디어 구로캠퍼스 자바기반 풀스택 웹개발자3 icon1 icon2 icon3 icon4 전체메뉴 HTML5 html1 html2 html3 html4 html5 html6 html7 html8 html9 html10 CSS3 css1 css2 css3 css4 css5 css6 css7 css8 css9 css10 css11 cs..

네비게이션 html 골격만들기 전체메뉴는 안보여도 되지만 ir_pm > 이미지를 대체할 때 사용할 때 ir_su : 아무것도 안들어가도 됨 h2에 class ir_su를 넣어서 전체메뉴가 안보이도록한다. 메뉴 만들어주기 css .nav편집 컬러가 있을 때는 padding 을 사용하는 것이 좋다. padding 사용했을 때 margin 사용했을 때 div float 띄우고 부모(nav)에 clearfix 주기 단 나누기 a태그에 마우스 올렸을 때 밑줄 나오게 하기 **reset.css 에서 h3 태그만의 스타일을 지정해주고 html에 class = "h3" 이름만 넣어주면 공통적으로 스타일이들어간다. .tit 편집 css에서 .tit 편집해주기 아이콘 넣어주기 ir_pm 으로 전체메뉴 글씨 없애주기 아래 ..

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 골격만들기 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..

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

푸터까지 완성한 홈페이지 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..

_배너 배너에 이미지 넣기 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..

w1920 h500 layout grid > columns으로 변경 margin: 360으로 설정 줄자켜기 줄자로 가이드라인 넣어주기 alt+드래그+shift: 고정이동 + 복사 그리드 설정하기 사각형 10*10px / 사각형 400*200px 로 가이드라인 그려주기 아래이미지 참고 이미지 크기 설정해주기 file > place image 이미지 선택 export > 다른이름으로 저장 plugins_unsplash 생성 file > plugins > find more plugins > 검색창에 unsplash 검색 > unsplash Run 클릭 unsplash 플러그인을 통해 다양한 이미지를 사용할 수 있다. position 이미지 박스 내려가는 동작 만들기 li안에 img와 span(박스)이 동등하게..

margin: 50px auto; 위쪽에서 50픽셀 띄워주고 auto는 좌우 자동으로 맞춰줌 01 float float: 띄워서 오른쪽이나 왼쪽으로 위치시킴 float을 하게 되면 2층으로 보내지기 때문에 가상요소로 넣어줌으로써 테두리선이 위로오게됨 가상요소 명령어 #wrap::after{ content:""; display: block; clear:both; } 반응형으로 인해 부모에 기준점을 잡아서 위치를 시켜줘야함 기준점은 부모자리에 position: realative; 으로 잡아준다. 임의지점은 자식자리에 position: absolute; 0,0의 자리를 먼저 알아두면 객체 위치시킬 때 편리하다. 02 영역의 레이어 층을 바꿔주는 명령어 z-index : 레이어 층을 바꿔준다. position:..