1.display
1.1 block
- 항상새로운 라인에서 시작
- width:100% 기본설정
- width, height, margin, padding 설정가능
1.2 inline
- content의 폭만큼 차지
- width, height, margin, margin-tpo,margin-bottom 속성을 사용할수가 없다. 상,하 여백은 line-height로 지정
- inline 레벨 안에 block 레벨을 넣을 수 없다. 보통 block 안에 inline 포함
1.3 inline-block 레벨 요소
block 특성과 inline 특성을 짬뽕
inline 차이점
- 기본적으로 inline 요소와 흡사 줄을 바꾸지 않고 content 너비만큼 가로폭을 차지한다.
- width, height, margin, padding 모두 사용가능
2.visibility
해당 태그를 감출지 말지를 정한다.
3.opacity
opacity 요소의 투명도를 정의 0.0~1.0 0.0은 투명 1.0은 불투명이다.
4.position
position 프로퍼티는 요소의 위치를 정해주며 top,bottom,left,right 으로 위치를 설정해줄수 있다.
4.1 static(기본위치)
position 을 따로 지정하지 않으면 기본값이다.
부모 요소의 위치를 기준으로한다.
top,bottom,left,right 속성 사용 불가
4.2 relative(상대위치)
static 를 기본위치로 좌표 프로퍼티(top,bottom,left,right) 사용가능
4.3 absolute(절대위치)
static를 제외한 가장 가까운 조상요소를 기준으로 좌표 프로퍼티만큼 이동한다.
즉 relative,absolute,fixed 로 지정된 가장 가까운 조상요소를 기준으로한다.
조상이 없거나 static 인 경우 body를 기준으로한다.
또한 기존 요소가 존재할경우 덮어씌운다. (부유)
4.4 fixed(고정위치)
부모,조상 상관없이 viewport 기준으로 좌표를 이동한다.
스크롤을 하더라도 항상 같은자리에 위치
<div id="static">
<div id="relative">relative top:50 left:50</div>
</div>
<div id="absolute">absolute top:150 left:150</div>
노란 박스 relative 박스는 노란색 static을 기준으로 위치를 이동했으며 absolute 는 조상요소에 위치 프로퍼티가 없기때문에 body를 기준으로 이동했다. 또한 부유효과로 relative 를 가린다.
5. z-index(우선순위?)
z-inex는 큰숫자로 지정할수록 화면전면에 출력
위에 relative 와 absolute 스타일 속성에 각각 z-index:1 z-index:0 을 주면 아래처럼 달라진다.
6.overflow
overflow 는 자식요소가 부모 요소의 영역을 벗어났을때 처리하는 방법
7.float
원래 목적은 이미지 주변을 텍스트가 자연스럽게 감싸기 위한 태그였다.
원래 목적과는 다르게 레이아웃을 잡는데 많이 이용된다.
float 의 속성값을 줘서 블록레벨 요소를 좌우로 배치 시킬수있다.
float : none(기본값) | left | right위에 사진에서는 img 파일에 float :left; 속성을 준 결과이다.
중앙정렬이 없으며 중앙정렬을 원하면 margin 을 이용해야한다.
margin : 0 auto;