div 속성 사용하기

<div style="top:80px; left:100px; width:200px; height:300px; position: fixed; border: 3px solid blue">

</div>

 

top : ​ 화면 위를 기준으로 떨어진 위치

left : 화면 왼쪽을 기준으로 떨어진 위치

width : 레이어 너비

height : 레이어 길이

position : 레이어 위치

- fixed : 고정 (브라우저 화면에 고정되어 스크롤을 내려도 같은위치에 있음)

- absolute : 절대적 (fixed와 비슷하나 스크롤을 내리면 따라서 이동)

- relative : 상대적

border : 레이어 선

solid : 레이어 선 색

z-index : 레이어 순서 (숫자가 높을수록 맨 위에 나타남)

background : 레이어 배경색

font-family : 폰트 종류

font-size : 폰트 크기

padding-top : 레이어 위를 기준으로 떨어진 내용부분 위치

padding-left : 레이어 왼쪽을 기준으로 떨어진 내용부분 위치

padding-right : 레이어 오른쪽을 기준으로 떨어진 내용부분 위치

padding-bottom : 레이어 아래를 기준으로 떨어진 내용부분 위치

overflow : 내용 넘쳤을때 (visible : 지정한 레이어 크기를 무시하고 다 보여줌, hidden : 레이어 크기 만큼만 보임 

                                   scroll : 수평, 수직 스크롤, auto : 내용 넘치는 쪽에 스크롤)

*

display : inline = 기본값 (요소를 inline 요소로 표시, 앞뒤 줄바꿈 되지 않음)

display : block = 요소 앞뒤로 줄바꿈 됨

display : none = 박스 생성되지 않음 (공간을 차지하지 않음)

display : inline-block = 요소는 inline, 내부는 block 표시 (박스 모양이 inline 처럼 옆으로 늘어섬)

*

visibility : visible = 기본값 (요소 그대로 보임)

visibility : hidden = 요소가 보이지 않지만, 공간을 차지하기 때문에 투명하게 남음

visibility : collapse = <table> 태그에서만 사용가능 (선택 테이블의 행과 열을 숨김) 

→ 크롬/익스플로러 브라우저 실행 화면에서 F12 를 누르면 개발자모드가 열려, 속성값을 바꾸며 실시간으로 확인가능하다!