1. position
1.1 static —> default
위치가 지정된 것이 아님
1.2 relative
top, right, bottom, left 등을 지정하면 위치가 조정된다.
1.3 fixed
페이지가 스크롤 되더라도 늘 같은 곳에 위치.
ex).class{
position:fixed;
bottom:0;
right:0;
위와 같이 설정 할 경우 맨 오른쪽 아래에 위치 고정.
1.4 absolute —> 가장 가까운 relative 객체에 위치 지정됨.
ex)
2. display ( inline, block ,inline-block)
2.1 inline
단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있다. block 처럼 한 줄을 다 사용하지는 않는다.
width/height 적용불가
margin/padding 적용불가
line-height 원하는 대로 적용 불가
ex) span, a
2.2 block
새 줄에서 시작해 좌우로 최대한 늘어난다. 침범X
ex)div, p, header, footer, section
2.3 inline-block
line과 block 을 mix한 느낌. (중요한 성질 자체는 inline과 비슷)
inline의 단점들을 커버한다.
width/height 적용가능
margin/padding 적용 가능
line-height 적용 가능
block 을 inline 으로 바꾸는 법
—> display:inline 으로 설정하게 되면 block 속성이 inline 으로 바뀌게 된다.
디테일한 보정이 필요할 때 inline-block
text내의 특정 부분 스타일 등 단순한것 —> inline
3.float
레이아웃을 잡는데 사용. 이미지 주위를 텍스트로 감싸기 위해 사용
위 그림은 float:right; 를 적용한 모습.
float:left; 를 적용하게 되면 사진이 왼쪽으로 가고 텍스트가 사진 주위를 둘러 싸게 됨.
4. 그 외
1) 리스트
ul, ol 내부에 li가 있어야 한다.
2) 상속
a div .b .pre span{
background-color: green;
}
a 태그 밑에 div 밑에, b 클래스 밑에, pre클래스 밑에 span 태그에 적용.
3) 테이블
행(row) :
각각 셀은
4)Media query
반응형 웹에서 자주 사용.
다른 미디어 종류(스마트폰,PC)에 따라 다른 레이아웃 작성
5)포인터모양변경 (cursor 모양 변경)
button:hover {
cursor: pointer;
} 6)max-width
일반 width는 창이 작아지면 짤리게 되는데 max-width 사용 시, 잘리지 않고 영역이 작아짐.
<레이아웃 정보>