728x90 반응형 position11 비주얼 스튜디오 코드 45_웹표준) 컨텐츠 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.. 2023. 6. 23. 비주얼 스튜디오 코드 40_ 웹표준) 네비게이션 / 배너 네비게이션 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 으로 전체메뉴 글씨 없애주기 아래 .. 2023. 6. 20. 비주얼 스튜디오 코드 31_ 상하 / 좌우 슬라이드 배너 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:.. 2023. 6. 14. 비주얼 스튜디오 코드 28_ 상하 슬라이드 배너 만들기 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.. 2023. 6. 13. 비주얼 스튜디오 코드 23_ 마우스오버 효과② wrap으로 내용을 감싸주는 영역 넣어주기 h3부터 쓴 이유 h3인 이유는 태그 순서에 따라 figcaption 3번째이기 때문에 h3 웹표준에 따르는 것이 좋음 ● 블럭구조: h태그, p태그 ● vh : ex) height: 100vh - 높이값을 가로로 100개를 나눠서 100개를 사용하겠다. ● letter-spacing: 글자 자간 [이미지사이즈] 이미지 사이즈 설정 시에 이미지 width : 100% 로 설정해주는 것이 좋음 이미지 사이즈 수정 시 이미지의 부모 태그 사이즈만 수정하면 된다. 부모의 사이즈가 수정되면 이미지 사이즈도 자동으로 변경된다. ●position 을 넣어주면 너비값을 잃기 때문에 너비값을 넣어줘야함 가상요소 넣어주기(플러스 마우스오버효과) ● 한 태그에 가상요소를 최대 2.. 2023. 6. 12. 비주얼 스튜디오 코드 21 _ 연꽃축제 예제 _ 팝업창 만들기 푸터까지 완성한 홈페이지 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.. 2023. 6. 9. 이전 1 2 다음 728x90
