Javascript응용_Effect34 Slider EFfect 07 슬라이드 이펙트 이번 시간에는 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이) 효과에 대해 알아보겠습니다. 슬라이드 07 슬라이드 이펙트 모든 기능이 구현된 종합세트입니다. 6번 예제와 대체로 비슷하지만 닷메뉴가 이미지 이동에 따라 같이 이동하고 auto 플레이가 가능하며, mouseenter, mouseleave에 반응하여 마우스 위치에 따라 슬라이드가 멈췄다가 진행했다가 합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 이미지1 이미지2 이미지3 이미지4 이미지5 prev next 02. CSS 코드 @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .s.. 2022. 10. 23. Slider Effect 06 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 효과에 대해 알아보겠습니다. 슬라이드가 끝에 가도 부자연스럽게 이동되지 않고 좌우로 무한이동 가능합니다. 슬라이드 06 버튼을 통해서 좌우로 이동 가능하고, 5->1 슬라이드로 넘어갈 때 뒤로넘어가지 않고 무한으로 넘어갑니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 이미지1 이미지2 이미지3 이미지4 이미지5 prev next 02. CSS 코드 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ posit.. 2022. 10. 21. Search Effect 07 Search Effect07 서치 이펙트 일곱 번째 시간입니다. 게임이펙트 시간에 배운 뮤직기능을 넣어 게임을 만들어보겠습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 서치게임과 꿀벌svg, 오디오에 대한 틀입니다. 코드 보기 { CSS 속성 검색 이벤트 2분 동안 CSS 속성 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 힌트보기는 한번 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 02. CSS 꿀벌에 관한 CSS를 링크로 걸어 추가했고 새로 추가된 요소들에 이전 예제와 통일성을 위해 비슷한 디자인을 입혀줬습니다. 코드 보기 { /* main */ #main { margin: 50p.. 2022. 10. 21. Game Effect 01 게임 이펙트 01 게임 이펙트 첫 번째 시간입니다. 이번 시간에는 뮤직박스를 만들어보겠습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 전체적인 게임이펙트 틀로 헤더, 시간, 마우스, 아이콘, 푸터 + 뮤직박스와 소스보기로 구성되어 있습니다. 코드 보기 { Daewon Game World 뮤직 듣기 음악 듣기 뮤직 듣기 음악 듣기 뮤직 듣기 *** Music player +++ Average - Patrick Patrikios youtuber music 0:00 4:00 뮤직 리스트 소스 보기 } 02. CSS 코드 게임이펙트 틀과 뮤직박스에 대한 CSS입니다. 코드 보기 { // 게임이펙트 틀 @import url('https://webfontworld.github.io/fontlab/L.. 2022. 10. 18. Search Effect06 Search Effect06 이번 시간에는 sort(), reverse() 메서드를 이용해서 숫자와 문자열을 정렬하고 반대로도 정렬해보았습니다. 원본 사이트 보기 원본 소스 보기 01. HTML search__click메뉴에 btn 리스트를 추가했습니다. 코드 보기 { sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬하기 오름차순 정렬하기 내림차순 정렬하기 알파벳순(a~z) 알파벳순(z~a) 랜덤정렬 찾은 속성 갯수 : 0 } 02. CSS 코드 보기 { /* main */ #main { margin: 50px 10px; } .search__wrap { max-width: 1400px; margin: 0 auto; border: 3px solid #223547; bor.. 2022. 10. 18. Slider Effect 05 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) 효과에 대해 알아보겠습니다. 슬라이드 05 버튼을 통해서 좌우로 이동 가능하고, 닷메뉴를 통해서 원하는 번호의 이미지로 이동가능합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 닷메뉴를 추가해줬습니다. { prev next } 02. CSS 코드 닷메뉴에 대한 css를 추가했습니다. { .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 45.. 2022. 10. 14. Parallax Effect 07 패럴랙스 이펙트 07 페럴랙스 이펙트 일곱 번째 시간입니다. 이번 시간에는 스크롤을 내릴때 리빌(reveal) 효과를 줬습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 data-delay와 class에 reveal을 추가했습니다. { 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 안하는 것이다 07 s.. 2022. 10. 11. Search Effect 05 Search Effect05 이번 시간에는 filter()를 활용하여 만든 검색 프로그램에 대해 알아보겠습니다. 별을 클릭하면 중요도와 함께 속성 설명이 나옵니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 보기 { filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 찾은 속성 갯수 : 0 } 02. CSS 코드 보기 { /* main */ #main { margin: 50px 10px; } .search__wrap { max-width: 1400px; margin: 0 auto; border: 3px solid #223547; border-radius: 20px; .. 2022. 9. 30. Parallax Effect 06 패럴랙스 이펙트 06 페럴랙스 이펙트 여섯번째 시간입니다. 이번 시간에는 스크롤을 내릴때 텍스트를 한자씩 쪼개서 나타나도록 효과를 줬습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 content__item__desc에 split클래스를 추가해줬습니다. { 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 .. 2022. 9. 30. Mouse Effect 06 마우스 이펙트 마우스 이펙트 여섯번째 시간입니다. 마우스 이펙트 06 오늘은 마우스 커서를 따라서 텍스트가 중앙을 기준으로 양쪽으로 왔다갔다 하는 텍스트 효과를 줘보겠습니다. + 텍스트에 커서를 갖다대면 커서크기가 커집니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 구조를 크게 바꿔서 왼쪽 오른쪽으로 나눴습니다. { Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. } 02. CSS 코드 좌우로 꾸며주고 커서에 반전효과를 줍니다. { .mouse__wrap { color: #fff; width: 100%; height: 100vh; cursor: none; } .mouse__img { position: absol.. 2022. 9. 30. Search Effect 04 Search Effect04 이번 시간에는 find()를 활용하여 만든 검색 프로그램에 대해 알아보겠습니다. 속성을 검색하면 설명이 나옵니다. +속성박스를 클릭하면 설명이 나옵니다. 원본 사이트 보기 원본 소스 보기 01. HTML 스크립트로 불러오기 위해서 search__list를 삭제했고 search__desc가 추가되었습니다. 코드 보기 { find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 화면이 표시됩니다!!! 전체 속성 갯수 : 0 } 02. CSS 박스와 돋보기에 대한 CSS가 추가 되었습니다. 코드 보기 { /* main */ #main { margin: 50px 10px; } .search__wrap { max-width: 1400px; .. 2022. 9. 29. Mouse Effect 05 마우스 이펙트 마우스 이펙트 다섯번째 시간입니다. 마우스 이펙트 05 오늘은 마우스의 움직임에 따라 기울기 효과와 글씨 반전 효과를 줘보겠습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 mouse__img를 추가하고 그 안에 figrue를 넣어 구조를 조금 바꿨습니다. { Life is a choice 인생은 선택이다. mousePageX : 0pxpx mousePageY : 0pxpx centerPageX : 0pxpx centerPageY : 0pxpx maxPageX : 0pxpx maxPageY : 0pxpx anglePageX : 0pxpx anglePageY : 0pxpx } 02. CSS 코드 mix-blend-mode: difference와 transform-style: p.. 2022. 9. 28. Mouse Effect 04 마우스 이펙트 마우스 이펙트 네번째 시간입니다. 마우스 이펙트 04 중앙의 이미지내에서 마우스 커서를 따라 조금 흔들리는듯한 이미지 효과를 줬습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 좌표값을 실시간으로 확인할 수 있도록 mouse__info값을 추가 해줬습니다. { Experience is the best teacher. 경험은 최고의 스승이다. mousePageX : 0pxpx mousePageY : 0pxpx centerPageX : 0pxpx centerPageY : 0pxpx } 02. CSS 코드 이미지 크기를 110%로 늘려주고 트랜스폼 효과를 줬습니다. { .mouse__wrap { width: 100%; height: 100vh; display: flex; align.. 2022. 9. 22. Mouse Effect 03 마우스 이펙트 마우스 이펙트 세번째 시간입니다. 마우스 이펙트 03 마우스 커서를 따라서 비춰주는 조명효과를 주었습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { Resolve to perform what your ought, perform without fail what you resolve 해야할 일은 과감히 하라, 결심한 일은 반드시 실행하라. } 02. CSS 코드 커서포인터의 배경이미지를 배경과 같은이미지로 해주고 중앙으로 맞춰줍니다. { .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: .. 2022. 9. 22. Parallax Effect 05 패럴랙스 이펙트 05 이번에는 페럴랙스 이펙트 다섯번째 시간입니다. 이번 시간에는 이질감 효과를 자연스럽게 줘보도록 하겠습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 안하는 것이다 07 section7 말을 많이 하는 것과 말을 잘하는 것은 다르다. .. 2022. 9. 20. Mouse Effect 02 마우스 이펙트 마우스 이펙트 두번째 시간입니다. 이번 시간에는 GSAP를 이용한 마우스 이펙트 대해 알아보겠습니다. 마우스 이펙트 02 1번 유형과 크게 달라진게 없으며 움직임이 더욱 부드러워졌습니다. 메뉴바와 메인단어와 소스 보기에 transform효과를 적용하였습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기(GSAP) 1 2 3 4 5 6 7 Better the last smile than the first laughter. 처음의 큰 웃음보다 마지막의 미소가 더 좋다. } 02. CSS 코드 { /* mouseType */ .mouse__wrap { width: 100%; height: 100vh;.. 2022. 9. 18. Parallax Effect 04 패럴랙스 이펙트 04 이번에는 페럴랙스 이펙트 네번째 시간입니다. 섹션별로 그림과 텍스트가 나타나며 짝수와 홀수로 나누어서 효과를 줍니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 안하는 것이다 07 section7 말을 많이 하는 것과 말을 잘하는 것은.. 2022. 9. 18. Slider Effect 04 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 슬라이드(버튼) 효과에 대해 알아보겠습니다. 슬라이드 04 좌우로 버튼을 누르면 이미지가 미끄러지듯 이동합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { prev next } 02. CSS 코드 { /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있.. 2022. 9. 18. Parallax Effect 03 패럴랙스 이펙트 03 이번에는 페럴랙스 이펙트 세번째 시간입니다. 1,2번 유형과 대체로 비슷하고 하단에 상단으로 한번에 이동하는 top 메뉴와 메뉴바 숨김 기능이 추가되었습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 secti.. 2022. 9. 13. Parallax Effect 02 패럴랙스 이펙트 02 이번에는 페럴랙스 이펙트 두번째 시간입니다. 1번 유형과 비슷하고 메뉴바가 사이드로 빠진 형태입니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 안하는 것이다 07 sec.. 2022. 9. 13. Parallax Effect 01 패럴랙스 이펙트 01 이번 시간에는 페럴랙스 이펙트에 대해 알아보겠습니다. 패럴랙스 이펙트 01 스크롤을 내리면 scrollTop의 값이 나오고 section별로 offset의 좌표값이 나타나 있습니다. 메뉴를 누르면 부드럽게 이동합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 이전과 중복되는 모달박스 코드는 생략하였습니다. { Javascript parallax Effect01 패럴렉스 이펙트 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 se.. 2022. 9. 6. Mouse Effect 01 마우스 이펙트 이번 시간에는 마우스 이펙트 대해 알아보겠습니다. 마우스 이펙트 01 동그란 공이 마우스를 따라 다닙니다. 마우스 움직임에 따라 좌표값이 실시간으로 변하며, 특정 위치에 갔을때 여러가지 transform 효과를 줍니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { I determine a future all by myself. 내 미래는 전적으로 나 스스로 만든다. clientX : 0pxpx clientY : 0pxpx offsetX : 0pxpx offsetY : 0pxpx pageX : 0pxpx pageY : 0pxpx screenX : 0pxpx screenY : 0pxpx } 02. CSS 코드 { .mouse__wrap { width: 100%; height: 1.. 2022. 9. 6. Slider Effect 03 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 좌로 움직이기(연속) 효과에 대해 알아보겠습니다. 슬라이드 03 2초마다 중앙의 사진이 왼쪽으로 이동합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { } 02. CSS 코드 { /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 .. 2022. 9. 2. Slider Effect 02 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 좌로 움직이기 효과에 대해 알아보겠습니다. 슬라이드 02 2초마다 중앙의 사진이 왼쪽으로 이동합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { } 02. CSS 코드 { /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 *.. 2022. 8. 29. Slider Effect 01 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 트렌지션 효과에 대해 알아보겠습니다. 슬라이드 01 3초마다 중앙의 사진이 변화합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { } 02. CSS 코드 { /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; width: 800px; height: 600px; } .slider { position: absolute; left: 0; top: 0; } .slider::before { position: absolute; le.. 2022. 8. 29. 문제 06 퀴즈 이번 유형은 객관식(여러문제)-슬라이드형식이며 점수 확인이 가능합니다. 문제 06 Math.floor를 이용하여 점수를 문제수에 따라 소수점 없이 나오게 해줍니다. 틀린 문제를 모아서 빠르게 정리해봅시다. 원본 사이트 보기 원본 소스 보기 HTML 코드 { ${question.answerType} 정답입니다! 틀렸습니다! 다음 문제 보기 🫠 } Javascript 코드 매개변수를 이용해 HTML요소를 반복해서 적어야 하는 고생을 없애줍니다. 0부터 카운트하니 quizInfo.length-1을 해주고 Math.floor와 quizCount, quizScore를 이용해 합격여부(60%)와 맞춘 문제수, 점수를 나타내줍니다. { // 문제정보 const quizInfo = [...]; const quiz.. 2022. 8. 25. Search Effect 03 Search Effect03 이번 시간에는 오늘 배운 charAt()을 활용하여 만든 검색 프로그램에 대해 알아보겠습니다. 알파벳은 클릭하면 그와 관련된 속성과 함께 설명이 나옵니다. 원본 사이트 보기 원본 소스 보기 01. HTML data-name과 data-type을 삭제해주었고 keyword를 만들어서 아래에 span으로 알파벳을 주었습니다. 코드 보기 { charAt()를 이용하여 검색하기 CSS 속성 검색하기 a b c d e f g h i j k l m n o p q r s t u v w x y z 전체 속성 갯수 : 0 accent-color : accent-color 속성은 다른 페이지 이동을 설정합니다. align-content : align-content 속성은 콘텐츠 아이템의 상하관.. 2022. 8. 23. 문제 05 퀴즈 이번 유형은 객관식(여러문제)이며 점수 확인이 가능합니다. 문제 05 count를 이용하여 문제를 세줍니다. 36문제 이상 "통과" / 미만 "불합격" 입니다. 원본 사이트 보기 원본 소스 보기 HTML 코드 { } Javascript 코드 push를 이용해서 forEach안에 HTML요소를 넣어줍니다. 이렇게 하면 한번만 적어도 됩니다. if와 count를 이용해서 36개 이상 맞은 사람만 합격처리 시켜줍니다. { // 문제정보 const quizInfo = [...]; let count = 0; const quizWrap = document.querySelector(".quiz__wrap"); const updateQuiz = () => { const exam = []; quizInfo.forE.. 2022. 8. 18. Search Effect 02 Search Effect02 이번 시간에는 오늘 배운 includes()를 활용하여 만든 검색 프로그램에 대해 알아보겠습니다. 키워드를 입력하면 그와 관련된 태그들과 함께 설명이 나옵니다. 앞서 살펴본 indexOf방식 보다 간단합니다. 원본 사이트 보기 원본 소스 보기 01. HTML search__list에 있는 li에 data-name과 data-type을 주어 검색으로 찾을 수 있게 해줍니다. 속성의 수가 좀 많아졌습니다. 코드 보기 { includes()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요! 전체 속성 갯수 : 0 accent-color : accent-color 속성은 다른 페이지 이동을 설정합니다. align-.. 2022. 8. 17. Search Effect 01 Search Effect01 이번 시간에는 오늘 배운 indexOf()를 활용하여 만든 검색 프로그램에 대해 알아보겠습니다. 키워드를 입력하면 그와 관련된 태그들과 함께 설명이 나옵니다. 원본 사이트 보기 원본 소스 보기 01. HTML search__list에 있는 li에 data-name을 주어 검색으로 찾을 수 있게 해줍니다. 코드 보기 { indexOf()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 a : a 태그는 다른 페이지 이동을 설정합니다. abbr : abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. acronym : acronym 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. address : address 태그는 웹 페이지의 연락처 정보를 설정합니다 apple.. 2022. 8. 17. 이전 1 2 다음
