이제하네

* { margin: 0px; padding: 0px; } #main { width: 100%; height: 100vh; overflow: hidden; background-color: #b1e1e2; animation: sky linear 20s infinite; } #title { width: 1000px; position: absolute; top: 68%; left: 50%; transform: translate(-50%, 150%); font: 92px/1 "Poiret one"; color: #fff; text-align: center; animation: day linear 20s infinite; } section{ width: 1000px; height: 500px; position: ..

js을 사용해서 간단히 좋아요 모션 구현 처음에는 그냥 색깔만 변하도록 설정 했는데 모양을 바꾸고 싶어서 클래스 네임을 바꾸는 형식을 취함 또한 설명할때 쉽게 하기위하여 궁금한거나 새로 알았던 사실에 주석을 달아 설명할때 이야기 할수 있도록 함

기본 틀 작성 이름 둘리 나이 999999세 직업 백엔드 엔지니어 위치 서울, 대한민국 이메일 example@example.com 거기에 맞는 CSS * { margin: 0px; padding: 0px; } #main { width: 100%; height: 1000px; display: flex; justify-content: center; } .profile-card { margin-top: 100px; width: 300px; height: 400px; border: 1px solid #ccc; border-radius: 5px; padding: 20px; text-align: center; } .profile-picture { width: 100px; height: 100px; border-ra..

지금까지 공부했던 html, css, js 을 사용해서 간단한 웹 페이지 생성 실습페이지 로그인 프로필 보기 내용 먼저 헤더부분을 구성하기위해 로 헤드부분을 생성 * { margin: 0px; padding: 0px; box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; } #header { width: 100%; border-bottom: 1px solid #ddd; background: gray; } #header .inner { width: 1180px; height: 80px; margin: 0px auto; position: relative; } #header .inner h1 { position: absolu..

속성값 알아내기 변수 link 에 a의 요소를 저장 getAttribute() 함수를 호출 getAttribute() 는 선택된 요소의 속성값을 구하는 함수 괄호 안에 인수값으로 알아내고 싶은 속성명을 입력하면 해당 속성값 반환 인수로href를 넣고 결과값을 변수 link_herf 에 저장후 콘솔로 확인 속성값 변경하기 link2 에 a의 요소를 저장 변수 new_href 에 변경할 주소값을 저장 변수 link2를 불러와 setAttribute() 함수를 실행 setAttribute() 은 2개의 인숫값을 전달 첫번째 인수는 변경할 속성명 두번째 인수로는 변경할 속성값 입력

함수 정의 및 호출로 기능 재활용하기 함수란 자주 실행하는 코드를 function 키워드와 임의의 이름을 붙여서 정의한 코드 plus 함수의 괄호 안에 num1, num2 라는 매개변수를 만듬 매개변수는 함수 외부에서 내부로 값을 전달하는 통로 매개변수를 통해 실제 전달되는 값을 인수라고 함 plus함수는 외부에서 매개변수 num1,num2로부터 2개의 인수를 전달받고 내부의 해당값을 더함 See the Pen 코드패키징 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 버튼에 on 클래스가 붙으면 글자색이 검정으로 활성화되고, 박스는 y축으로 180˚회전하면서 투명도가 1이 되도록 함 입체적으로 보이기 위하여 부모 요소 section에 perspective 로 원근감 설정 버튼 ..

클래스 이름만 추가·제거하는 방법으로 스타일 변경 See the Pen js추가제거로 스타일변경 by 신범식 (@ulqsqjpw-the-solid) on CodePen. document.querySelector()문으로 #wrap 요소를 찾아서 변수 wrap에 저장 wrap을 불러 다시 querySelector으로 자식 요소인 ex1-1을 찾아 변수 box에 저장 addEventListener()문을 활용하여 wrap 을 클릭하면 자식 요소의 배경색 변경 ※ 하짐만 이렇게 인라인 형태로 삽입된 스타일 구문은 우선순위가 매우 높아서 기존 css파일에 적용된 스타일 우선순위에 문제가 발생할 수도 있다. 스타을 속성값을 직접 변경하지않고 클래스명을 추가해서 스타일 제어 See the Pen Untitled b..

클릭 이벤트 연결하기 See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen. .addEventListener() 문은 요소명.addEventListener("이벤트명" , (전달될 값) =>{실행할 구문}); 으로 사용 js에 있는 1번 같은 경우에는 콘솔에 찍히기도 전에 네이버로 이동 js에 있는 2번 같은 경우에는 네이버로 이동을 막고 콘솔에 내용이 찍힘 e.prventDefault() 문은 이벤트의 기본 기능을 실행 X 호버 이벤트 연결하기 See the Pen 호버이벤트 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 코드 블록 내부에 전달되는 값이 1개이면 괄호를 생략 가능 (e)=> 이걸 e=>로 써도 됨 반복되는..

자바스크립트로 HTML 요소의 스타일 제어 ※이미 CSS 파일로 지정된 HTML 요소의 스타일을 JS로 변경가능

document.querySelector() - 요소 선택하기 document.querySelectorAll() - 요소를 모두 선택하기 for of 문을 활용하면 여러 개의 요소를 편하게 반복하며 코드를 실행할수 있지만 반복되는 요소의 순섯값을 코드 내부에서 활용하기 위해서는 for 문을 활용하는것이 좋다! 부모,자식,형제 요소 선택하기 자식 요소를 선택하기 부모 요소 선택하기 제일 가까운 상위 부모 요소 선택하기 형제 요소 선택하기