5. CSS 고급활용

목차

1. 배치

HTML 태그가 출력되는 위치를 지정하는 것

 

블록박스와 인라인 박스

html 태그의 종료: 블록 태그, 인라인 태그

 

블록태그: <p> <hl> <div> <ul>

코드를 블록박스로 다룸

항상 새 라인에서 시작

옆에 다른 태그 배치 불가

 

인라인태그: <span> <a> <img>

인라인 박스로 다룸

블록 내에 배치

옆에 다른 태그 배치 가능

 

박스의 유형 제어, display

default 박스 유형 무시하고 html 태그 박스 유형 다르게 지정 가능

display:block
display:inline
display:inline-block

display:block	display:inline	display:inline-block
항상 새 라인에서 시작	새 라인에서 시작X. 항상 inline에 있음	새라인에서 시작불가. 라인안에 있음
블록 박스 내에만 매치	모든 박스 내 배치 가능	모든 박스 내 배치 가능
옆에 다른 요소 배치 불가	옆에 다른 요소 배치 가능	옆에 다른 요소 배치 가능
width 와 height로 크기 조절 가능	크기조절 불가능	크기조절 가능
padding, border, margin 조절 가능	margin-top, margin-bottom 조절불가	padding, border, margin 조절 가능

 

박스의 배치, position

normal flow: 웹페이지에 나타난 순서대로 html 태그 배치

position 이용해 normal flow 무시 가능

 

정적배치: static(디폴트)

left, top, bottom, right 프로퍼티 값의 영향 없음

width, height 영향 없음

 

상대배치: relative

기본 default 위치에서 left, top, bottom, right 프로퍼티의 값만큼 이동(상대배치)

박스 중앙으로 가는 방향이 +

top, left가 우선순위

 

절대배치: absolute

left, top, bottom, right 프로퍼티

부모 태그 안에서의 상대좌표

 

고정배치: fixed

스크롤하거나 브라우저 크기 변경해도 html 태그를 뷰포트(브라우저의 보이는 영역)의 특정 위치에 고정

 

유동배치: float:left 또는 float:right

태그를 항상 오른편이나 왼편에 배치

광고, 공지에 적합

<style>
	#float{
		float:right;
		border: 1px solid darkgray;
		width: 9em;
		padding:0.25em;
		margin:1em;}
</style>

<p id="float">내용</p>

수직으로 쌓기, z-index

html 태그들을 z축에 따라 수직으로 쌓음

값이 클수록 위에 쌓임

#spadeA{z-index:3; left:10px; top:20px;}

 

html 태그 숨길지 보일지, visibility

visibility : visible/hidden

 

콘텐츠 자를지 말지, overflow

html콘텐츠가 width, height 프로퍼티에 주어진 태그의 크기를 넘어가는 경우 콘텐츠를 자를지 말지

블록 태그에만 적용

overflow 사용하려면 width, height 설정되어 있어야함

overflow:visible | hidden | scroll | auto

visible: 잘림없이 태그 영역 넘어서 출력(디폴트)

hidden: 넘어가는 콘텐츠 잘라냄

scroll: 스크롤바 부착하여 콘텐츠 출력

auto: 콘텐츠가 박스 height 넘어가면 스크롤바 자동 생성

 

 

2. 리스트 꾸미기

리스트 마커의 종류, list-style-type

list-style-type: circle | square | none | upper-roman | lower-alpha | decimal ...

 

리스트의 이미지 마커 생성, list-style-image

list-style-image:url("src.png");

 

리스트 마커의 위치, list-style-position

list-style-position:inside | outside ;

 

한번에 리스트 꾸미는 단축 프로퍼티, list-style

list-style : list-style-type list-style-position list-style-image;

 

3. 표 꾸미기

표 테두리 제어, border

디폴트는 0으로 안보임

 

테두리 합치기

border-collapse: collapse;

 

셀 크기 제어, width, height

홀수, 짝수번째 행만 적용하기: nth-child(even/odd)

tbody tr:nth-child(even){
	background:aliceble;
    }

 

4. 폼 꾸미기

input[type=text]{
	color:red;
    border: 2px solid skyblue; }
    
input[type=text]:hover{}

input[type=text]:focus{}
    
<label>
	이름: <input type="text" placeholder="이름을 입력해주세요">
</label>

 

5. CSS 스타일로 태그에 동적 변화 만들기

애니메이션, 전환, 변환 가능

 

1.애니메이션: 시간별 애니메이션 장면 작성

@keyframes 이용

animation-name

animation-duration

animation-iteration-count

 

2. 전환

css프로퍼티 값 변할 때 값 변화를 서서히 진행시켜 애니메이션 효과

한번만 발생

p{transition: 전환프로퍼티 시간;}

 

3. 변환

텍스트, 이미지를 회전, 확대

회전각도의 단위:deg

 

transform 프로퍼티

div{
    transform:rotate(20deg);}

이외에 translate(x,y), translateX(n), scale(w,h), scaleX(n), rotate(angle), skew(x-angle, y-angle), skewX(angle)

 

다중 변환

transform 프로퍼티에 여러 변환 함수들 나열