조반짝의 도전일지

01 e.preventDefault() a태그 링크를 걸리지만 기본 명령어를 무시하고 원하는 명령어를 넣어보기 e.preventDefault(); 기존 명령어를 삭제함 네이버 02 마우스 오버 효과 ● mouseenter : = mouse hover 박스 핑크로 변했다가 마우스 떼면 아쿠아색으로 바꿔주기 scale 키웠다가 원래 크기로 변경해주기 같은 방법(너비 높이 값 지정) 03 반복된 요소에 이벤트 한꺼번에 연결하기 ● querySelectorAll 요소를 한꺼번에 지정 let : 변하는 값 e.preventDefalut(); 기본으로 갖고있는 명령어를 멈춤 item1 item2 item3 item4 04 클릭이벤트를 발생할 때 증가, 감소하는 프로그램 1씩 증가 1씩 감소 증가 감소 05 박스 돌..

01 자식 요소의 배치방법을 지정하기 컨텐츠에 flex를 사용하면 편리하게 사용할 수 있다. html 골격 css 편집 section, article > 영역잡아주기 article 옆으로 flex를 이용해서 정렬하기 display: flex; >> 옆으로 나열 display: iline-flex; - in-line 구조 dispaly: flex; - block 구조 flext-direction: column; 세로로 자식을 정렬 flext-direction: 가로로 자식을 정렬 display: flex; align-item: center; justify-content: center article 안 요소 가운데 정렬 flext-direction: column-reverse; 세로로 자식을 반대로정렬 fl..

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

● .addEventListener : 이벤트 발생시키는 명령어 ● 화살표 함수 link.addEventListener("click",function(){}); link.addEventListener("click",()=>{}); >> 두가지 방법으로 화살표함수를 넣을 수 있다. a태그가 우선시 되기 때문에 링크를 클릭하셨군요가 안나온다. ● preventDefault: 고유의 명령어를 무시하고 내가 원하는 값을 나오게 해주는 명령어다. a태그 속성값을 무시하고 원하는 값을 출력하게 하는 명령어 [박스 클릭했을 때 색상 변경하는 방법] 클릭이벤트

컨텐츠 6개의 칸을 만들어서 바깥테두리 없이 레이아웃 진행 html 골격만들어주기 css 편집 표 위치와 영역 잡아주기 세번째 표의 보더를 없애주어야한다. .col3 오른쪽 위 끝 위치해야하기 때문에 보더, 패딩, 마진을 0으로 해주어야 올라간다. .col6도 똑같이 넣어준다. 각 표마다 아이콘 이미지 적용 img 에 아이콘 이미지를 적용했을 때 똑같은 이미지가 들어간다. .cont .colum .ico img > .cont .col1 .ico_img 부터 각각 이미지의 좌표를 지정해주면 다르게 이미지를 적용할 수 있다. 마우스 오버시 다른 이미지가 나오도록 한다. html 에서 각 col1 에 ir_pm을 적용하여 글씨를 없애준다. 다른 표에도 아이콘을 다르게 적용한다. .ico_tit 와 ico_de..

카카오맵 들어가서 장소 선택 > 3번째 단추 클릭하면 html 태그복사가있다. 소스생성하기 클릭 > 소스 복사하기 비주얼 스튜디오 코드 html > body에 div class="map" 만들고 그 안에 소스 붙여넣기 한다. mapWidth / mapHeight 로 지도 크기를 수정할 수 있다.

자바스크립트는 따로 링크를 걸지 않고 사용할 수 있다. frame 은 section # wrap 안에 있는 article이 들어간 것을 볼 수 있다. querySelector는 하나의 요소를 선택할 수 있다. querySelectorAll 은 여러개의 article을 모두 선택할 수 있다. ● 배열 for() 여러개 복수로 할땐 쿼리셀랙트올 + for문 을 써야 하나하나 방에 값을 뿌려줄 수 있다 querySelectorAll 랑 for문은 세트다 items 아이템이라는 변수에 넣어서 층에 0부터 3번까지 4개의 인데스값을 받으면서 처리한다.

● slick 사이트 : 이벤트 코드를 복사해서 이용할 수 있는 사이트 https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io get it now > download now 해서 다운로드를 받는다 두개의 파일을 복사해서 작업하고있는 비주얼 스튜디오 코드 파일에 javascript 파일은 js 파일(새로만들기)에 붙여넣는다. slick.css 는 cs..

셀렉트 ● label: 이름을 달아주는 태그 for : label 와 select가 세트라고 알려줌 select > option seleted="selected"지정해서 항상 위에 위치하도록 함 value = "" 밸류값으로 사이트 링크 걸어줌 seleted에 script를 넣어주어야한다. ●onchange= "" Family Map 네이버 다음 구글 네이트 만약 this에 밸류값이 있으면 윈도우를 오픈해줘라 선택한 아이의 밸류값을; 검색사이트 Family Map 네이버 다음 구글 네이트

html 골격만들기 css 로 박스 편집 자바스크립트로 박스 스타일 편집하기 박스 변수 지정해주기 style 편집해주기 배경색 변경 border 편집 transform 여백적용 id.style.명령어 = 로 스타일을 편집할 수 있다. 카멜표기법 : 두번째 단어에 대문자를 넣어주는 표기법 ex) fontSize, textAlign