본문 바로가기
[css] 가상요소 선택자 ::before, ::after 사용법(ft. 가상 클래스) 웹의 타이틀에 자주 사용되는 ::before, ::after 사용법을 알아보겠습니다. ::before, ::after이 필요한 경우: 홈페이지 헤더나 푸터에 구분선을 삽입할 때 홈페이지 헤더: 로그인ㅣ회원가입ㅣ마이페이지ㅣ사이트 홈페이지 푸터: 회사소개ㅣ이용약관ㅣ개인정보취급방침ㅣ1:1문의ㅣ모바일버전 가상 클래스 여러 태그 중에서 원하는 태그를 선택하기 위해 사용하는 선택자 자주 사용하는 가상 클래스 종류 :hover / :active / :forcus / :visited 가상 요소 내용의 일부만 선택해 스타일을 적용할 때 사용 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두개(::)를 붙여 표시 -> 가상 요소 앞에 콜론 하나(:)를 붙여도 브라우저에서 가상 요소로 인식하지만 웹브라우저, explo..
[js/jQuery] 응용편_카운트업 숫자 올라가는 효과 구현. 숫자 자동 증가 자바스크립트, 제이쿼리의 setInterval, clearInterval 메서드를 이용하여 웹페이지에서 많이 사용되는 숫자 카운트업을 구현하겠습니다. 이전 카운트업 구현하기 포스트는 맛보기용 기초였고, 오늘은 실전편이라고 생각하시면 됩니다. 이전 포스트가 궁금하신 분은 아래 링크로 이동해주세요. https://goddino.tistory.com/20 [js/jQuery] 카운트업 숫자 올라가는 효과 구현하기 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. 이 효과를 javascript, jQuery를 이용하여 간단하게 구현하도록 해보겠습니다. 아래 소스를 확인해 주세요. 1. html 99 2. css .n goddino.tistory.com setInterval() / clear..
[js] 홈페이지 배너 팝업창 띄우기, 창닫기 홈페이지를 운영을 하다 보면, 꼭 필요한 이벤트나 공지 배너를 홈페이지 첫 창에 띄우는 일이 많습니다. 배너 이미지를 자바스크립트를 이용하여 팝업창에 띄우고, 창닫기를 구현해 보겠습니다. 먼저 팝업창에 띄울 배너를 만들어야겠지요? 저는 아래의 이벤트 배너를 사용하겠습니다. (사이즈: 500X500 px) window.open() 메서드를 이용하여 팝업 창을 나타내고, 이를 위해서는 2개의 웹페이지가 필요합니다. 하나는 배너가 들어간 팝업 창으로 나타낼 페이지이고, 또 하나는 팝업 창을 띄우도록 해주는 오픈 페이지입니다. 팝업 창 띄우기를 시작하기 전에 여러분의 브라우저(크롬 또는 익스플로러)에서 팝업 창이 차단되어 있으면 팝업 창을 나타낼 수 없습니다. 브라우저의 환경설정에 들어가서 팝업 창이 차단되어 ..
[js] 개인정보 이메일 유효성 검사 후 출력하기 문자열 객체를 메서드를 이용하여 사용자로부터 입력받은 이메일 주소의 유효성을 검사하는 방법을 알아보겠습니다. 구현내용: · prompt를 이용하여, 사용자의 이름, 핸드폰 번호, 이메일 주소를 입력받음 · 이메일 주소안에 @, 도메인 주소가 포함되어 있으면 정상 · 정상일 경우, 정상 메시지 출력 · 비정상일 경우, 비정상 메시지 출력 · 여기서 핸드폰 번호 뒤 4자리는 정보가 노출되지 않도록 '*'로 출력 문자열 객체 메서드 종류 설명 charAt(index) 문자열에서 인덱스 번호에 해당하는 문자를 반환 indexOf("찾을 문자") 문자열 왼쪽에서 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 (만일 찾는 문자가 없으면 -1을 반환) match 문자열에서 왼쪽부터 ..
[js] 디데이 시간 날짜 카운트 계산하기 (ft. 자동 날짜 구하기) javascript를 이용하여 현재 날짜와 특정 날짜, 디데이를 구현합니다. 날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체를 생성합니다. 날짜 객체를 이용하면 달력과 특정 기념일 디데이 계산기를 만들 수 있습니다. 자바스크립트 날짜 메소드 getFullYear() : 연도 정보를 가져옴 getMonth() : 월 정보를 가져옴(현재 월 -1) getDate() : 일 정보를 가져옴 getDay() : 요일 정보를 가져옴(일:0~토:6) getDay/getHours/getMinutes/getSeconds() : 시/분/초 정보를 가져옴 getTime : 1970년 1월 1일부터 경과된 시간을밀리초로 표기함 디데이 계산기 만드는 방법 날짜 정보 객체를 이용하여 현재 날짜 정보와 특정 날짜 정보를 가..
[vscode] 비주얼스튜디오코드 실시간 미리보기(ft. live server 플러그인 ) 실시간 미리보기 확장 플러그인 설치 방법을 알아보겠습니다. 저는 웹에디터를 braket, atom, visual studio code, noto pad++, dream weaver 를 사용해 보았는데, 최근에는 가독성과 UI 편리성의 이유로 visual studio code 또는 braket을 주로 사용하고 있습니다. Visual studio code는 마이크로소프트사에서 개발되었고, 요즘 Atom과 함께 개인 뇌피셜로 가장 인기있는 에디터입니다. emmet기능이 자동 내장되어있고, 자동으로 닫는 tag가 setting에서 설정이 가능하여 바로 프로그램 설치 후에 사용하기 쉽습니다. 다만, braket에는 있지만, vscode에는 웹에서 실시간 미리 보기 기능을 제공하지 않아 확장 플러그인, Iive s..
[js/jQuery] 기본편_카운트업 숫자 올라가는 효과 구현 (ft. 숫자 자동 증가) 숫자 카운트업 효과를 setInterval, clearInterval 메서드를 이용하여 구현하겠습니다. 실무에서 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. setInterval() / clearInterval() 일정한 시간 간격으로 코드를 실행하는 메서드는 setInterval()과 setTimeout()가 있습니다. setInterval과 clearInterval은 서로 짝꿍이라서 보통 같이 사용합니다. setInterval()은 일정한 시간 간격으로 코드를 반복적으로 실행하고, setTimeout()은 일정한 시간 후에 코드를 한 번만 실행하고 종료됩니다. setInterval() : - 코드를 일정 시간 간격으로 반복 실행 - 기본형: setInterval(functi..
[js/jQuery] 반응형 캐러셀(carousel) 슬라이드 구현하기 반응형 캐러셀 슬라이드를 구현합니다. swiper, slick slide, owl slide와 같은 자바스크립트 라이브러리를 사용하면 매우 편하지만, 자바스크립트와 제이쿼리를 이용하여 슬라이드를 직접 구현 합니다. 슬라이드 작동 조건: 1. 반응형 슬라이드: 창 크기에 맞추어 슬라이드의 이미지 사이즈 자동 조정 2. 자동 플레이 슬라이드: 일정 시간마다 슬라이드 좌에서 우로 이동 3. 슬라이드 변경 시, 아래 페이지 버튼 색깔 변동 4. 페이지 버튼 클릭마다 각 해당 슬라이드로 바로 이동 이제 시작해 볼까요! 아래의 이미지 파일을 만들어 사용하였습니다. 슬라이드의 배열과 동작 순서는 아래와 같습니다. 캐러셀 슬라이드(carousel slide) 예제 html css * {margin: 0;padding:..
[css] css 이미지, 컨텐츠 가운데 정렬 2가지 방법 css만으로 요소를 가운데 정렬하는 방법을 소개하겠습니다. 반응형 웹이 아닌 일반 pc 또는 mobile용 웹을 만들 때는 javascript, jQuery를 사용할 없이 css만으로 가운데 정렬을 할 수가 있어 간단합니다. css로 가운데 정렬하는 2가지 방법을 소개하겠습니다. 1. 부모 요소로 감싸주었을 경우 img를 삽입할 경우, 보통 div인 부모 요소로 감싸줄 때가 많습니다. 이 경우, 부모 요소인 div 또는 p 태그에 text-align: center를 해줍니다. css div{text-align: center;} text-align text-align 속성이란 문단의 텍스트 정렬 방법을 지정합니다. 종류: text-align: start / end / left / right / center..
[js/jQuery] 자바스크립트 이용한 반응형웹 이미지 가운데 정렬 반응형 사이트에서 javascript/jQuery를 이용한 가운데 정렬입니다. 반응형 웹에서 이미지 또는 컨텐츠를 같은 크기의 비율로 수직 수평 가운데 위치하는 것은 보기에는 쉬워보이지만 의외로 html, css 만으로는 구현하기 쉽지 않습니다. 현재 구글링 정보를 통하여 그때그때 적용할 순 있어도, 사용자의 기기에 따라 다르게 반응하는 반응형 웹에서 자바스크립트 사용없이 쓰기에는 무리가 있습니다. 그래서 반응형 웹에서 사용할 수 있는 자바스크립트, 제이쿼리를 이용한 반응형 웹에서 이미지 수직 수평 가운데 정렬을 구현하겠습니다. 반응형 이미지 수직 수평 가운데 정렬 방법 반응형웹 적용을 위한 필수 요소 viewport 삽입 사이에 아래 메타태그를 추가하세요. html (css는 inline스타일로 적용)..
[js/jQuery] 탭메뉴 구현하기 javascript/jQuery를 이용한 탭메뉴를 구현하기 홈페이지에서 메인 페이지 또는 서브 페이지에 수시로 사용되는 탭 메뉴입니다. javascript/jQuery를 이용하여 구현하겠습니다. 구현방법: · 첫번째 탭제목에 컬러가 들어가있고 탭박스가 오픈된 상태 · 다른 탭을 클릭시 이전 탭제목 컬러 없어지고, 해당 탭제목의 컬러가 들어감 · 동시에 이전 탭 박스는 감추고, 해당 탭의 박스가 오픈 · addclass, removeclass, hide, show 메소드 이용 아래의 html, css, javascipt 소스를 그대로 넣으시면 됩니다. html tab1 tab2 tab3 tab1_content tab2_content tab3_content css .container { width: 500p..
웹디자인 기능사 자격증 합격후기(ft. 합격꿀팁! 실기시험 문제 소스 구현) 안녕하세요. 2019년 9월 초에 이틀에 걸쳐 웹디자인 기능사 자격시험을 치르고, 약 20일 후에 합격소식을 전해 들었습니다. 코알못으로 시작하여 6개월동안 국비지원 학원을 다니며 공부하면서 고생아닌 고생을 하였는데 기능사 자격증 합격으로 그동안의 고생이 다 보상되는 느낌을 받으면서 스스로에게 너무 뿌듯하였습니다! 그래서 오늘은 저의 웹디자인기능사 자격증 합격후기와 실기시험 4가지 문제 구현 소스를 오픈하겠습니다. 저는 고용노동부 훈련기관에서 과정평가형 UX/UI 디자인 웹퍼블리셔 과정을 수료하였고, 그 과정의 마지막 코스인 기능사 시험까지 지원하였습니다. 시험은 첫날 필기 시험과 간단한 면접을 보고, 이튿날은 시험의 메인 가장 중요한 실기 시험을 보았습니다. 먼저 필기와 면접은 기출문제 및 교재를 보고..
반응형

티스토리툴바