본문 바로가기

웹 개발 공부 컨텐츠134

이미지 유형 02 사이트 만들기 이번 사이트는 이미지 안에 텍스트를 넣는 유형입니다. 이미지 유형 01에 대해선 이 곳에서 보실 수 있습니다. 이미지 유형 사이트 만들기 02 3개의 이미지 안에 텍스트와 링크를 넣는 유형입니다. 이번 유형은 이미지와 텍스트에 몇가지 효과가 추가되었습니다. 이미지 유형 02 코드 //CSS 파트 //HTML 파트 간편한 한끼 식사 패스트푸드 많은 사람들이 즐겨먹는 패스트푸드입니다. 스테이크 햄버거 자세히 보기 하와이안 피자 자세히 보기 저염 감자튀김 자세히 보기 레이아웃을 만드는건 이미지 유형 01이랑 똑같이 박스 3개를 잡고 해당 박스에 이미지와 텍스트를 추가하면 됩니다. ▶ 블러 효과 CSS에서 박스의 블러 효과를 줘서 이미지에 뒤가 약간 비치는 블러 효과의 공간을 만들 수 있습니다. .. 2022. 8. 18.
이미지 유형 01 사이트 만들기 이번 사이트는 이미지 안에 텍스트를 넣는 유형입니다. 이미지 유형 사이트 만들기 01 2개의 이미지 안에 텍스트와 링크를 넣는 유형입니다. 이미지 유형01 코드 //CSS 파트 //HTML 파트 365일 언제나 맛있는 과일 쥬스 남녀노소 누구에게나 인기있는 생과일 쥬스를 소개합니다! 상큼한 오렌지 쥬스 톡 쏘는 맛과 시원하고 달달한 오랜지 쥬스입니다. 비타민C의 함유량도 엄청나요. 자세히보기 달콤한 딸기 쥬스 달달하고 맛있는 딸기쥬스입니다. 한모금 마시면 잊을수가 없는 맛이죠. 자세히보기 카드 유형과 똑같이 2개의 박스를 만들고 해당 위치에 이미지와 텍스트를 넣어줍니다. 이미지를 넣을때 HTML에 를 활용해 이미지를 삽입하는 방식과 CSS에 background-img를 사용해서 이미지를 삽.. 2022. 8. 18.
includes( ) 문자열 메소드 - includes( ) 문자열 포함 여부를 검색하여, 불린(true/false)으로 반환합니다. ▶ includes( ) "문자열".includes("문자열") "문자열".includes("문자열", 위치값) includes( ) 메소드는 문자열 데이터에 해당 문자가 포함되어 있으면 true를 반환하고, 포함되어 있지 않으면 false를 반환합니다. 위치값은 문자열의 첫 부분이 0으로 시작하며 우측으로 갈수록 1씩 증가합니다. 위치값을 적을 시 위치값에 해당하는 위치부터 우측으로 문자 포함 여부를 판단합니다. { const str1 = "javascript reference" const currentStr1 = str1.includes("javascript"); //true (문자열 포함.. 2022. 8. 18.
padStart( )/padEnd( ) 문자열 메소드 - padStart( )/padEnd( ) 문자를 결합하거나 복사하여, 새로운 문자열을 반환하는 메소드입니다. 매소드 설명 문법 padStart( ) 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) padEnd( ) 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padEnd(길이) "문자열".padEnd(길이, 문자열) 1. 문자열 메소드 : padStart( ) "문자열".padStart(길이) "문자열".padStart(길이, 문자열) padStart( ) 메소드의 길이 만큼 문자열의 문자를 반환합니다. 길이가 문자열 수보다 적다면 모든 문자열을 반환하며,.. 2022. 8. 18.
concat( )/repeat( ) 문자열 메소드 - includes( ) 문자열 포함 여부를 검색하여, 불린(true/false)으로 반환합니다. ▶ includes( ) "문자열".includes("문자열") "문자열".includes("문자열", 위치값) includes( ) 메소드는 문자열 데이터에 해당 문자가 포함되어 있으면 true를 반환하고, 포함되어 있지 않으면 false를 반환합니다. 위치값은 문자열의 첫 부분이 0으로 시작하며 우측으로 갈수록 1씩 증가합니다. 위치값을 적을 시 위치값에 해당하는 위치부터 우측으로 문자 포함 여부를 판단합니다. { const str1 = "javascript reference" const currentStr1 = str1.includes("javascript"); //true (문자열 포함.. 2022. 8. 18.
split( )/replace( )/replaceAll( ) 문자열 메소드 - split( )/replace( )/replaceAll( ) 문자열에서 원하는 값을 추출하거나 구분해서 배열로 반환하는 메소드입니다. 매소드 설명 문법 split( ) 문자열에서 원하는 값을 추출하여 배열로 반환합니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); replace( ) 문자열을 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, "변경할 문자열") replaceAll( ) 문자열을 모든 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", "변경할 문자열").. 2022. 8. 18.
서치 이펙트 01 서치 이펙트 자바스크립트를 이용해서 HTML과 CSS, JAVASCRIPT의 요소를 검색하는 효과 만들기입니다. 서치 이펙트 01 indexOf( ) 메소드를 이용해서 HTML 태그를 검색하는 효과입니다. 서치 효과는 문자열에서 특정 문자의 위치를 찾고 숫자를 반환해주는 indexOf( ) 메소드를 사용해 사용자의 검색 키워드와 일치하는 문자를 간추려서 보여주도록 합니다. indexOf( ) 메소드에 대한 자세한 설명은 이 곳에서 보실 수 있습니다. 1. 검색 목록 만들기 //CSS //JAVASCRIPT 마지막으로 검색 데이터 키워드와 검색 목록의 값을 비교해서 선택적으로 출력해주는 작업입니다. if문을 사용해서 키워드가 일치하지 않으면 hide class를 추가해 숨기고 일치한 것은 hide clas.. 2022. 8. 16.
정규표현식 정규표현식 정규표현식(regular expression, regexp)은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이며, 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. ▶ 정규표현식 표현방법 정규표현식에서 사용하는 기호를 Meta문자라고 표현합니다. Meta문자는 표현식 내부에서 특정한 의미를 갖는 문자를 말하며, 주요 패턴은 아래의 표와 같습니다. ※ 정규표현식 객체 주요 패턴 패턴 설명 abc abc 문자열을 검색합니다 /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는 'ad', 'bd', 'cd' [^abc] a, b, c를 제외한 문자 하나를 검색합니다. /[^abc]d/는 'ed', 'fd', 'gd' [A-Z] 알파벳 .. 2022. 8. 16.
indexOf( ) 문자열 메소드 - indexOf( )/lastIndexOf( ) 문자열에서 특정 문자의 위치를 찾고 숫자를 반환하는 메소드입니다. 1. indexOf( ) "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) 문자열 데이터 안에 indexOf( ) 안의 문자의 위치를 숫자로 나타냅니다. 문자열의 첫번째 자리는 0부터 시작하며 우측으로 갈수록 숫자가 1씩 증가합니다. 해당 문자를 찾게 되면 문자의 위치를 숫자로 반환해주며, 값이 없을시 "-1"을 반환합니다. 또한 검색값 뒤에 위치값을 지정할 수 있습니다. 위치값 지정 시 해당 위치부터 문자의 위치를 찾습니다. { const str1 = "javascript reference" const currentStr1 = str1.indexO.. 2022. 8. 16.
slice( )/substring( )/substr( ) 문자열 메서드 - slice( )/substring( )/substr( ) 문자열에서 원하는 값을 추출하는 메서드입니다. 매서드 설명 차이점 slice( ) 문자열에서 원하는 값을 추출하여 문자열을 반환합니다 ▶ "문자열".slice(시작위치) or "문자열"slice(시작위치, 끝나는위치) ▶ 시작위치의 값은 끝나는 위치의 값보다 작아야 합니다. substring( ) ▶ "문자열"substring(시작위치, 끝나는위치) ▶ 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지) substr( ) ▶ "문자열".substr(시작위치) or "문자열".substr(시작위치, 길이) 1. 문자열 메서드 : slice( ) 문자열을 추출하는 메서드는 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자.. 2022. 8. 16.
웹디자인기능사 기출 2009년 05회 웹디자인기능사 필기 2009.09.27 2009년 05회 기출문제입니다. 2022. 8. 15.
미디어 쿼리 미디어쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 기법으로 반응형 프로젝트에서 반드시 필요합니다. 뷰포트 해상도가 달라질 때 레이아웃이 깨질 수 있습니다. 이를 방지하기 위해 해상도마다 레이아웃을 다르게 지정해 주도록 해주는 것이 미디어쿼리입니다. 1. 2022. 8. 15.

광고 준비중입니다.