1.display

poeimaweb.png

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

해당 태그를 감출지 말지를 정한다.

poeimaweb.png

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>

이미지 12.png
노란 박스 relative 박스는 노란색 static을 기준으로 위치를 이동했으며 absolute 는 조상요소에 위치 프로퍼티가 없기때문에 body를 기준으로 이동했다. 또한 부유효과로 relative 를 가린다.

5. z-index(우선순위?)

z-inex는 큰숫자로 지정할수록 화면전면에 출력
위에 relative 와 absolute 스타일 속성에 각각 z-index:1 z-index:0 을 주면 아래처럼 달라진다.

이미지 13.png

6.overflow

overflow 는 자식요소가 부모 요소의 영역을 벗어났을때 처리하는 방법

이미지 14.png

7.float

원래 목적은 이미지 주변을 텍스트가 자연스럽게 감싸기 위한 태그였다.

벨로그.png

원래 목적과는 다르게 레이아웃을 잡는데 많이 이용된다.
float 의 속성값을 줘서 블록레벨 요소를 좌우로 배치 시킬수있다.

float : none(기본값) | left | right

위에 사진에서는 img 파일에 float :left; 속성을 준 결과이다.

중앙정렬이 없으며 중앙정렬을 원하면 margin 을 이용해야한다.

margin : 0 auto;

참고
wecode
PoiemaWeb