본문 바로가기
  • purple-whale

반응형 웹사이트14

가상클래스를 이용하여 메뉴 사이 '|' 넣기 의미없는 기호는 가상클래스를 이용하여 만들어 줍니다. 중요 메뉴 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.
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.
@media : 반응형 사이트 설정하기(1600px 이하) @media를 사용하면 화면 크기에따라 반응하는 사이트를 만들 수 있다 예)화면이 1599px 이하일 경우, 배경색을 blue, 글자색을 whith 적용 화면이 1280px 이하일 경우, 배경색을 greenyellow, 글자색을 whith 적용 //width≤1599px @media screen and (max-width:1599px){ body { background: rgb(0, 0, 255); color: rgb(255, 255, 255); } } //width≤1280px @media screen and (max-width:1280px){ body { background: rgb(173, 255, 47); color: rgb(255, 255, 255); } } 기본값을 하나씩 변경하는 느낌으로 코.. 2021. 1. 25.
카드형 레이아웃 만들기 - PC버전 가로 5, 세로 4의 카드형 레이아웃 : alticle을 만든 후 가로 20%, 높이 25%를 적용하여 5X4 스타일의 레이아웃을 만들어줍니다. $b : #000; .container { height: calc(100vh - 50px); background: rgb(238, 238, 238); article { width: 20%; height: 25%; float: left; overflow: hidden; background: $b; &:nth-child(1) { background: rgba($b, 0.1); } &:nth-child(2) { background: rgba($b, 0.15); } &:nth-child(3) { background: rgba($b, 0.2); } &:nth-child(.. 2021. 1. 25.
SCSS - calc() : 너비, 높이 연산으로 구하기 calc()를 사용하여 요소의 높이를 계산합니다. .container { height: calc(100vh - 50px); } calc(값1'한칸띄움'-'한칸띄움'값2) 반드시 한칸씩 띄워야지 적용됩니다!! 2021. 1. 25.

티스토리툴바