* 사진 Hover일때 마우스 포인터 두기 li:hover{ opacity: 0.7; transform: scale(1.02); cursor: pointer; } cursor: pointer 코드를 추가하면 마우스 Hover일때 손가락 모양이 생긴다. * 사진 클릭시 팝업창 띄우기 const li_collection = document.getElementsByTagName('li') Array.from(li_collection).forEach(li => { li.addEventListener('click', () => { alert('hello !') }) }); app.js 파일에 위와 같은 코드를 추가한다. 사진은 li 요소에 있으므로 모든 li 요소를 가져와서 반복문으로 순회하면서 각각의 요소에 c..

* 마우스 Hover li:hover{ opacity: 0.7; transform: scale(1.02); } style.css 파일 하단에 위 코드를 추가한다. 사진 위에 마우스가 위치하면 사진이 살짝 흐려지고 크기가 조금 커진다. * 음악 삽입하기 프로젝트 폴더에 듣고 싶은 음악을 추가한다. body 태그 바로 아래 위 태그를 추가한다. 해당 음악을 audio 태그로 가져와서 자동으로 플레이한다. 현재까지의 html 전체코드는 위와 같다.

* html 코드로 리스트 보여주기 body{background: white} console.log("hello world !") 이후 작업을 위해 위와 같이 style.css app.js 코드를 각각 변경한다. 사진 1 사진 2 사진 3 사진 4 사진 5 ul 태그는 쇼핑몰 의류 목록이나 넷플릭스 영화 목록과 같은 데이터 목록을 나열할때 많이 사용하는 태그다. ul은 unordered list의 약자로 순서가 없는 리스트라는 의미다. 한글문서나 PPT의 순서가 없는 목록과 같다. 사진 1 사진 2 사진 3 사진 4 사진 5 리스트를 추가한 현재까지의 코드는 위와 같다. 편집기에서 ctrl + s 키를 동시에 눌러 코드를 저장하면 브라우저 화면이 업데이트 되고 아래와 같은 사진 리스트가 표시된다. * 리..

* 비주얼 스튜디오 코드(vsc) 설치 비주얼 스튜디오 코드(vsc) 설치 가이드 비주얼 스튜디오 코드 설치하기 다운로드 사이트 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio C.. syleemomo.tistory.com * 프로젝트 루트 폴더 생성 윈도우 검색창에서 CMD를 검색하고 CMD 명령창을 오픈한다. 위와 같이 mkdir 명령어로 gallery라는 폴더를 생성한다. dir 명령으로 폴더가 제대로 생성되었는지 확인한다. 또..

* 원하는 레이아웃 설계하기 * 사진 리스트 중앙 정렬하기 ul{ list-style: none; display: flex; justify-content: center; } style.css 파일에서 ul 선택자(selector)에 2~3번째 줄 코드를 추가합니다. 해당 코드는 flexbox를 이용해서 레이아웃을 하고, ul 태그 내부의 모든 리스트를 중앙 정렬합니다. flexbox는 기본적으로 리스트를 가로로 정렬하기 때문에 아래와 같이 보여집니다. * 사진 리스트 세로 중앙 정렬하기 flex-direction: column; align-items: center; 위 코드를 CSS ul 선택자 안에 추가한다. ul{ list-style: none; display: flex; flex-direction:..