본문 바로가기
728x90

전체 글476

비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션) 모바일 네비게이션 01html 마크업css 편집#contents 편집●vw : 세로로 잘라서 나눠서 쓰겠다. ●vh : 가로로 잘라서 나눠서 쓰겠다.#nav 편집h1, nav float left/ right 줌nav 포지션 픽스를 해주어 고정시키고 포지션을 띄우면 너비값을 잃기 떄문에 w:100%를 줌menu 를 옆으로 나열하기 위해 inline 구조로 변경하고 active는 인라인구조와 블럭구조의 성질을 가지게한다. active a 를 만들어서 컬러값을 넣어야 변경됨 반응형 적용하기#nav .mNav 편집햄버거메뉴 만들기 - 영역 잡기햄버거메뉴 위치 잡기햄버거 메뉴 바 만들기햄버거 메뉴 바 2 , 3 만들기**실무팁나중에 디자인된 부분을 보고 할 때는 포토샵 파일을 참고해서 위치를 넣어야한다. (포토샵.. 2023. 6. 30.
비주얼 스튜디오 코드 55_ parallax04 html 마크업 css 편집_contents css 편집_nav ●.each: 선택한 요소가 여러개일 때 반복적으로 함수를 실행해주는 메서드 header 높이값 if문을 이용하여 nav 액션주기 처음에는 nav가 밑에 있고 스크롤을 내리면 nav가 위로 올라가는 액션이다. this 는 nav 이다. JHH's Website menu1 menu2 menu3 menu4 menu5 menu6 열심히 합시다. 졸지 마시고 자십시오 무슨 일 이든 안되면 반복하세요 오늘 비가 너무 많이 오네요 평양냉면 먹고싶다. 돈 많은 백수가 됐으면 좋겠다. @charset "utf-8"; *{ padding: 0; margin: 0; box-sizing: border-box; color: #222; } li{ list-styl.. 2023. 6. 29.
[JAVASCRIPT]5.클래스 제어하기 html 마크업 #wrap article css 편집 자바스크립트로 박스안에 아쿠아색 클릭했을 때 핑크로 변경하기 변수 지정 아쿠아를 클릭하면 핑크로 변경된다. addClass = classList >> 클래스를 추가한다. click하면 "on"이 발생하도록한다. wrap.addEventListener("click",()=>{ wrap.classList.add("on"); }); 클래스가 없기 때문에 false가 뜬다. wrap.addEventListener("click",()=>{ wrap.classList.add("on"); let isOn = wrap.classList.contains("on"); console.log(isOn); }); 클래스를 추가하면 true가 된다. if문을 이용해서 자바스크.. 2023. 6. 29.
비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자 01 자식 요소의 순서를 지정하자 html 마크업 css편집 ●order: 나열되어있는 자식들에게 order로 순서값을 변경해 줄 수 있다. 1 2 3 02 요소의 안쪽 여백 확대하기 ●flex-grow:1; 모든 article이 똑같은 사이즈로 넓이값이 지정됨 article 중 하나만 2를 넣었을 때 ●flex-grow:2; FLEX GROW_1 FLEX GROW_2 FLEX GROW_3 03 요소의 안쪽 여백을 축소하기 ●flex-shrink: 여백을 축소한다. FLEX shrink FLEX shrink FLEX shrink 2023. 6. 29.
비주얼 스튜디오 코드 53_parallax03 html 마크업 css 편집 사이드 메뉴 스타일 지정 open 버튼 만들기 클릭이벤트 액티브 이벤트 open 단추 활성화하기 사이드 네비게이션 숨겨져 있을 때 open 버튼 클릭하면 나타나게 하기 open 클래스와 nav가 만나게 해야한다. 스르륵 open 되기 위해서 시간을 더해주면 된다. 하지만 .css 는 open만 되고 닫히지 않는다. .toggleClass("Open"); 을 한다. 만약에 open이라는 클래스를 갖고 있을 때와 안 갖고 있을 때 if문 : 모든 조건을 다 수용할 수 있다. ● hasClass("open"): 가지고 있으면 참, 그렇지 않으면 거짓 >> 유무에 따라 참, 거짓을 구별하는 메서드 ●text("Close") : 원래 값은 지우고 "Close"로 대치하라는 메서드 We.. 2023. 6. 28.
비주얼 스튜디오 코드 52_웹 표준)갤러리 이미지 넣기 .column col6 편집 html 마크업 css 편집_col6-gallery h4 , btn 편집하기 hover 시 이미지 색상 변경 gallery_img 편집하기 이미지 width 100%로 하여 박스안에 비율 맞추기 이미지 li의 레이어 순서를 정해주기 위해 position: absolute 하고 z-index로 레이어 순서를 정해준다. 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 로그인 가입 CONTACT US ENGLISH 하이미디어 구로캠퍼스 자바기반 풀스택 웹개발자3 icon1 icon2 icon3 icon4 전체메뉴 HTML5 html1 html2 html3 html4 html5 html6 html7 html8 html9 html10 CSS3 css1 css2 css3 c.. 2023. 6. 28.
728x90
반응형

티스토리툴바