inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

반응형 웹사이트 포트폴리오(Architecture Agency)

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4

233

audlovewns

작성한 질문수 7

2

@media (max-width:768px) {
  /* html { 
    scroll-behavior: smooth;
  }
  */

  /* Entire Layout */
  .cd-section {
    height: auto;
  }
  .cd-section > div {
    height: auto;
  }
  .content {
    position: static;
    width: 100%;
    height: 100%;
  }
  /* Header */
  header {
    transition: 0.5s;
    z-index: 100;
  }
  header.active {
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  .menu {
    display: block;
  }
  .slogan {
    display: none;
  }
  .gnb {
    background-color: #fff;
    position: fixed;
    top: 0;
    right: -270px;
    width: 250px;
    height: 100vh;
    box-shadow: -5px  0 10px rgba(0, 0, 0, 0.1);
    transition: 0.5s;
  }
  .gnb.active {
    right:0;
  }
  .menu {
    margin-top: 60px;
    line-height: 40px;
  }
  .menu a {
    display: block;
    text-align: right;
    padding-right: 20px;
    color: #000;
    font-size: 20px;
  }
  
  /* Trigger */
  .trigger {
    display: block;
    width: 24px;
    height: 14px;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .trigger span {
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #000;
    transition: 0.5s;
  }
  .trigger span:nth-child(1) {
    top: 0;
  }
  .trigger span:nth-child(2) {
    top: 50%;
    width: 80%;
  }
  .trigger span:nth-child(3) {
    top: 100%;
  }
  .trigger.active span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
  }
  .trigger.active span:nth-child(2) {
    top: 50%;
    width: 80%;
    opacity: 0;
  }
  .trigger.active span:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
  }

  /* go to top */
  .gototop {
    position: fixed;
    bottom: 20px;
    left: 20px;
    border: 1px solid #fff;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    transform: translateY(0px);
    opacity: 0;
  }
  .gototop.active {
    opacity: 1;
  }
  .btn-hiring {
    right: 20px;
    bottom: 20px;
  }
  .cd-vertical-nav {
    display: none;
  }
  
  /* Show Hide Section */
  /* #home,
  #about,
  #project,
  #plan,
  #awards,
  #location,
  #contact { 
    display: none;
  }
  */

  /* ############# section : Home ############# */
  .home-inner {
    height: 100vh;
  }
  .welcome-text {
    transform: translate(-50%, -50%) scale(0.7);
    width: 100%;
    /* border: 2px solid red; */
  }
  .home-heading {
    left: 20px;
  }
  .home-heading span {
    font-size: 50px;
  }

}

HTML/CSS jquery 웹-디자인 반응형-웹

답변 1

0

코딩웍스(Coding Works)

첫번째 질문에 답변 올렸습니다. 확인해주세요~

0

audlovewns

감사합니다 :)

full reload 질문

1

178

3

섹션4에 있는 4번째 강의 질문(스크롤링)

1

148

2

안녕하세요. 질문있어서 조심스레 글을 올려봅니다.

1

197

1

브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ

1

316

3

css full reload 문제가 발생하여 질문드립니다!

1

315

3

파일 내 index.html에 대한 오류

1

264

1

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ

1

207

1

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다

0

218

2

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!

1

201

2

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.

1

255

3

크로스브라우징-크롬

1

280

2

섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..

0

256

1

line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다

1

217

1

슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다

1

274

1

이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?

1

257

1

모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역

1

507

2

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3

2

308

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2

2

259

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태

2

422

1

포지션 속성 중복과 관련해서

1

213

1

section about에 관련.. 궁금해요

1

253

1

섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련

1

190

2

개발자도구

2

479

6

트리거메뉴 제이쿼리

3

430

2