본문 바로가기

웹 개발 공부 컨텐츠134

서치 이펙트 03 서치 이펙트 자바스크립트를 이용해서 CSS 속성 요소를 검색하는 효과 만들기입니다. 서치 이펙트 03 charAt( ) 메소드를 이용해서 CSS 속성 요소를 검색하는 효과입니다. 1. 검색 목록 만들기 //SCRIPT 파트 //선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트 const searchInfo = document.querySelector(".search__info .num"); //전체 갯수 //속성 갯수 구하기 searchInfo.textC.. 2022. 8. 23.
토끼 그리기 그림 만들기01 Abobe Illustrator를 이용해 그림을 그리는 방법입니다. ◎ 토끼 그림 그리기 ▶ 선 따라 그리기 이번에 그릴 그림의 스케치입니다. 우선 펜 툴(단축키 p)을 사용해 스케치된 그림의 선을 따라 그립니다. 먼저 선이 시작될 지점에 점을 찍고 선이 끝나는 지점에 점을 찍으면서 드래그를 하면 자연스러운 곡선은 나타낼 수 있습니다. 선을 따라 그린 곡선은 폭 툴(단축키 shift+w)로 선을 클릭 후 너비를 조절해 생동감 있는 라인을 형성할 수 있습니다. ▶ 색칠하기 색칠하기에 앞서 우선 object의 expand 기능으로 속성을 바꿔줘야 합니다. 바꾸기 전에 원본 이미지는 백업을 하는게 중요해요. 바꿨으면 그 다음 Live paintng -> Make으로 색칠 구역을 지정해야 합니다.. 2022. 8. 22.
charAt( ) 문자열 메소드 - charAt( ) 선택한 숫자의 위치값에 있는 문자를 반환하는 메서드입니다. 매소드 설명 문법 charAt( ) 선택한 숫자의 위치값에 있는 문자를 추출해 반환합니다. "문자열".charAt(숫자); charAt( ) 메소드는 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환하는 함수입니다. 메소드에 숫자를 적으면 숫자에 해당하는 문자를 찾습니다. 또한 정규표현식을 사용해 검색이 가늘합니다. { const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const curr.. 2022. 8. 22.
match( ) 문자열 메소드 - match( ) 문자열을 검색하고 배열값을 반환하는 메서드입니다. 매소드 설명 문법 match( ) 문자열(정규식)을 검색하고 배열값을 반환합니다. "문자열".match("검색값") "문자열".match("정규식 표현") match( ) 메소드는 문자열에서 찾고 싶은 문자가 포함되어 있는지 확인할 수 있습니다. 또한 단어 뿐만 아니라 정규표현식을 사용해서 검색이 가능합니다. { const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const currentStr3 = st.. 2022. 8. 22.
search( ) 문자열 메소드 - search( ) 문자열을 검색하고 위치값을 반환하는 메서드입니다. 매소드 설명 문법 search( ) 문자열(정규식)을 검색하고 위치값(숫자)을 반환합니다. "문자열".search("검색값") "문자열".search("정규식 표현") search( ) 메소드는 문자열에서 조건 문자열을 찾아서 몇번째 위치에 있는지 확인해주는 함수입니다. 첫번째로 매칭되는 문자의 위치를 반환하며, 못찾을 시 -1을 반환합니다. { const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.search("reference"); //11 (11번째 자리기 때문) co.. 2022. 8. 22.
함수 유형 함수 유형 이전 함수의 심화편입니다. 01. 함수 유형 : 함수와 매개변수를 이용한 형태 함수와 매개변수를 이용해 실행하는 함수 형태입니다. { function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2 + "되었습니다."); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); } 결과 확인하기 02. 함수 유형 : 함수와 변수를 이용한 형태 함수 외부에 변수를 사용해서 실행하는 함수 형태입니다. { function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2.. 2022. 8. 22.
이미지 유형 03 사이트 만들기 이번 사이트는 이미지 안에 텍스트를 넣는 유형입니다. 이미지 유형 03에 대해선 이 곳에서 보실 수 있습니다. 이미지 유형 03 코드 //CSS파트 //HTML파트 세계 7대 불가사의 2007년 7월 7일 새롭게 지정된 과거 인류의 놀라운 기적 세계 7대 불가사의를 소개합니다. 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 이번 이미지 정렬 방식은 grid .. 2022. 8. 22.
백그라운드 이미지/ir 효과 백그라운드 이미지 / ir 효과 배경에 이미지를 넣고 웹접근성을 준수하는 효과입니다. 1. 백그라운드 이미지 HTML에 이미지를 넣기 위해선 태그를 사용해야 합니다. 하지만 CSS를 이용해 배경에 이미지를 넣는 방법이 있습니다. 'background-image: url("")' 을 사용하면 배경에 이미지를 직접 넣을 수 있습니다. 하지만, 이미지에 링크를 걸거나 이미지의 설멸을 적어 웹표준을 준수할 수는 없습니다. 2. ir 효과 웹표준을 준수하기 위해선 이미지에 설명을 넣어야 하며 태그를 사용시 "alt"를 이용해 준수할 수 있습니다 하지만 백그라운드 이미지는 직접 넣을 수 없는데 이 때 대신 사용하는 것이 ir 효과 입니다. ▶ 의미있는 이미지의 대체 텍스트를 제공하는 경우 ir { display: .. 2022. 8. 22.
블록/인라인 구조 블록 구조/ 인라인 구조 블록 구조 블록 요소는 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 만들어지는 형태입니다. 블록 요소에는 일부를 제외한 블록 요소를 포함하고, 인라인 요소까지 포함 가능합니다. 인라인 구조 인라인 요소는 글자와 같이 옆으로 나열되는 형태로 줄 바꿈이 일어나지 않는 요소입니다. 인라인은 안의 글자와 같은 내용 길이에 맞게 크기를 차지하는 성질이 있으며, width, height, margin(top,bottom) 등 box관련 속성이 적용이 안됩니다. 인라인-블록 구조 옆으로 나열되는 성격을 가진 인라인 속성과 폭을 가지는 스타일이 모두 적용되는 블록 속성 두 가지 모두의 성질을 가진 구조입니다. ▶ 블록 구조를 갖는 태그 div, p, h1~h6.. 2022. 8. 22.
강아지 애니메이션 만들기 강아지 애니메이션 Fug와 SCSS를 활용해 만든 강아지 애니메이션입니다. See the Pen CSS Dog by mbynae (@mbynae) on CodePen. Fug는 HTML을 간편히 쓰기 위해 나온 언어로 ".*" 형태로 class를 표현할 수 있습니다. 들여쓰기를 통해 부모요소와 자식요소를 구분하게 되지만 코드가 길어지면 육안으로 구별하기 힘들어질 수 있는 단점이 있습니다. SCSS 역시 css를 좀 더 간편히 쓰기 위해 나온 언어입니다. "$"를 써서 변수 처럼 사용할 수 있으며, 하나의 구조에 여러개의 다른 선택자를 넣어 중첩해 사용할 수 있는 특징이 있습니다. ▶ 애니메이션 효과 .dog-tail { animation: dog-tail-segment $interval $easing i.. 2022. 8. 18.
SCSS SCSS(Super CSS) CSS의 단점을 보완한 CSS 전처리기 언어입니다. ※ CSS 전처리기 언어란? CSS의 단점을 보완하기 위해 문법을 바꾼 형태로 직접 동작시키지 않지만 코드를 작성시 CSS로 컴파일 해서 CSS가 웹으로 동작하도록 하는 언어입니다. 1. SCSS SCSS는 현재 가장 많이 쓰이고 있는 CSS 전처리기 언어로 초기에 나온 SASS를 버전 업한 언어입니다. ▶ SCSS 장점 1. CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있습니다. 2. 가독성과 재사용성을 높여주어 유지보수가 쉽습니다. 3. 변수를 사용해 CSS 속성값을 통일해 사용할 수 있습니다. 4. 선택자의 중첩 사용으로 편의성을 높여줍니다. 5. 조건문, 반복문을 사용해 동적으로 CSS 관리가 가능합니다.. 2022. 8. 18.
서치 이펙트 02 서치 이펙트 자바스크립트를 이용해서 CSS 속성 요소를 검색하는 효과 만들기입니다. 서치 이펙트 02 includes( ) 메소드를 이용해서 CSS 속성 요소를 검색하는 효과입니다. indexOf( ) 메소드를 사용해 만든 서치 이펙트 01과 똑같지만 이번엔 includes( ) 메소드를\ 이용한다는 차이점이 있습니다. \ includes( ) 메소드에 대한 자세한 설명은 이 곳에서 보실 수 있습니다. 1. 검색 목록 만들기 //SCRIPT 파트 //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li");.. 2022. 8. 18.

광고 준비중입니다.