Loading the content...

HTML/CSS

  • Home
  • 스터디
  • HTML/CSS

스크롤 감추기

2,706 2015.10.30 10:55

첨부파일

짧은주소

본문

안녕하세요. eyoomegg입니다.

 

스크롤을 감추는 방법에 대해 알아보겠습니다.

아래는 해당  html과 css 소스입니다.


    <div class="box">
      <div class="hide-scrollBar">
          <div class="box-inner">
              <p>이윰빌더는 프레임웍인 영카트5/그누보드5의 기본 소스를 전혀 수정하지 않습니다.
이에 따라 이윰빌더를 이용하시는 사용자들은 영카트5/그누보드5의 새로운 버전이 출시되거나 패치가 나왔을 경우, 새로운 버전을 바로 패치하더라도 별다른 문제가 되지 않습니다.
이윰빌더는 Template_( 템플릿언더바 : http://www.xtac.net ) 라는 국산 템플릿 엔진을 사용합니다.
홈페이지 제작을 위해 디자이너와 프로그래머가 다른 영역에서 작업을 할 수 있어 협업하기에 최적화되어 있습니다.
또한, 이윰빌더의 디자인 영역인 테마 및 스킨파일은 php 프로그램 코드를 거의 사용하지 않기에 프로그램을 모르는 디자이너들에게 높은 가독성을 제공해 줍니다.
모바일 사용자가 급증하면서 현재 가장 많이 주목받고 있는 웹페이지 제작 기법이 바로 반응형웹 디자인(Responsive Web Design)입니다.
PC 및 모바일 N스크린 환경에서도 최적화된 디자인을 제공하는 장점이 있으며, 제작 및 관리가 용이합니다.
부트스트랩( http://getbootstrap.com )을 이용한 반응형 웹 디자인은 처음 익히기가 어려울 뿐, 어느정도 숙련만 되면 웹페이지의 제작 속도 및 품질의 향상을 동시에 보실 수 있습니다.</p>
          </div>
      </div>      
    </div>

* {
  box-sizing: border-box;
}
.box{
  width: 250px;
  height: 250px;
  margin: 30px auto;
  background-color: #e9e9e9;
  overflow: hidden;
  padding-bottom: 10px;
  padding-top: 10px;
  box-sizing: inherit;
}
.hide-scrollBar{
  width: 266px;
  height: 100%;
  overflow: auto;
  box-sizing: inherit;
}
.box-inner{
  width:249px;
  padding: 0 10px;
  box-sizing: inherit;
}
.box-inner p{margin:0}

.box 에서 폭의 값(250px)을 정하고 overflow:hidden을 줘서 밖의 영역은 감춥니다.

.hidden-scrollbar 에서 .box 폭에 스크롤정도 만큼 더 한 값(265px)을 줍니니다.

.box-inner 에 .box의 폭의 값보다 작은 249px 을 줍니다.(같은 값 이상이면 ie에서 가로 스크롤이 생깁니다.)

.hidden-scrollbar 에 스크롤은 사라지지 않고 있지만 .box가 스크롤 부분을 감추는 역할을 하게 됩니다.

.box-inner는 보이는 영역만큼의 가로 폭의 값을 주는 것입니다.

간단한 예이니 위 소스를 복사해서 html파일로 만들어 보시거나 첨부파일을 확인 해 보시면 쉽게 이해가 되실겁니다.

 

0
좋아요!
- 이윰EGG 메일보내기 아이디로 검색 - 회원등급 : 새싹/Level 13 - 포인트 : 108,979
레벨 13
경험치 16,105

Progress Bar 20%

- 가입일 : 2015-09-18 16:01:20
- 서명 : 이윰EGG입니다. 잘 부탁드립니다.
- 자기소개 :
댓글목록

비즈팔님의 댓글

적용해 봐야겠네요.
감사합니다.

축하합니다. 첫댓글 포인트 17포인트를 획득하였습니다.

미니언즈님의 댓글

너무 감사합니다..

티보리님의 댓글

감사합니다. 한번 적용해봐야겠어요

티보리님의 댓글

.hide-scrollBar{
  width: 266px;

위에 소스가 설명에는.hidden-scrollbar 인가요?