qqqwe

See the Pen Tail Animation by Kimdohyun2002 (@Kimdohyun2002) on CodePen. 코드팬이라는 사이트에서 CSS로 애니메이션을 한번 만들어 보았습니다 !

See the Pen 연산자 by Kimdohyun2002 (@Kimdohyun2002) on CodePen.

이미지 출처 시멘틱 마크업 시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있습니다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 됩니다. 실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요합니다. 사용 방법 헤더/푸터에 와 사용한다. 메인 컨텐츠에 과 사용한다. 독립적인 컨텐츠에 사용한다. 최상위 제목으로 사용한다. 순서가 없는 목록으로 과 사용한다. 내비게이션에 사용한다. 이런 식으로 태그가 가지고 있는 의미에 맞게 사용 한다. 필요성 SEO(검색엔진 최적화) 적절한 태그의 사용으로 키워드에 맞는 웹사이트를 구성하여, 검색 결과 상위에 나올 수 있도록 한다. 웹 접근성 (Web ..

블록 레벨 요소(Block-level Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. 주요 블록 요소 ~ 특징 모든 인라인 요소를 포함할 수 있고 또다른 블록 요소도 일부 포함이 가능하다. 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다. width, height, margin, padding등을 사용하여 형태를 변형시켜 레이아웃을 수정할 수 있다. 블록 요소 다음으로는 줄바꿈이 이루어진다. 인라인 요소(Inline-Elements) 인라인 요소는 마크업을 할 때 가로로 정렬됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다. 주요 인라인 요소 특징 인라인 요소는 항상 블록 요소안에 포함되어 있다. 인라인 ..

패럴랙스 이팩트 08/09 저희 포트폴리오에 큰 도움이 될 핵심 작업인 마지막 패럴랙스 이팩트입니다. 가로 효과 HTML Javascript Parallax Effect09 패럴랙스 이펙트 : 가로/세로 효과 1 2 3 4 5 6 7 8 9 10 01 02 03 04-1 04-2 04-3 05 06 07 08 09 scrollTop : 0px JAVASCRIPT 코드 설명 const section4 = document.querySelector("#section4").offsetTop; #section4 요소의 페이지 위쪽으로부터의 위치(offsetTop)를 section4 변수에 할당합니다. function scroll() { ... } scroll이라는 함수를 정의합니다. 이 함수는 스크롤 이벤트가 발..

패럴랙스 이팩트 05/06 HTML Javascript Parallax Effect04 패럴랙스 이펙트 : 나타나기 1 2 3 4 5 5 5 01 section1 늦었다고 생각할때가 정말 너무 늦었다. 그러니 지금 당장 시작해라. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 피할수 없으면 즐겨라 04 section4 단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가? 05 section5 한번의 실패와 영원한 실패를 혼동하지 마라 06 section6 평생 살 것처럼 꿈을 꾸어라.그리고 내일 죽을 것처럼 오늘을 살아라. 07 section7 1퍼센트의 가능성, 그것이 나의 길이다. 08 section8 마음만을..

포트폴리오 애니메이션 포트폴리오 제작을 위해 만들어본 첫번째 애니메이션 효과입니다. gsap를 이용하여 좀 더 쉽게 효과를 만들었습니다. HTML Dohyun's PORTFOLIO work about let's introduce frontend developer's all works of portfolio blog.link 스크립트 코드 설명 먼저, 이 코드는 https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js 경로에서 GSAP 라이브러리를 가져와서 사용합니다. 이 코드에서는 querySelectorAll() 메서드를 사용하여 .split 클래스를 가진 모든 요소에 대해 반복적으로 작업을 수행합니다. 이 작업은 텍스트를 각 글자별로 분리하여 스..

const musicWrap = document.querySelector(".music__wrap"); const musicName = musicWrap.querySelector(".music__control .title h3"); const musicArtist = musicWrap.querySelector(".music__control .title p"); const musicView = musicWrap.querySelector(".music__view .image img"); const musicAudio = musicWrap.querySelector("#main-audio"); const musicPlay = musicWrap.querySelector("#control-play"); const ..

레이아웃 버튼 효과 HTML & CSS 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 JAVASCRIPT & jquery 코드 설명 먼저, querySelectorAll() 메소드를 사용하여 HTML 문서 내에서 .nav > ul > li 셀렉터에 해당하는 요소들을 선택합니다. 이 요소들은 navigation 메뉴의 각 메뉴 아이템을 나타냅니다. 그리고 forEach() 메소드를 사용하여 선택된 요소들을 반복하며, 각각의 요소에서 querySelector() 메소드를 사용하여 .submenu 셀렉..

슬라이드 레이아웃 만들기 HTML / CSS JAVASCRIPT 1번 유형 2번 유형 3번 유형

자바스크립트 오답노트 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 문제 풀이 위의 코드는 반복문을 사용하여 i가 1부터 10까지 증가하는 동안, i의 값이 4로 나누어떨어지면 sum에서 i를 뺀 결과를, i를 4로 나눈 나머지가 1이면 sum에 i를 더한 결과를, i를 4로 나눈 나머지가 2이면 sum에 i를 곱한 결과를 구하는 코드입니다. 정답 -4 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let..

게임 이펙트 노래 재생하기 HTML responsive gif background KIM GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 LOVE MUSIC 10000hour Dan + Shay, Justin Bieber 0:00 3:55 CSS .music__inner { width: 350px; background: rgba(0,0,0,0.5); backdrop-filter: blur(20px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px 22px; border-radius: 20px; box-shadow: 0 60px 100p..

게시판 만들기 두번째 게시판 웹디자이너, 웹 퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요! * 총 1111건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수

php로 게시판 만들기 선생님을 따라하며 직접 만든 사이트입니다. board.php 게시판 웹디자이너, 웹 퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요! * 총 1111건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수 처음으로 이전 1 2 3 4 5 6 7 다음 마지막으로 코드 설명 메인 게시판 영역입니다 본문 맨위에 삽입되어있는 사이트의 코드입니다. 이 코드의 php 코드에 대한 설명입니다. SQL 쿼리문을 작성합니다. 이 쿼리문은 board 테이블과 members 테이블을 JOIN하여 게시판 글의 정보와 작성자 정보를 가져옵니다. 가져온 정보는 boardID 기준으로 내림차순으로 정렬하며 최대 1..

게임 이펙트 폴더를 클릭하면 폴더 색깔별로 헤더의 색깔이 바뀌고 현재 시각이 우측 상단에 나오는 게임 이펙트 메인 화면입니다. HTML WEBS GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재 맥을 사용하고 있으면, 확인 크기는 1920 X 760 입니다. GSAP window.onload = function(){ window.addEventListener("mousemove", e => { gsap.to(".cursor", { duration: 0, left: e.pageX - 5, top: e.pageY -10 }) }); printTime(); // 오른쪽 상단 시간 printAgent(); // 하단 중앙 } 코드 설명 이 코드는 G..

자바스크립트 문자열 객체 at() at() 메소드는 인덱스값을 받아, 문자열에서 해당되는 인덱스의 요소를 반환합니다. { console.log("javascript reference".at("0")); //j console.log("javascript reference".at("1")); //a console.log("javascript reference".at("2")); //v console.log("javascript reference".at("11")); //r console.log("javascript reference".at("12")); //e console.log("javascript reference".at("20")); //undefined console.log("javascript r..

패럴렉스 효과 HTML Javascript Parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 5 5 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 늦었다고 생각할때가 정말 너무 늦었다. 그러니 지금 당장 시작해라. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 피할수 없으면 즐겨라 04 section4 단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가? 05 section5 한번의 실패와 영원한 실패를 혼동하지 마라 06 section6 평생 살 것처럼 꿈을 꾸어라.그리고 내일 죽을 것처럼 오늘을 살아라. 07 section7 1퍼센트의 가능성..

명언 사이트 HTML CSS CSS 설명 @import 구문을 사용하여 폰트를 가져와서 font-family 속성에서 사용하고 있습니다. 이 폰트는 외부에서 가져온 것으로 추측됩니다. .wrap 클래스는 배경 이미지의 크기를 전체화면으로 늘리는 역할을 하고 있습니다. .main 클래스는 내부의 요소들을 중앙에 위치시키기 위해 display, justify-content, align-items 속성을 사용하고 있습니다. 이 클래스는 또한 글씨체, 크기, 색상 등을 지정하는 역할도 합니다. .author 클래스는 padding-top 속성을 사용하여 .main 클래스와 일정한 간격을 두고 있는 것으로 보입니다. 이 코드는 해당 웹페이지에서 .wrap, .main, .author 클래스가 사용되며, font-..

슬라이드 이펙트 일곱번째 HTML Javascript Slider Effect03 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 8 prev next kshkmn0929@naver.com CSS JAVASCRIPT JAVASCRIPT 설명 images 배열: 이미지 경로가 저장된 배열입니다. imageSlider() 함수: 슬라이더를 만드는 함수입니다. 인자로는 슬라이더를 감싸는 부모 요소와 이미지 경로를 저장한 images 배열을 받습니다. slider 객체: 슬라이더를 구성하는 요소들을 저장한 객체입니다. parent는 슬라이더를 감싸는 부모 요소를, images는 이미지를 출력할 요소를, thumnails는 썸네일을 출력할 요소를, prevBtn과 nextBtn은 이전..

문자 관련 스타일 01. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Helvetica, sans-serif ; 02. font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. CSS에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다. ▶px 해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다. font-size: 12px; ▶% 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다..

flex flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 위의 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 예시 이미지 ▶ flex 지금은 float으로 세 개의 요소를 가로로 나열할 수 있습니다. flex로 구현한다면 다음과 같이 표현합니다. flex: 1; flex: 1;은 원래 flex: 1 1 0;의 줄인 표현입니다. 지금은 1 1 auto와도 같습니다. 또 1 1 100px와도 같죠. 앞이 1이면뒤가 뭐든 같은데, 이 세 값은 flex-grow, flex..

선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 이 예문은 h1 요소에 배경색을 노란색으로, 글자색을 빨간색으로 지정한다는 의미를 담고 있습니다. [] 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 다음과 같이 한 줄씩 따로 기술해도 무방합니다. type 선택자 HTML 문서의 태그 이름을 선택자로 사용할 수 있습니다. id 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 ..

float block 요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치할 수 있습니다. float은 레이아웃을 완성하기 위한 필수적인 속성이며 float을 지정하는 방법과 함께 float을 해제하는 방법도 알아두어야 나머지 레이아웃을 완성할 수 있습니다. float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. float한 박스에 가로 사이즈를 지정해 주어야 크로스 브라우징 됩니다. 그러나 heading 요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않습니다. float: left; 속성 값 속성 설명 left 요소를 왼쪽에 배치하고 나머지 콘..

이미지 출처 선택자 선택자란 CSS로 UI의 어느 부분을 디자인 할지, 즉 표현할 대상이 디는 부분을 말합니다. id 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다. CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문잘 시작합니다. class 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML 요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다. 즉, 여러 개의 요소에 같은 class명을 ..

CSS란? CSS는 Cascading Style Sheets의 약자로 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. HTML이 몸을 담당한다면 CSS는 몸을 꾸미는 옷, 화장과 같은 일을 담당 한다고 할 수 있습니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결하는 방법입니다. 스타일은 css확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 인라인 스타일 인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" " 형식으로 기술합니다. 인라인 스타..