CSS

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

2,565

좌측 사이드 스크롤 고정

<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 관련글


분류	제목



css	CSS - all 속성 - 해당요소와 그 부모요소의 모든 속성 일괄 지정 (= all속성 = 올속성)

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

css	CSS - 구글 번역바 숨기기/제거 (Google TranslateBar hide/remove)

css	CSS - accent-color 속성 - 사용자 제어 선택요소의 색상/색깔 지정 (= accent-colo…

css	CSS - box-reflect 속성 (비표준) - 요소의 반사체 생성 (= box-reflect속성 = 박…

css	CSS - break-after 속성 - 지정요소 뒤에서 (페이지분할/컬럼분할/영역분할) 발생 여부 지정 (…

css	CSS - break-before 속성 - 지정요소 앞에서 (페이지중단/컬럼중단/영역중단) 발생 여부 지정 …

css	CSS - break-inside 속성 - 지정요소 내 (페이지중단/컬럼중단/영역중단) 발생 여부 지정 (=…

css	CSS - caret-color 속성 - '입력/편집' 가능 요소의 커서 색상 변경 (= caret-colo…

css	CSS - clip-path 속성 - 보일 범위 지정해 자르기 (= clip-path속성 = 클립패스속성) …

css	CSS - hyphens 속성 - 긴 텍스트 단어에서 하이픈 표시 방법 지정 (= hyphens속성 = 하이…

css	CSS - hyphenate-character 속성 - 하이픈 줄바꿈 시, 라인 끝 하이픈 모양 지정 (= …

css	CSS - inset 속성 -

css	CSS - inset-block 속성 -

css	CSS - inset-block-end 속성 -

3/6

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

좌측 사이드 스크롤 고정

CSS 관련글

코딩동강 관련글

HTML 관련글

JavaScript 관련글

jQuery 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글