CSS - li 태그 가로 정렬 하고 구분선 넣기 "게시판 | 방명록 "

ul과 li 태그에서 가로 정렬 이후 li 태그 사이에 구분선을 넣어보도록 하겠습니다. 구분선은 :before와 :after 선택자를 이용해서 content 속성을 이용해 보도록 하겠습니다. ul li를 만들어줍니다. superman batnman pororo style 속성을 적용합니다 ul { list-style: none; } li { float: left; margin-right: 10px; } li:first-child:before { content: " | "; width: 1px; height: 20px; background-color: #000000; margin-top: 7px; } li:after { content: " | " width: 1px; height: 20px; backgro..

• format_list_bulleted Develop/CSS
• · 2023. 3. 3.
• textsms

jQuery - 이벤트 data 파라미터 사용하기

jQuery를 이용해서 이벤트를 등록하면 이벤트 파라미터로 다양한 변수들이 넘어옵니다. ex) currentTarget, delegateTarget, data 등 그 중 data 변수에 대해서 알아보겠습니다. 자바스크립트 클릭 이벤트 const btn = document.getElementById('btn'); btn.addEventListener('click', (e) => { console.log('e', e); }); 위와 같이 자바스크립트를 이용해서 이벤트를 등록하면 data는 보이지 않습니다. 자바스크립트로는 PointerEvent라는 객체가 넘어오게 됩니다. jQuery 클릭 이벤트 jQuery를 이용해서 이벤트를 등록해야 data 값이 넘어옵니다. const $btn = $('#btn'); ..

• format_list_bulleted Develop/JavaScript
• · 2023. 3. 3.
• textsms

건배(乾杯) 한자 뜻 의미

술자리를 하면 건배를 합니다. 건배사, "건배", "짠" 등을 말하면서 건배를 하는데요 외국에서는 이 건배 뜻이 "건강을 위하여~", "파이팅" 이런 뜻이 있는데 한국에서 사용하는 건배는 무슨 뜻이 있는가 검색해보았습니다. 건강과 행운을 비는 뜻입니다. 한자로 건배는 乾 하늘건, 마를 건 杯 잔 배입니다. 하늘로 잔을 들어!!라는 뜻이 아닐까요? ㅋㅋㅋ 웃어른 들도 재밌게 논듯 보입니다. 라고 생각했지만 '건'자가 마른 건이네요. 잔을 말려라 이런 뜻이라고 하네요. 술자리에서 건배의 의미를 생각하시면서 서로 축하하거나 건강과 행운을 비면서 건배하시면 더욱 좋을 듯합니다.

• format_list_bulleted 일상/이야기
• · 2023. 2. 26.
• textsms

자바스크립트 - Math 함수 반올림(round), 내림(floor), 올림(ceil)

자바스크립트 Math 함수에 반올림, 내림, 올림을 할 수 있는 함수들이 있습니다. 1. 반올림 round() 0.5 이상이면 올림, 0.5 미만이면 내림을 합니다. Math.round(0.5); // 1 Math.round(0.4); // 0 위와 같이 사용할 수 있습니다. 2. 내림 floor() 내림입니다. 소수점 여부와 관계 없이 내림입니다. Math.floor(0.5); // 0 Math.floor(0.4); // 0 3. 올림 ceil() 올림입니다. 소수점 여부와 관계없이 올림입니다. Math.ceil(0.5); // 1 Math.ceil(0.4); // 1 round, floor, ceil 모두 다양한 곳에서 자주 쓰이는 함수들입니다. 간단하게 Math 함수를 이용해서 반올림, 내림, 올림..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 23.
• textsms

자바스크립트 - 소수점 자리 정해주는 Number 함수 toFixed()

toFixed()는 자바스크립트 Number 함수입니다. 하는 일은 숫자의 소수점 자리를 정해서, 문자열로 반환합니다. 숫자.toFixed(원하는 소수점 자리수(0~20)); 아래와 같이 사용할 수 있습니다. const number = 0.12345 console.log(number.toFixed()); // 0 console.log(number.toFixed(2)); // 0.12 console.log(number.toFixed(7)); // 0.1234500 변수를 넣지 않으면 0이 들어가기 때문에 소수점은 표시되지 않고 나오게 됩니다. 2를 넣으면 소수점 둘째 자리까지 반올림해서 반환됩니다. 소수점 보다 많은 숫자를 넣으면 뒤에 0으로 표시되어서 반환됩니다. 원하는 소수점 자리를 맞추기 위해서 to..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 23.
• textsms

