본문 바로가기
728x90
반응형

☭DEVELOPER/#2 웹개발(자바기반 풀스택)214

[JAVASCRIPT] 자바스크립트 이벤트 연결하기 ● .addEventListener : 이벤트 발생시키는 명령어 ● 화살표 함수 link.addEventListener("click",function(){}); link.addEventListener("click",()=>{}); >> 두가지 방법으로 화살표함수를 넣을 수 있다. a태그가 우선시 되기 때문에 링크를 클릭하셨군요가 안나온다. ● preventDefault: 고유의 명령어를 무시하고 내가 원하는 값을 나오게 해주는 명령어다. a태그 속성값을 무시하고 원하는 값을 출력하게 하는 명령어 [박스 클릭했을 때 색상 변경하는 방법] 클릭이벤트 2023. 6. 22.
비주얼 스튜디오 코드 43_웹 표준) 컨텐츠 컨텐츠 6개의 칸을 만들어서 바깥테두리 없이 레이아웃 진행 html 골격만들어주기 css 편집 표 위치와 영역 잡아주기 세번째 표의 보더를 없애주어야한다. .col3 오른쪽 위 끝 위치해야하기 때문에 보더, 패딩, 마진을 0으로 해주어야 올라간다. .col6도 똑같이 넣어준다. 각 표마다 아이콘 이미지 적용 img 에 아이콘 이미지를 적용했을 때 똑같은 이미지가 들어간다. .cont .colum .ico img > .cont .col1 .ico_img 부터 각각 이미지의 좌표를 지정해주면 다르게 이미지를 적용할 수 있다. 마우스 오버시 다른 이미지가 나오도록 한다. html 에서 각 col1 에 ir_pm을 적용하여 글씨를 없애준다. 다른 표에도 아이콘을 다르게 적용한다. .ico_tit 와 ico_de.. 2023. 6. 22.
비주얼 스튜디오 코드 42_ 지도 넣기 카카오맵 들어가서 장소 선택 > 3번째 단추 클릭하면 html 태그복사가있다. 소스생성하기 클릭 > 소스 복사하기 비주얼 스튜디오 코드 html > body에 div class="map" 만들고 그 안에 소스 붙여넣기 한다. mapWidth / mapHeight 로 지도 크기를 수정할 수 있다. 2023. 6. 22.
[JAVASCRIPT]요소 선택하기 자바스크립트는 따로 링크를 걸지 않고 사용할 수 있다. frame 은 section # wrap 안에 있는 article이 들어간 것을 볼 수 있다. querySelector는 하나의 요소를 선택할 수 있다. querySelectorAll 은 여러개의 article을 모두 선택할 수 있다. ● 배열 for() 여러개 복수로 할땐 쿼리셀랙트올 + for문 을 써야 하나하나 방에 값을 뿌려줄 수 있다 querySelectorAll 랑 for문은 세트다 items 아이템이라는 변수에 넣어서 층에 0부터 3번까지 4개의 인데스값을 받으면서 처리한다. 2023. 6. 21.
비주얼 스튜디오 코드 42 _ slick, dots, autoplay ● 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.. 2023. 6. 21.
비주얼 스튜디오 코드 41 _ 패밀리사이트 셀렉트 ● label: 이름을 달아주는 태그 for : label 와 select가 세트라고 알려줌 select > option seleted="selected"지정해서 항상 위에 위치하도록 함 value = "" 밸류값으로 사이트 링크 걸어줌 seleted에 script를 넣어주어야한다. ●onchange= "" Family Map 네이버 다음 구글 네이트 만약 this에 밸류값이 있으면 윈도우를 오픈해줘라 선택한 아이의 밸류값을; 검색사이트 Family Map 네이버 다음 구글 네이트 2023. 6. 21.
728x90

티스토리툴바