CSS

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

2,662

좌측 사이드 스크롤 고정

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


분류	제목



grid	CSS - grid-template-rows 속성(C) - 그리드 행 개수와 높이 지정 (= grid-tem…

intro	CSS - @import 구문 - 지정 외부스타일시트파일을 현재 스타일시트에 삽입/가져오기 (= @impor…

counter	CSS - counter-reset 속성 - 카운터변수 생성/초기값재설정 (= counter-reset속성 …

text	CSS - text-emphasis-style 속성 - 텍스트 강조마크 모양 지정 (= text-emphas…

text	CSS - text-underline-offset 속성 - 텍스트와 밑줄라인과의 간격 지정 (= text-u…

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

text	CSS - text-orientation 속성 - 블락방향 수직모드에서 문자방향 지정 (= 텍스트방향 지정 …

counter	CSS - counter (카운터: 자동으로 번호 매기기) 시스템 작동원리 + 관련 속성 종류

background	CSS - mix-blend-mode 속성 = 해당요소의 부모요소 배경색과의 '결합/혼합' 방법 지정 (= …

css	CSS - translate 속성 - 2D/3D 상 요소 위치 좌표 변경 지정 (= translate속성 =…

css	CSS - hanging-punctuation 속성 - 문장부호 위치 지정 (= hanging-punctua…

css	CSS - user-select 속성 - 사용자가 요소의 텍스트를 선택 가능한지 여부 지정 (= user-s…

grid	CSS - gap 속성(C) - (행/열) 사이의 간격 지정 (= gap속성 =갭속성) ※ (그리드/플렉스/…

text	CSS - text-underline-position 속성 - 텍스트 언더라인 위치 지정 (= text-un…

grid	CSS - Grid Item - 그리드 아이템

14/35

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

좌측 사이드 스크롤 고정

CSS 관련글

코딩동강 관련글

HTML 관련글

JavaScript 관련글

jQuery 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글