c CSS

[css] CSS - 화면분할 좌측사이드 영역 스크롤 고정 (= 이미지/메뉴 사이드 고정)

2,661

좌측 사이드 스크롤 고정

<style>

#left {

position: fixed;

top: 0px;

left: 0px;

width: 30%;

height: 100%;

background-color: red;

z-index: 1;

}

body {

color:#ffffff;

width:70%;

min-height:100%;

float:right;

background-color: blue;

text-align:center;

}

</style>

<header>헤더</header>

<body>

<div id="left">좌측 (이미지/메뉴)</div>

<div id="right">우측</div>

</body>

결과보기

참고: SplitScreen https://codepen.io/throwtoys/pen/oYGzja

PS. 좌우 방향을 바꾸려면, 위 핑크색 값을 반대로 지정. 예제보기

CSS 관련글

코딩동강 관련글

HTML 관련글

JavaScript 관련글

jQuery 관련글

PHP 관련글


분류	제목



color	CSS - RGBA , HSL , HSLA , opacity - (색상코드)

transform	CSS - backface-visibility 속성 - 3D요소 뒷면 노출 여부. (= backface-vi…

border	CSS - border-right-width 속성 - 테두리우측두께 (= 테두리우측너비 = 테두리오른쪽너비 …

image	CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)

selector	CSS - :disabled 가상선택자 - 비활성화 된 요소 선택 (= 실행불능요소 = 작동불능요소 = :d…

transform	CSS - perspective-origin 속성 - 3D요소 바라보는 위치 (= perspective-or…

border	CSS - border-image-repeat 속성 - 테두리 이미지 반복할지 늘릴지 선택 (= 보더이미지리…

flex	CSS - flex-flow 속성(C) ☆ - (flex-direction / flex-wrap) 속성 일괄…

func	CSS - clamp() 함수 - 최소값과 최대값 사이의 중간값 반환. (= clamp함수 = 클램프함수)

background	CSS - background-clip 속성 - 배경영역 (= background-clip속성 = 백그라운드…

image	CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)

flex	CSS - flex 속성(I) ☆ - flex-grow, flex-shrink, flex-basis 속성 일…

border	CSS - border-top-width 속성 - 테두리상단두께 (= 테두리상단너비 = border-top-…

border	CSS - border-top-color 속성 - 테두리상단색상 (= 테두리상단색깔 = border-top-…

selector	CSS - :nth-of-type(n) 가상선택자 - 지정타입n번째 자식요소 (순서선택자,타입선택자, IE9…

border	CSS - border-left-width 속성 - 테두리좌측두께 (= 테두리좌측너비 = 테두리왼쪽너비 = …

flex	CSS - flex-grow 속성(I) ★ - 아이템 너비 증가 (= flex-grow속성 = 플렉스그로속성…

border	CSS - border-bottom-color 속성 - 테두리하단색깔 (= 보더바텀컬러속성 = border-…

pagination	CSS - 페이징 - 기본 스타일 (Simple Pagination)

border	CSS - border-left-color 속성 - 테두리좌측색상 (= 테두리좌측색깔 = 테두리왼쪽색상 = …

15/27

[css] CSS - 화면분할 좌측사이드 영역 스크롤 고정 (= 이미지/메뉴 사이드 고정)

좌측 사이드 스크롤 고정

CSS 관련글

코딩동강 관련글

HTML 관련글

JavaScript 관련글

jQuery 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글

공지사항

최신글

최신댓글

운영비 후원해주신 분 리스트