전체 글33 Github 무료 웹호스팅 사용하기 원하는 레포지토리를 선택한 후 셋팅을 클릭합니다. 셋팅 사이트 하단의 GitHub Pages에서 None을 클릭한 후 main을 선택합니다. save를 클릭합니다. 주소 뒤에 .이 붙은 파란창이 나오면 아직 진행중이므로 메인으로 나갑니다. 메인창에서 다시 셋팅 화면을 접속하면 초록색장이 뜨고, 생성된 주소를 클릭하면 접속이됩니다. 레포지토리 메인에 index.html 파일이 있어야 합니다!! 2021. 2. 19. github 자료 업로드 하기 (업로드 에러 해결) https://github.com/ GitHub: Where the world builds software GitHub is where over 56 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com New를 클릭합니다. 이렇게 생성되면 내컴퓨터로 갑니다. 원하는 위치에 비어있는 새폴더를 하나 생성합니다. 오른쪽 마우스 클릭하여 터미널을 열고 아래 코드를 한줄씩 입력합니다. name 안에 "아이디"를 입력하고 emalil .. 2021. 2. 19. Slick-slide : 슬라이드 일시정지 아이콘 만들기 시작 정지 버튼을 감싸는 div를 만들어 위치를 조정하면 편하게 이동할 수 있습니다. .slide-btn-wrap { position: absolute; bottom: 30px; left: 50%; transform: translateX(60px); .slide-btn-pause { color: $wh; text-shadow: 1px 1px 3px rgba($bk, 0.6); font-family: 'Line Awesome Free'; font-weight: 900; font-size: 3.5em; &:hover { color: $pt; } } .slide-play { &::before { content: "\f144"; } } .slide-pause { &::before { content: "\f28b.. 2021. 1. 29. Slick-slide : 도트 수정하기 기본 토드가 가상클래스에 문자로 입력되어 있기 때문에 우선 가상클래스를 안보이게 해줍니다. .slick-dots { button { &::before { display: none; } } } 도트의 위치는 .slick-dots에서 이동시켜줍니다. .slick-dots { bottom: 20px; button { &::before { display: none; } } } button 에서 비활성화된 토트의 디자인을 만들어 줍니다. .slick-dots { bottom: 20px; button { width: 10px; height: 10px; border: 2px solid $pt; border-radius: 50%; box-shadow:1px 1px 3px rgba($bk, 0.6); &::before .. 2021. 1. 28. Slick-slide : 슬라이드 화살표 변경하기 기본값 화살표는 버튼 부분이 잘 보이지 않아 변경해주어야 합니다. 개발자 창을 열어 버튼 안쪽 가상클래스 ::before를 선택해 보면 기본 화살표를 확인할 수 있습니다. .slick-top { .slick-arrow{ // 두 화살표의 공통요소를 입력합니다. } .slick-prev { // 좌측 화살표의 위치값을 넣어줍니다. ::before { // 좌측 화살표의 요소를 입력합니다. } } .slick-next { // 우측화살표의 위치값을 넣어줍니다. &::before { //우측 화살표의 요소를 입력합니다. } } } icons8.com/line-awesome Download 158k Free Icons + Illustrations, Photos, and Music Download design e.. 2021. 1. 28. 가상클래스를 이용하여 메뉴 사이 '|' 넣기 의미없는 기호는 가상클래스를 이용하여 만들어 줍니다. 중요 메뉴 about contact sns 바로가기 facebook twitter instargram .link-goto { margin-bottom: 20px; a { padding: 0 5px; font-size: 1.2em; letter-spacing: -0.1em; &::before { content: ""; display: inline-block; width: 1px; height: 17px; background: $dk; margin: -2px 20px 0 20px; vertical-align: middle; } } li { &:first-child { a { &::before { display: none; } } } } } 2021. 1. 28. Slick-slide : 주요 기본 Setting 값 Speed in millisecondsAutoplay Speed in millisecond setting default play autoplay false 자동으로 다음이미지 보여주기 autoplaySpeed 3000 다음이미지로 넘어갈 시간 arrows true Prev/Next 화살표 dots false 아래점 fade false 페이드인/아웃 initialSlide 0 첫번째 슬라이드 이미지 pauseOnFocus true 포커스가 들어오면 슬라이드 이동 멈춤 pauseOnDotsHover false 마우스 호버시 슬라이드 이동 멈춤 responsive none 중단 점 및 설정 개체를 포함하는 개체 (데모 참조). 주어진 화면 너비에서 설정 세트를 활성화합니다. 지정된 중단 점에서 슬릭을 비활성화.. 2021. 1. 28. library - slick slide : single item 수정하기(기본형) 기본형 슬라이드를 만들기 위해 슬릭 슬라이드 라이브러리를 링크시켜 줍니다. 준비된 이미지를 넣어줍니다. 기본형 코드를 comm.js에 입력합니다. $(function () { $('.slick-top').slick(); }); 변형 1. 자동으로 넘겨주기 + 2초마다 실행 + 슬라이드 도트 만들기 추가 $(function () { $('.slick-top').slick({ autoplay: true, autoplaySpeed: 2000, dots: true, }); }); 변형 2. 자동으로 넘겨주기 + 5초마다 실행 + 슬라이드 토트 만들기 추가 + 슬라이드 화살표 제거 $(function () { $('.slick-top').slick({ autoplay: true, autoplaySpeed: 500.. 2021. 1. 28. library - slick slide 시작하기 1. CDN 으로 연결 title 밑에 아래 주소를 붙여넣어줍니다. //CSS //JS 2. 다운 받아서 링크 아래 사이트에서 파일을 다운받아 줍니다. 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 꼭 필요한 파일만 복사하여 내폴더 안에 붙여넣기 한 후 html파일에서 링크합니다. *jquery 파일이 있어야만 슬라이드가 실행됩니다. 함께 링크 시켜주세요.. 2021. 1. 28. line-awesome을 이용한 SNS 아이콘 넣기 라인어썸안에 링크를 html 안에 넣어 링크시켜 줍니다. icons8.com/line-awesome/howto Download 158k Free Icons + Illustrations, Photos, and Music Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️ icons8.com 원하는 SNS아이콘을 검색합니다. 원하는 디자인을 클리하면 나오는 창의 하단 태그를 복사합니다. sns 바로가기 facebook twitter instargram 안으로 넣어주어야 클릭이 가능합니.. 2021. 1. 27. flex-direction으로 헤더 세로 정렬하기 display: flex; 로 정렬하고 flex-direction: column; 을 써서 세로로 떨어지게 만들어 줍니다. 마지막 nav-goto를 하단으로 정렬하려면 margin-top: auto; 를 넣어 밑으로 내려줍니다. The Shilla Hotel & Resotrs 주메뉴 호텔찾기 호텔예약 호텔신라 소개 고객문의 신라리워즈 중요 메뉴 about contact sns 바로가기 facebook twitter instargram header { position: fixed; top: 0; bottom: 0; left:0; width: $w; background: $bg; display: flex; flex-direction: column; } .nav-goto { margin-top: auto; } 2021. 1. 27. 시각장애인을 위한 u-skip 넣기 시각장애인의 편의를 위해 바디 태그 바로 밑에 u-skip을 넣어 빠르고 편한 검색을 도와줍니다. 주메뉴 바로가기 본문 바로가기 The Shilla Hotel & Resotrs 주메뉴 호텔찾기 호텔예약 호텔신라 소개 고객문의 신라리워즈 중요 메뉴 about contact sns 바로가기 facebook twitter instargram Jeju Island REWARDS Basic Edition Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reservation REWARDS WINTER DAY DELIGHTS Lorem ipsum dolor sit amet consectetur REWARDS PLAY IN THE ROOM adipisicing e.. 2021. 1. 27. 애니메이션으로 텍스트가 순서대로 올라오는 효과내기 h2 { font-size: 1.786em; transform:translateY(100px); opacity: 0; animation: ani-txt 1s forwards; } p { font-size: 1em; transform:translateY(100px); opacity: 0; animation: ani-txt 1s forwards; } @keyframes ani-txt { 0% {transform:translateY(100px); opacity: 0;} 100% {transform:translateY(0px); opacity: 1;} } 아티클 안의 글자들이 밑에서 위로 나타나는 효과를 내기위해 animation을 이용하여 설정한 후 @keyframes 애니매이션이름 {} 으로 원하는 효과를 .. 2021. 1. 27. 가상클래스로 마우스오버시 불켜지는 효과 내기 article { &::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba($bk, 0.2); } &:hover{ &::before { display: none; } } } article에 가상클래서 ::before를 사용하여 배경 위쪽으로 어두운 색상을 입혀줍니다. 마우스 오버시 가상클래스를 없애주면 원래이미지가 나와 불켜지는 듯한 효과를 줄 수 있습니다. 2021. 1. 27. width≤639px @media screen and (max-width:639px){ h1 { height: 60px; } .nav-utill { display: none; } .nav-depth1 { width: 90%; padding: 10px 0; } .container { // 변수 재설정 $h : 130px; article { height: $h; &:nth-child(1) { height: $h*2; } &:nth-child(n+2) { height: $h; } } } } .nav-utill을 숨겨주고 .container의 높이 변수를 변경합니다. 2021. 1. 26. 639<width≤779px @media screen and (max-width:779px){ // 변수 재선언 .container { $w : 50%; article { width: $w; &:nth-child(1) { width:$w*2; } &:nth-child(2) { width:$w*2; } &:nth-child(n+3) { width:$w; } } } } 가로 2칸 설정을 위해 변수를 50%로 변경 합니다. 2021. 1. 26. 779px <width ≤1023px @media screen and (max-width:1023px){ // 변수 재선언 .container { $w : 33.333%; article { width: $w; &:nth-child(1) { width:$w*3; height: 400px; } &:nth-child(2) { width:$w*2; } &:nth-child(4), &:nth-child(7), &:nth-child(10), &:nth-child(12) { display: none; } &:nth-child(6) { width:$w*2; } &:nth-child(8) { width:$w; } &:nth-child(9) { width:$w; } } } } 가로 3칸 설정을 위해 변수 $w을 33.33%로 변경 합니다. 제거하고 싶은 아티.. 2021. 1. 26. 1280px < width ≤ 1599px @media screen and (max-width:1599px){ .wrap { padding-left:0px; } header { position: static; top: 0; left:0; right: 0; width: 100%; height: 100px; } .container { height: calc(100vh - 150px); } h1 { height: 70px; a { display: block; width: 100%; padding: 10px 0 0px; text-align: center; img { height: 40px; } } } .nav-depth1 { display: flex; justify-content: space-between; width: 70%; margin: 0 aut.. 2021. 1. 26. line-awesome 이미지 animation으로 무한 회전 시키기 완선된 레이아웃에 이미지를 배경으로 넣어주고, 안에 , 태그로 내용을 작성합니다. Resercation 안에 필요한 아이콘을 line-awesome에서 찾아 html안에 넣어줍니다. icons8.com/line-awesome Download 158k Free Icons + Illustrations, Photos, and Music Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️ icons8.com 아래 부분을 복사하여 붙여넣기 합니다. .la-sync { position: ab.. 2021. 1. 26. 웹 아이콘, 웹 폰트 사용하기 라인어썸 icons8.com/line-awesome/howto Download 158k Free Icons + Illustrations, Photos, and Music Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️ icons8.com 링크를 안에 넣어 사용 구글폰트 fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com.. 2021. 1. 25. 이전 1 2 다음