자바스크립트 - 노드 추가 삭제 appendChild removeChild

자바스크립트에서 부모노드에서 자식 노드를 추가 하고 삭제하는 함수들을 알아보도록 하겠습니다. 1. appendChild 부모노드.appendChild(자식노드) 이렇게 사용하게 되면 부모노드의 가장 마지막에 자식 노드가 추가 됩니다. 아래와 같이 사용할 수 있습니다. const root = document.querySelector('#root'); const button = document.createElement('button'); const text = document.createTextNode('버튼'); button.appendChild(text); root.appendChild(button); 2. removeChild 부모노드.removeChild(삭제할노드) 이렇게 사용하면 부모노드에서 삭제..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 17.
• textsms

자바스크립트 - var / const / let 이란? 왜 let과 const가 생겼을까?

var / let / const 이란? var 자바스크립트에서 변수를 선언할 때 var를 사용하였다. var a = 'superman'; 문자도 var 숫자도 var 하나로 동일하게 사용하여서 편리하였는데 ES6 이상 문법으로 갑자기 let과 const가 생겼다. const const b = 'batman'; // 변경 불가 const로 선언한 변수는 값을 변경할 수 없습니다. 변하지 않는 상수의 값만 선언할 수 있습니다. let let은 var와 같이 변수의 값을 변경 가능합니다. 하지만, 유효 범위가 다릅니다. var result; function add(a, b) { result = a + b; // 접근 가능 return result } let은 { } 괄호 안의 선언된 범위 안에서만 접근이 가능..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 17.
• textsms

SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링) 차이점과 장점

SSR과 CSR 이란 무엇이고, 언제 사용하는지 알아보도록 하겠습니다. SSR (서버 사이드 렌더링) 이란?SSR의 경우 서버에서 바로 렌더링 할 수 있는 HTML 파일을 만들어서 전달합니다. 그 이후 js 파일을 로드합니다.장점미리 만들어진 HTML 파일을 가져오기 때문에 검색엔진 최적화에 좋습니다.초기화면 렌더링 속도가 빠릅니다.CSR (클라이언트 사이드 렌더링) 이란?CSR은 서버에서 HTML과 자바스크립트를 함께 전달합니다. 자바스크립트가 모두 로드된 이후에 페이지가 로드됩니다.장점매끄러운 화면 전환사용자 경험 향상 화면 렌더링 방식SSR (서버 사이드 렌더링)흰 화면 -> 서버에서 내려준 HTML 렌더링 -> 자바스크립트 파일 로드 CSR(클라이언트 사이드 렌더링)흰 화면 -> 자바스크립트 파일..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 15.
• textsms

자바스크립트 - onclick / addEventListener 이용하여 이벤트 사용하기

HTML과 자바스크립트에서 이벤트를 등록할 수 있습니다. 1. HTML에서 이벤트 등록 btn1 HTML 태그에 onclick을 입력하여 클릭 이벤트를 등록하는 방법이 있습니다. 2. JavaScript onclick 속성 추가하기 자바스크립트에서 onclick속성을 부여해서 이벤트를 추가하는 방법이 있습니다. const btn = document.querySelector('#btn2'); btn.onclick = function() { alert('Hi') }; 3. addEventListener를 이용하여 이벤트 등록하는 방법 element에서 addEventListener를 이용하여 클릭 이벤트를 등록할 수 있습니다. const btn = document.getElementById('btn'); b..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 14.
• textsms

자바스크립트 - transitionend 이용하여 배경색 슬라이드 만들기

HTML, CSS, 자바스크립트를 이용하여 배경색을 1초마다 다른 색으로 변경시켜 보도록 하겠습니다. 변경도 자연스럽게 슬라이드 되도록 한번 해보도록 하겠습니다. 아래 run pen을 누르시면 동작합니다. See the Pen slide by powerku (@powerku) on CodePen. 먼저 HTML을 이용하여 div, ul, li 태그를 만들어줍니다. li 태그들이 이동하면서 화면이 슬라이드 되는 것처럼 보이게 됩니다. css도 추가합니다. .box { width: 300px; height: 300px; position: relative; overflow: hidden; } ul { position: absolute; top: 0px; left: 0px; width: 2100px; heigh..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 11.
• textsms