웹 개발

Search Effect05 - filter()

Front_end — Wed, 9 Feb 2022 18:26:30 +0900


const cssProperty = [
{view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
{view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
{view: "13", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
{view: "40", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
{view: "20", name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
{view: "41", name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
{view: "42", name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
{view: "14", name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
{view: "15", name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부를 설정합니다."},
{view: "16", name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
{view: "34", name: "empty-cells", desc: "empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다."},
{view: "43", name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다."},
{view: "26", name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."},
{view: "29", name: "grid-template-columns", desc: "grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다."},
{view: "34", name: "hanging-punctuation", desc: "hanging-punctuation 속성은 글씨의 시작 및 끝의 위치를 설정합니다."},
{view: "17", name: "isolation", desc: "isolation 속성은 stacking context을 설정합니다."},
];

const searchBox = document.querySelectorAll(".search span");     //알파벳 버튼들
const cssList = document.querySelector(".list ul");    //속성 리스트
const cssCount = document.querySelector(".count em");
let listHTML = "";

//목록 보여주기
function upDataList(list){
	let listHTML = "";
	for(const data of list){ //cssProperty안에 있는 갯수만큼 data보여줌
		listHTML += `${data.name} : ${data.desc} : ${data.view}`;   //listHTML에 cssProperty 갯수 만큼 반복적으로 li를 추가
	}
	cssList.innerHTML = listHTML;   //cssList에 listHTML를 보여줌
}
upDataList(cssProperty) //함수 실행

//버튼 클릭하기
searchBox.forEach(span => {
	span.addEventListener("click", () => {  //searchBox를 클릭할 때
		const target = span.dataset.view;   //target에 span.dataset.view값 저장
		const filterList = cssProperty.filter(data => data.view >= target)  //filterList에 cssProperty에있는 data.view이 target보다 크거나 같은 값
		upDataList(filterList); //매개변수 함수 전달
	})
})

filter() 참고

Search Effect04 - find()

Front_end — Tue, 8 Feb 2022 14:04:11 +0900


const cssProperty = [
	{name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
	{name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
	{name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
	{name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
	{name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
	{name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
	{name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
	{name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
	{name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부를 설정합니다."},
	{name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
	{name: "empty-cells", desc: "empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다."},
	{name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다."},
	{name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."},
	{name: "grid-template-columns", desc: "grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다."},
	{name: "hanging-punctuation", desc: "hanging-punctuation 속성은 글씨의 시작 및 끝의 위치를 설정합니다."},
	{name: "isolation", desc: "isolation 속성은 stacking context을 설정합니다."},
];
	
const searchBox = document.querySelector("#search-box");	// 검색박스
const cssCount = document.querySelector(".count");			// 목록 갯수
const cssDesc = document.querySelector(".desc");			// 속성 설명 표시 박스
const cssList = document.querySelector(".list");			// 속성 리스트

//CSS 속성 값 출력하기/전체 갯수 출력하기
cssProperty.map((element, index) => {
	cssCount.innerText = "전체 목록 갯수 : "+ (index+1) +"개";
	cssList.innerHTML += "<span>"+ element.name +"</span>";
});

//사용자가 검색한 값
searchBox.addEventListener("keyup", () => {		// 검색창에 입력하면
	const searchWord = searchBox.value;			//입력한 값을 searchWord에 저장
	//console.log(searchWord)
	findProp(searchWord);
});

document.querySelectorAll(".list span").forEach(span => {		//속성값을 선택
	span.addEventListener("click", () => {		
	//클릭한 데이터 값을 가져오기
	const listProp = span.innerText;		//속성값에 (Text)를 listProp에 저장
	findProp(listProp);		//findProp에 매개변수로 보내짐
	})
})

function findProp(searchWord){
	const targetData = cssProperty.find((data) => data.name === searchWord)
            
	//찾는 데이터가 없을 때
	if(targetData == null) {
		cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!";
		return;
	}
	cssDesc.innerHTML = targetData.desc;
}

find() 참고

Search Effect03 - charAt()

Front_end — Tue, 8 Feb 2022 13:12:57 +0900


const searchBox = document.querySelectorAll(".search span");     //알파벳 버튼들
const cssList = document.querySelectorAll(".list ul li");    //속성 리스트
const cssCount = document.querySelector(".count em");        //속성 갯수

//모든 데이터 보이기
cssList.forEach((li, index) => {
	li.classList.add("show");
	cssCount.innerText = index;
})

        //전체 속성 갯수 보이기
        // cssList.forEach((element, index) => {
        //     element.classList.add("show");
        //     console.log(index)
        //     cssCount.innerHTML = index + 1;
        // });

//알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다.
//searchBox.addEventListener is not a function
searchBox.forEach(el => {
	el.addEventListener("click", () => {
		const searchWord = el.innerText;            //알파벳의 첫글자
		// console.log(searchWord)

		cssList.forEach(el => {
			const cssName = el.dataset.name;        //속성의 리스트에 data-name의 값
			const cssType = el.dataset.type;        //속성의 리스트에 data-type의 값
			// console.log(cssName)

			//알파벳 첫글자(a) == CSS 속성의 첫글자(a)
			if(searchWord.charAt(0) === cssName.charAt(0) || searchWord.charAt(0) === cssType.charAt(0)){
				el.classList.add("show");
			} else {
				el.classList.remove("show");
			}
		})
	})
})

charAt() 참고

CSS선택자 - [게임] CSS Speedrun

Front_end — Mon, 7 Feb 2022 19:02:30 +0900

https://css-speedrun.netlify.app/

Search Effect02 - includes()

Front_end — Mon, 7 Feb 2022 18:04:55 +0900


const searchBox = document.querySelector("#search-box")		// searchBox 변수에 저장
const cssList = document.querySelectorAll(".list ul li")		// 다수의 li를 cssList에 저장
const cssCount = document.querySelector(".count em")		// em을 cssCount에 저장

cssList.forEach((element, index) => {					// cssList의 각각 element, index에 적용
	element.classList.add("show");					// cssList의 element에 각각 클래스 show 추가
	console.log(index)								// cssCount에 index값 + 1 해주고 em출력
	cssCount.innerHTML = index + 1;
  });

searchBox.addEventListener("keyup", () => {				//searchBox에 keyup했을 때 이벤트 설정
	const searchWord = searchBox.value; 		//사용자가 입력한 값을 searchWord에 저장

	//console.log(searchWord)

	cssList.forEach(el => {				//cssList의 각각의 요소값에 적용
		const cssName = el.dataset.name; 		//el의 data-name을 cssName에 저장
        //console.log(cssName);

		if(cssName.includes(searchWord)){
        	el.classList.add("show");
        } else {							
        	el.classList.remove("show");	//아니면 클래스show를 삭제
        }
    })
})

includes() 참고

searchEffect01 - indexOf()

Front_end — Mon, 7 Feb 2022 16:26:03 +0900


const searchBox = document.querySelector("#search-box");	//search-box 변수에 저장
const cssList = document.querySelectorAll(".list ul li");	//다수의 li를 변수에 저장

        
searchBox.addEventListener("keyup", () => {		//input을 클릭했을 때 이벤트 설정
     const searchWord = searchBox.value; 			//사용자가 입력한 데이터 저장소 변수에 저장

     // console.log(searchWord)
     cssList.forEach(el =>{						//다수의 li한테 적용
     console.log(el.dataset.name)

     const cssName = el.dataset.name; 				//CSS 속성 값을 변수에 저장

     if(cssName.indexOf(searchWord)){				//사용자가 입력한 값에 데이터가 있는지 확인
            el.classList.add("hide");				//데이터가 있으면 클래스 add를 추가
        } else {
            el.classList.remove("hide");			//데이터가 있으면 클래스 add를 삭제
        }
 	})
})

indexOf참고

함수

Front_end — Thu, 3 Feb 2022 14:11:46 +0900

함수

우리는 앞에서 데이터를 저장할 때 변수를 선언하여 저장했습니다. 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다.

선언적 함수

함수를 사용하여 코드를 저장한 것을 '함수 정의문'이라고 합니다. 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다.

함수 정의문은 다음과 같이 선언합니다.

기본형

function 함수명(){
자바스크립트 코드;
}

다음 예제는 함수 정의문과 익명 함수를 변수에 참조한 예입니다. 이렇게 두 가지 방식으로 함수를 선언한 다음 각각 호출하여 코드를 실행합니다.

<script>
    var count = 0;

    myFnc();

    function myFnc() {
        count++;
        document.write("hello" + count, "<br>");
    }

    myFnc();

    var theFnc = function() {
        count++;
        document.write("bye" + count, "<br>");
    }

    theFnc();
    </script>

익명 함수

자바스크립트의 익명 함수는 변수에 함수의 코드를 저장하는 대신 함수명을 사용하지 않습니다. 대신 변수명을 마치 함수명처럼 사용해서 함수를 호출하거나 변수값을 이동시키는데 사용할 수 있습니다.

아래 예제는 hello라는 변수명에 "Hello World!"라는 문자가 출력되는 함수 코드를 저장했습니다. hello()로 익명 함수를 호출하면, 소스코드가 실행됩니다.

<script>
    //익명 함수 선언 및 변수에 대입
    var hello = function()
    {
        document.write("Hello World!");
    };

    //익명 함수 변수명으로 호출
    hello();
</script>     //결과 Hello World!

매개변수 함수

기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 코드를 실행했습니다. 즉, 함수를 호출할 때 값을 전달할 수 없었습니다. 하지만 매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됩니다.

다음은 함수를 호출할 때 값을 전달하는 기본형입니다. 함수를 호출할 때 (a)데이터 1은 (1) 매개변수 1에 저장되고 (b) 데이터 2는 (2) 매개변수 2에 저장됩니다. 그리고 (c) 데이터는 (3) 매개변수 n에 저장됩니다.

기본형

function 함수명(매개변수 1, 매개변수 2,...매개변수 n){   //매개변수 1(1), 매개변수 2(2), 매개변수 n(3)
    자바스크립트 코드;
}
함수명(데이터 1, 데이터 2,...데이터 n);     //데이터 1(a), 데이터 2(b), 데이터 n (c)

다음은 함수를 호출했을 때 이름과 사는 지역의 데이터를 함수 정의문의 매개변수 name과area에 각각 전달하여 함수 안에 있는 실행문의 매개변수에 저장된 데이터를 불러와 출력하는 예제입니다.

<script>
    function myFnc(name, area){
        document.write("안녕하세요." + name + "입니다.", "<br>");
        document.write("사는곳은" + area + "입니다.", "<br>");
    }

    myFnc("홍당무", "서울");    //안녕하세요 홍당무입니다.
                                        //사는 곳은 서울입니다.
    myFnc("깍두기", "부산");    //안녕하세요 깍두기입니다.
                                        //사는 곳은 부산입니다.
</script>

리턴값 함수

return 문은 함수에서 결괏값을 반환할 때 사용합니다. 그리고 함수에서 return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제로 종료됩니다. 다시 말해 함수 정의문에 retrun 문이 사용되면 함수를 호출했을 때 결괏값(data)을 반환합니다.

다음은 return 문의 기본형입니다.

function 함수명(){
    
    자바스크립트 코드1;         //자바스크립트 코드1; - 2
    return 데이터(값);          //return 데이터(값); - 3

    자바스크립트 코드2;
}

var 변수 = 함수명();           //함수명(); - 1

//1 함수 호출문 → 2 함수 코드 실행 → 3 자바스크립트 코드2를 무시하고 데이터를 반환 → 1 함수 호출문 = 1에서 2로 2에서 3으로 3에서 1로 반복 되는 구조

다음의 기본 예제는 함수 호출과 함께 인자값 10, 20을 전달합니다. calc() 함수는 num1(10)과 num2(20)의 데이터를 더한 값인 30을 반환합니다. 반환된 값은 변수 result에 저장되어 화면에 출력 됩니다.

function sum(num1, num2) {
    return num1 + num2;     //return num1 + num2; - 2+3
}

var result = sum(10,20);    //result = sum(10, 20); - 1
document.write(result);

//1 함수 호출문 → 2 함수 코드 실행 → 3 30 반환 → 1 함수 호출문 = 1에서 2로 2에서 3으로 3에서 1로 반복 되는 구조

다음은 함수 정의문 내에 작성한 코드를 실행한 후 계산된 결괏값을 return 문으로 함수 호출문에 반환하는 예제입니다.

<script>
    function testAvg(arrData) {             //국어 - arrData[0], 영어 - arrData[1]  //arrData.length:2 //이 국어와 영어가 (arrData)에 들어감
        var sum = 0;
        for (var i = 0;i < arrData.length; i++) {
            sum + = Number(prompt(arrData[i] + "점수는?", "0"));        //배열에 저장된 데이터 개수(2)만큼 반복문을 실행합니다.
        }

        var avg = sum / arrData.length;         //평균 점수를 구해 반환합니다(바로 밑 라인까지 묶어서).
        return avg;
    }

    var arrSubject = ["국어", "수학"];
    var result = testAvg(arrSubject);

    document.write("평균 점수는" + result + "점입니다");
</script>

id와 class의 차이

Front_end — Thu, 3 Feb 2022 14:07:47 +0900

id/class 차이점

id 선택자와 class 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것입니다. 예를 들어 id와 class를 사용하면 모든 <p>요소가 아닌 특정한 <p>요소에만 스타일을 적용할 수 있습니다.

id 선택자와 class 선택자의 차이는 문서 안의 '복수'의 요소에 스타일을 적용하는 것인가 아니면 '유일'한 요소에 스타일을 적용하는 것인가입니다. 결론적으로 말하면 id는 '유일'한 요소에 적용, class는 '복수'의 요소에 적용할 수 있습니다.

id: '유일'한 요소에 스타일을 적용
- 선택자에 (#)과 (id)명을 붙여 식별

class: '복수'의 요소에 스타일을 적용
- 요소에 (.)과 (class)를 붙여 구별

웹 사이트 이미지 표현 방법

Front_end — Thu, 3 Feb 2022 14:05:29 +0900

웹 사이트 이미지 표현 방법

웹 사이트에서 이미지를 표현하는 방법은 세 가지가 있습니다. 세가지 방법을 아래에 기술해 보았습니다.

첫번째 - HTML 태그를 통해서 표현

img 태그를 사용하여 표현합니다. img 태그를 사용할 때는 웹표준을 준수하기 위해 의미가 있는 이미지를 사용합니다. 거의 의미가 없는 이미지는 CSS를 이용하여 표현해줍니다. 웹표준을 준수하기 위해서는 img태그의 alt 속성을 이용하여 어떤 이미지 인지 설명 해주어야 합니다.

<img src="이미지 주소 기입" alt="대체 문자 기입">

두번째 - CSS 속성을 통해서 표현

CSS에서 이미지를 표현하기 위해서는 background 속성을 이용해서 이미지를 넣어줍니다. background-image를 이용하여 url( )에 이미지의 주소를 넣어줍니다. 주로 의미가 없는 이미지(배경, 색 표현)를 표현할 때 사용합니다, 하지만 HTML의 img태그의 alt 속성처럼 설명을 해주는 기능이 없기 때문에 좋은 방법은 아닙니다.

background: url(이미지 주소) center top repeat-x;
background: url(이미지 주소) no-repeat 9px(가로) 8px(세로);

세번째 - 이미지 스프라이트 기법

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.

웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.

이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다.

가상으로 대체 문자를 만들어 주기 위해서는 IR 기법을 사용합니다.

먼저 이미지의 크기를 지정 해주고 Background 태그를 사용해서 이미지를 넣습니다.

그 후에 Background-position을 사용해서 이미지 위치를 지정하여 원하는 이미지를 로딩 합니다.

width: 23px; height: 23px; background: url(../img/icon.png) no-repeat;
background-position: -150px -120px;

반복문

Front_end — Thu, 3 Feb 2022 14:01:21 +0900

반복문

반복문을 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있습니다.

while문

while 문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있습니다.

let num = 1;

    while(num <= 5){
        document.write( num + ". 실행되었습니다.");
        num++;
}       //1. 실행되었습니다 2. 실행되었습니다 3. 실행되었습니다 4. 실행되었습니다 5. 실행되었습니다

for문

for 문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행합니다. while 문보다 사용하기 편해 사용 빈도가 높은 편입니다.

for(let i=1; i<=5; i++){
    document.write(i + ". 실행되었습니다.");
}       //1. 실행되었습니다 2. 실행되었습니다 3. 실행되었습니다 4. 실행되었습니다 5. 실행되었습니다

break문

반복문인 while 문 또는 for 문에서 break 문을 실행하면 조건식과 상관없이 강제로 반복문을 종료합니다. 간단히 말하면, break 문은 반복문을 강제로 종료할 때 사용합니다.

for (let index = 0; index < 5; index++) {
    if(index == 3) break;
    console.log(index);
}       //결과 0 1 2

continue문

continue문은 반복문에서만 사용할 수 있습니다. while 문에 사용할 경우 while 문 안에 있는 continue 문은 다음에 오는 코드를 무시하고 조건식에서 조건 검사를 실행시킵니다.

for (let index = 0; index < 5; index++) {
    if(index == 3) continue;
    console.log(index);
}       //결과 0 1 2 4