Programming (11) 썸네일형 리스트형 [CSS] nth-child 가상 선택자 정리 (n번째 부터 n번째까지) / :not으로 제외 처리하기 CSS 선택자 정리:nth-child(n)부모안에 모든 요소 중 N번째 요소를 선택A:nth-of-type(n)부모안에 A라는 요소 중 N번째 요소를 선택:first-child부모안에 모든 요소 중 첫번째 요소를 선택:last-child부모안에 모든 요소 중 마지막 요소를 선택A:first-of-type부모안에 A라는 요소 중 첫번째 요소를 선택A:last-of-type부모안에 A라는 요소 중 마지막 요소를 선택:nth-child(odd)홀수인 요소를 선택:nth-childe(even)짝수인 요소를 선택:not(:nth-child(N))N번째 요소를 제외한 모두를 선택 nth-child를 사용하여 선택하기:nth-child(n) // n번:nth-last-child(n) //뒤에서 n번째 :nth-ch.. [HTML] 의미 없는 텍스트를 만들어 주는 사이트 - 로렘 입숨(Lorem Ipsum) 안녕하세요.오늘은 디자인을 할 때 텍스트를 채울 수 있는의미 없는 텍스트 생성기 사이트를 공유하려고 해요.로렘 입숨은 그리킹(greeking)이라고도 부르며,공간만 차지하는 무언가를 지칭하는 용어로 사용됩니다! 한글 로렘 입숨(Lorem Ipsum)무의미한 한글 텍스트를 생성해 주는 사이트입니다.사용자가 원하는 길이의 텍스트를 쉽게 만들 수 있어요. http://guny.kr/stuff/klorem/#/p-view 한글 Lorem Ipsum (간세네)로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종guny.kr 원하는 문단수와 길이를 맞춰 .. [jQuery] 스크롤 업/다운 Scroll down Scroll Up 헤더 스크롤 이벤트 페이지를 스크롤 할 때아래로 내리면 (scroll down) 헤더가 사라졌다가 올리면(scroll up) 다시 헤더가 나오는 이벤트 [ jQuery ] [ CSS ] 웹 페이지에 구글 지도 삽입하기 (구글맵 삽입 방법, 구글맵 반응형) 1. 구글맵 검색 구글맵을 검색하여 사이트에 접속합니다. 2. 페이지에 삽입할 장소검색 왼쪽 상단의 검색필드에 장소명 또는 주소를 입력하여 검색합니다. 3. 구글 지도 공유하기 장소를 검색하여 원하는 장소의 공유 아이콘을 클릭합니다. 4. 공유하기 - 지도 퍼가기 공유 아이콘 클릭 후 지도 퍼가기 탭 클릭합니다. 5. 공유하기 - 지도 퍼가기 - HTML 복사 지도 퍼가기 탭 클릭 후 HTMl복사 클릭하여 복사를 합니다. 6. 원하는 위치에 복사 붙여 넣기 7. (선택) 원하는 크기로 변경 width값과 height값을 수정하여 원하는 사이즈로 수정합니다. * 지도의 가로길이는 %, 픽셀(px) 단위로 입력 가능합니다. * 지도의 세로 길이는 % 단위를 사용할 수 없기 때문에 픽셀(px) 단위로 처리됩니.. [CSS] Background의 모든 것 (image, color, size, repeat, position, attachment) 배경에 스타일을 줄 때 사용하는 css 속성을 알아보겠습니다. background-color background-color 속성은 요소의 배경색을 설정합니다. 기본 값은 transparent , 투명이며 색상이나 색상코드를 사용합니다. 속성 설명 color background-color를 설정합니다. transparent (default) background-color를 투명하게 설정합니다. /* 키워드 속성 */ div{ background-color : currentcolor; background-color : transparent; } /* 키워드 컬러 속성 */ div{ background-color : yellow; background-color : green; } /* 헥사 코드 속성 */ d.. [javascript] 특정 날짜, 시간에만 실행하기 Date 객체 생성 먼저 오늘날짜를 얻기 위해 Date 객체를 호출합니다. var today = new Date(); 생성된 Date객체를 console.log로 출력해 보면 현재 날짜와 시간이 출력됩니다. (GMT - Greenwich Mean Time) Date 객체를 출력하면 객체의 toString() 메서드가 자동으로 호출됩니다. var today = new Date(); console.log (today); Date 날짜 구하기 생성된 Date 객체의 메서드를 사용해서 년, 월, 일을 가져와볼게요. getFullTear() : 년도(4자리) getMonth() : 월(0 ~ 11 / 1월 ~ 12월) getDate() : 일(1 ~ 31) 위의 메서드를 사용하여 호출해 줍니다. toString(.. [JQuery 플러그인] Slick slider 플러그인 사용법(반응형) 1. slick slider 사이트 접속 https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 2. slick 플러그인 다운로드 / CDN 연결 - 메뉴의 get it now 클릭 - Download Now (자동 다운로드 됨) - CDN 연결 CSS JS slick HTML 마크업 1 2 3 4 5 6 7 8 9 10 slick script sl.. [JS 플러그인] Swiper (스와이퍼 슬라이드) 사용법 1. 스와이퍼 슬라이드 사이트 접속 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 2. 메인 > Get Started 클릭 3. CDN 연결 또는 swiper 플러그인 다운로드 - CDN 연결 - swiper 플러그인 다운로드 후 파일연결 https://www.jsdelivr.com/package/npm/swiper?tab=files jsDelivr - A free, fast, and reliable .. 이전 1 2 다음
