Lpla 개발 블로그

JavaScript/실전

[JavaScript] 무작위 숫자 5개를 뽑아 오름차순으로 정렬 1

자바스크립트에서 랜덤한 숫자 5개를 뽑는다고 해보자. var 랜덤숫자 = Math.floor(Math.random() * 50) + 1; console.log(랜덤숫자); Math.random() 은 0 이상 1 미만의 무작위 난수를 생성하는 함수이고, 이를 50으로 곱했기 때문에 0부터 50사이의 난수가 생성된다. Math.floor 는 소수점 이하를 버리는데 Math.floor(Math.random() * 50) 은 0부터 50사이의 정수를 뽑는다. 단, 50 미만에 50은 포함되지 않기 때문에 +1을 추가하여야 1부터 50까지의 정수를 뽑을 수 있다. 하지만 단 하나의 숫자만을 뽑을 뿐이고 우리가 원하는 것은 5가지의 랜덤 숫자이다. var 추출 = []; for (i=1; i

웹디자인기능사

웹디자인기능사 실기 공개문제로 공부하는 법

이번엔 공개문제로 연습하는 방법을 알려드리겠습니다. 큐넷에 올라온 공개문제는 총 12개로, 그 중에서 저는 11C-3 '남도맛기행 축제' 를 만들어보도록 하겠습니다. 작업순서나 방식은 개개인의 취향이므로 참고만 하되, 똑같이 따라하지 않으셔도 됩니다. 저는 집에서 연습할 때는 Photoshop CC 2018, Brackets으로 작업했고 실제 시험장에서는 Photoshop CS5, Brackets으로 작업했습니다. 시험장은 '한국산업인력공단 부산지역본부' 였고 다행히 브라켓에 emmet가 설치되어 있었습니다. emmet의 설치여부가 굉장히 궁금했었는데 덕분에 시간단축을 상당히 할 수 있었습니다. 의외로 illustrator는 일절 사용하지 않았습니다. 필요성을 못 느꼈거든요. 시험장에서도 일러스트레이터는..

HTML&CSS

CSS로 그라데이션 텍스트 쉽게 만들기

그라데이션이 들어간 텍스트를 CSS만으로 만들 수 있다. See the Pen vqOaPL by lpla (@lpla) on CodePen. background-clip은 배경의 영역을 지정하는 코드로 기본값은 initial 이다. background-clip: padding-box; 는 패딩 영역까지 배경이 보이도록 하고, background-clip: border-box; 는 테두리 영역까지 배경이 보도록 하는 것이다. 예외적으로 webkit(사파리, 크롬) 에서만 background-clip: text; 가 사용 가능한데 텍스트 영역에 배경이 보이도록 하는 것이다. 그리고 텍스트 색상을 투명화하면, 배경색상이 텍스트에 입혀지는 원리이다.

JavaScript/기초

[JavaScript] scrollTop과 offset

scrollTop은 현재 스크롤의 위치값을 나타낸다. $(window).scrollTop(); 이는 브라우저 상단에서 현재 스크롤까지 이동한 값을 나타내는 코드이다. offset은 대상의 위치값을 나타낸다. $('section').offset(); 이는 section이라는 요소의 위치값을 나타내는 코드이다. 쉽게 말해 scrollTop은 가변적이고, offset은 고정적이다. 다만 offset이 항상 고정적인 것은 아닌데, 반응형에서 브라우저의 크기를 늘리거나 줄일 때 offset의 값도 변할 수 있다. 스크롤이 특정한 지점에 위치할 때, 이벤트가 발생하는 경우에 scrollTop과 offset이 모두 쓰인다. var section2Offset = $('#section2').offset(); $(wind..

JavaScript/실전

[JavaScript] JQuery 플러그인 - bxSlider

bxSlider는 매우 쉽게 이미지 슬라이더를 만들 수 있는 유용한 플러그인이다. bxSlider를 사용하지 않을 경우, setInterval, if문 등 복잡하고 긴 코드를 사용해야 하는 반면, 10줄 이내로, 그것도 아주 직관적인 코드만을 사용하여 슬라이더를 구현할 수 있다. https://bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 설치법은 위 사이트에 나와 있는 대로 I am a slide. I am another slide. header 안에 제이쿼리, bxSlider css, 제이쿼리를 작성하고 간단한 자바스크립트 문법까지 작성하면 된다.

웹디자인기능사

웹디자인기능사 실기 유형 정리

지난 3월에 있었던 웹디자인기능사 2019년 1회차 시험에 최종 합격했습니다. 웹퍼블리싱을 6개월 정도 공부한 저에게는 무난한 난이도였습니다. 실제 준비 기간은 시험이 있던 그 주 평일 월화수목금 총 5일이었고 하루에 웹 사이트 하나씩 제작하여 유형을 모두 익혔습니다. 시중에 나와있는 '이기적in 웹디자인기능사 실기 기본서'를 살까도 고민했지만 2018년 버전이라 망설여졌고 무엇보다 큐넷에 올라온 2019년도 공개문제가 상당히 잘 만들어져 있어 오직 공개문제로 공부했습니다. http://www.q-net.or.kr/cst006.do?id=cst00601&gSite=Q&gId=&brdId=Q006&code=1204# 공개문제 자료실 목록 | Q-net www.q-net.or.kr 하지만 무턱대고 시험을 치..