CSS 레이아웃, 박스 모델, 배경, position
블록 레벨 요소 : 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 (자신이 속한 영역의 너비를 100% 차지함)
=>margin, width, height 속성을 정의하면 모두 적용됨.
인라인 레벨 요소 : 줄을 차지하지 않는 요소. 컨텐츠만큼 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.
=>상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않음.
| 블록 레벨 | <p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address> |
| 인라인 레벨 | <a>, <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button> |
display : 레벨 요소를 변경시켜줌
-block : 인라인 레벨 요소 -> 블록 레벨 요소
-inline : 블록 레벨 요소 -> 인라인 레벨 요소
-inline-block : 인라인 레벨 요소로 배치 + 블록 레벨 요소의 속성 추가(높이,너비 조정)
-none : 해당 요소를 화면에 표시하지 않음
div{ display: inline; }
a{ display: block; }
박스 모델
박스 모델 : 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨.
박스의 속성
content : 실제 내용이 표현되는 곳
padding : 콘텐츠와 테두리 사이의 여백(안쪽 여백)
border : 박스의 테두리 두께
margin : 테두리와 박스의 최종 경계 사이의 여백(바깥쪽 여백)
속성값의 개수에 따라 적용되는 위치
top → right →bottom → left순으로 적용
margin: 크기 | 백분율 | auto;
margin : top right bottom left;
margin : top right&left bottom;
margin : top&bottom right&left;
margin : top&bottom&right&left;
box-sizing : 박스의 크기를 어떤 것을 기준으로 계산할지 지정
-content-box : 콘텐트 영역만(디폴트)
-border-box : 테두리 포함
box-sizing: content-box | border-box | initial | inheritbox-shdow : 그림자 효과
-inset : 안쪽 그림자로 그려줌.
box-shadow : 수평거리 수직거리 [흐림정도] [번짐정도] [색상] [inset]
//여러개로 줄수도 있음
box-shadow: 10px 10px #BCE55C, 20px 20px #CEF279, 30px 30px #E4F7BA;
테두리
border : 표의 테두리 (한번에 묶어서) 지정
너비(border-width) : medium | thick | thin | length | initial | inherit
모양(border-style) : dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid | initial | inherit
색깔(border-color)
border: 너비 모양 색깔
border: 1px solid black;
border-style : 테두리 모양 지정
- dotted : 점선
- dashed : 약간 긴 점선
- solid : 실선
- double : 이중 실선
- groove : 3차원인 입체적인 선. border-color 속성값에 영향을 받음.
- ridge : 3차원인 능선효과가 있는 선. border-color 속성값에 영향을 받음.
- inset : 3차원인 내지로 끼운 선. border-color 속성값에 영향을 받음.
- outset : 3차원인 외지로 끼운 선. border-color 속성값에 영향을 받음.
- none : 테두리를 없앰.
- hidden : 테두리가 존재하기는 하지만 표현되지는 않음.
border-width : 테두리 두께 지정
- thin, medium, thick
border-color : 테두리 색상
border-radius : 테두리 둥글게 처리
border-radius: 크기 | 백분율
//원하는 꼭짓점만 둥글게
border-top-left-radius //왼쪽 위
border-top-right-radius //오른쪽 위
레이아웃
float : 요소를 왼쪽이나 오른쪽에 떠있게 만듦(텍스트와 어울리도록 배치)
float: left | right | none;
clear : float 속성을 무효화
-none: 설정 안한거임(디폴트)
-left: left를 해제
-right: right를 해제
-both: left, right 둘다 해제
clear : none | left | right | both
overflow : (컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면) 컨텐츠를 모두 포함할 수 있도록 요소의 크기가 커짐.
- auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됨.( 필요에 따라 가로, 세로 별도로 추가될 수도 있다.)
- visible : 기본 값. 넘칠 경우 컨텐츠가 상자 밖으로 보여짐.
- hidden : 넘치는 부분은 잘려서 보여지지 않음.
- scroll : 스크롤바가 추가되어 스크롤할 수 있음.(가로, 세로 모두 추가 됩니다.)
z-index : 한 요소 위에 다른 요소를 쌓을 때 사용(속성값이 작을수록 아래에 쌓임)
#box1 { z-index: 3; }
#box2 { z-index: 2; }
#box3 { z-index: 1; }
position 속성
position : 속성;static : 정적 위치 설정(디폴트)
텍스트, 이미지, 표 등을 웹 문서의 흐름에 따라 배치하는 방법
블록 요소는 위에서 아래로 쌓이고, 인라인 요소는 같은 줄에 순서대로 배치
relative : 상대 위치 설정
정적 위치 값에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치하는 방법
absolute : 절대 위치 설정
웹 문서의 흐름과는 상관없이 전체 페이지를 기준으로 top, right, bottom, left의 속성을 이용하여 원하는 위치에 배치
fixed : 고정 위치 설정
창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있음
배경
background-color : 배경색 지정
background-clip : 배경을 적용할 범위 지정
-border-box : 가장 외곽(테두리)까지
-padding-box : 테두리를 뺀 padding까지만
-content-box : 내용부분만
background-clip: border-box | padding-box | content-box
background-image : 이미지를 배경으로 사용
background-image : url(파일경로)
background-repeat : 배경 이미지 반복 여부 및 반복 방향 지정
-repeat : 화면 가득 찰때까지 이미지를 가로와 세로로 반복(디폴트)
-repeat-x : 창 너비와 같아질 때까지 이미지를 가로로 반복
-repeat-y : 창 높이와 같아질 때까지 이미지를 세로로 반복
-no-repeat : 이미지를 한번만 표시(반복X)
background-repeat : repeat | repeat-x | repeat-y | no-repeat
background-position : 배경 이미지를 표시할 위치 지정(반복하지 않는 경우)
-수평위치 : left | center | right | 백분율(n% n%) | 길이값(npx npx)
-수직위치 : top | center | bottom | 백분율(n% n%) | 길이값(npx npx)
background-position : 수평위치 수직위치;
background-origin : 배경 이미지를 어느 영역부터 표시할지 지정
-border-box : 테두리 영역 부터(디폴트 왼쪽위)
-padding-box : 안쪽 여백(패딩) 영역 부터
-content-box : 내용 영역 부터
background-origin: border-box | padding-box | content-box
background-attachment : 배경 이미지를 고정
-scroll : 화면과 함께 같이 스크롤됨(디폴트)
-fixed : 화면이 스크롤 돼도 같은 위치에 고정
background-attachment: scroll | fixed
background-size : 배경 이미지 크기 조절
-auto : 원래 이미지 크기만큼 표시(디폴트)
-contain : 요소 안에 이미지가 다 보일 수 있는 최대 크기로 이미지를 확대, 축소(이미지 원본 비율 유지)
-cover : 요소를 완전히 채우도록 이미지를 확대, 축소(이미지 원본 비율 유지)
background-size : auto | contain | cover | 크기값(가로,세로) | 백분율
background : 배경 관련 속성을 줄여서 표기할 수 있음(순서는 무관)
background : url('images/bg4.png') no-repeat center bottom fixed;
배경 그라데이션
linear-gradient : 선형 그라데이션
-to bottom : 위에서 아래로 그라데이션을 만든다. (기본값)
-to top : 아래에서 위로
-to left : 오른쪽에서 왼쪽으로
-to right : 왼쪽에서 오른쪽으로
-ndeg : n도의 방향
background: linear-gradient(방향(각도), color1, color2, ...)linear-gradient( to bottom, #06f, white 80%, #06f )
//위에서 아래로, #06f으로 시작해서 80%지점에 흰색을 넣고 #06f로 그라데이션 한다.
radial-gradient : 원형 그라데이션 (중심부터 그라데이션 됨)
-모양 : circle(원형), ellipse(타원형)
-크기 : closest-side, closest-corner, farthest-side, farthest-corner(기본값)
-위치 : 키워드(left, center, right 중 하나, top, center, bottom 중 하나), 백분율
radial-gradient( 모양 크기 at 위치, color1, color2, ... )
background: repeating-radial-gradient(circle, white, #ccc 20%);