Giant Danio Fish
본문 바로가기

숙제끝4

마우스 이펙트 - 텍스트 효과 마우스 효과 마우스 이펙트 - 텍스트 효과 마우스 커서를 따라서 글씨가 가운데에서 양옆으로 색상이 바뀌고 글씨에 마우스가 올라가면 크기가 커지면서 반전효과를 주어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 가운데 넣을 이미지와, 사용할 커서 각각 똑같은 글씨를 좌우로 넣도록 두개씩 만들어 봅시다. 소스 보기 I'm still hungry I'm still hungry bab jo jae bal bab jo jae bal 난 아직 배가고프다. 난 아직 배가고프다. 밥좀 주세요. 밥좀 주세요. CSS 작성 이미지를 가운데에 넣어주고, 커서를 20,20px로 조그마하게 원으로 만들었습니다. 커서에 active 클래스가 추가되면 마우스 반전과 크기가 5배로 커지도록 만들어줍니다.글씨는 가운.. 2022. 9. 29.
jQuery - 스타일 메서드 jQuery 스타일 관련 메서드 jQuery 스타일 관련 메서드에 대해서 알려드리겠습니다. CSS() 메서드 메서드 종류 설명 width() 요소의 가로 길이를 취득, 변경할 수 있습니다. innerWidth() padding이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth() border와 margin이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth()는 요소의 width 값 + 좌,우 border 값 outerWidth(true)는 요소의 width값 + 좌,우 margin 값 height() 요소의 높이를 취득 변경할 수 있습니다. innerHeight() padding이 적용된 요소의 높이를 취득, 변경할 수 있습니다. outerHeight.. 2022. 9. 3.
퀴즈 만들기 - 객관식(여러문제)유형 퀴즈 효과 객관식(여러문제 유형) 오늘은 화면에 여러문제를 표현한뒤 마지막에 결과확인 버튼을 누르면 점수가 나오는 유형을 만들어보겠습니다. 또한 quizScore라는 변수를 0으로 설정하고 맞을때마다 quizScore++를 사용해 마지막 정답버튼을 눌렀을 때 총 맞은 개수가 나오게 출력하였습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 기존에 body태그에 있던 코드들은 script로 넣어줄것이므로 quiz__wrap만 빼고 전부 지워줍니다. CSS 작성 기존과 딱히 변화 없습니다. JS 작성 퀴즈 번호와 문제, 보기는 공통이므로 (``)템플릿 리터럴을 사용해 넣어줍니다. question(element)값을 입력해서 배열의 순서대로 값이 출력되게 만들었습니다. 펼쳐 보기 const quiz.. 2022. 8. 23.
블록 구조 / 인라인 구조 블록구조 / 인라인구조 오늘은 웹 사이트 제작에 있어 가장 기본이 되는 블록 구조와 인라인 구조에 대해서 알려드리겠습니다. 블록구조 블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 만들어지는 형태입니다. 블록 요소에는 일부를 제외한 블록 요소를 포함하고, 인라인 요소까지 포함 가능합니다. 기본 설정이 블럭인 자주 사용하는 태그들은 다음과 같습니다. div, p, h1~h6, ul, li, ol, table, form, section, footer... 그림으로 설명 드리겠습니다. See the Pen Untitled by younghwan12 (@younghwan12) on CodePen. 인라인구조 인라인 요소는 글자와 같이 옆으로 나열되는 형태로 줄 바.. 2022. 8. 19.
광고 준비중입니다

티스토리툴바