스타일 속성은 하나하나 외우는 것이 아니다. 익숙해지자!!
-
CSS3 단위
1. 키워드: none ...
2. 크기 단위: %, em (배수 단위) --> 상대적, px --> 절대적
* 태그 전체에 절대적인 크기를 지정하고, 일부를 상대적으로 변경하는 기법을 많이 사용
3. 색상 단위: 키워드, HEX, RGB, RGBA, HSL, HSLA (A는 투명도를 의미)
4. URL 단위: url() 함수 내부에 경로 입력 -
가시 속성
* 태그가 화면에 보이는 방식을 지정하는 속성
display
none: 태그를 화면에서 보이지 않게 만듦
block: 태그를 block 형식으로 지정
inline: 태그를 inline 형식으로 지정
inline-block: 태그를 inline-block 형식으로 지정inline vs inline-block
inline: width, height 속성 적용 x, margin 속성이 좌우로만 적용
inline-block: width, height 속성 적용, margin 속성이 상하좌우로 적용visibility
visible: 태그를 보이게 만듦
hidden: 태그를 보이지 않게 만듦
collapse: table 태그를 보이지 않게 만듦visibility: hidden vs display: none
visibility:hidden --> 공간 차지
display:none --> 공간 차지 x, 제거opacity
0 ~1 사이로 지정: 0은 투명, 1은 불투명
-
박스 속성
* 웹 페이지의 레이아웃을 구성할 때 가장 중요한 스타일 속성
width, height
글자를 감싸는 영역의 크기를 지정하는 스타일 속성
margin, padding
공식
전체 너비 = width + 2 * (margin + border + padding)
전체 높이 = height + 2 * (margin + border + padding)
상, 하, 좌, 우 따로따로 적용이 가능하다.box-sizing
--> width 속성과 height 속성이 차지하는 범위 지정
content-box: default 값
전체 너비 = width + 2 * (margin + border + padding)
전체 높이 = height + 2 * (margin + border + padding)
border-box: width, height 속성이 테두리를 포함한 영역의 크기를 지정
전체 너비 = width + 2 * margin
전체 높이 = height + 2 * margin -
테두리 속성
border-width, border-style, border-color
border-width: 테두리의 너비
border-style: 테두리의 형태
border-color: 테두리의 색
--> 3가지 border 속성을 한 번에 사용할 수 있음 (width, style, color 순)border-radius
--> 테두리를 둥글게 만듦
-
배경 속성
background-image
--> 배경에 넣을 그림을 지정, url 단위 사용
background-size
--> 배경의 너비와 높이를 지정, 첫 번째 위치는 너비, 두 번째 위치는 높이
background-repeat
repeat: 이미지가 패턴을 이룸
repeat-x: X축 방향으로 이미지 반복
repeat-y: Y축 방향으로 이미지 반복
no-repeat: 반복 xbackground-attachment
--> 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지 지정
scroll: default 값, 스크롤에 따라 배경 이미지가 함께 이동
fixed: 스크롤 내려도 배경 이미지 고정background-position
키워드: bottom, left, right, top...
X축크기: 절대적 위치 설정
X축크기 Y축크기: 절대적 위치 설정 -
폰트 속성
* 글자와 관련된 스타일 속성
font-size
--> 글자의 크기를 지정하는 스타일 속성 (숫자, 키워드로 설정)
font-size: 32px; <!-- 숫자로 사이즈 지정 --> font-size: large; <!-- 키워드로 사이즈 지정 -->font-family
--> 폰트를 지정하는 스타일 속성
* 대표 폰트
Serif, Sans-seriffont-family: '폰트명', sans-serif; <!-- 첫 번째 폰트가 존재하지 않으면 sans-serif 적용 -->font-style, font-weight
--> 폰트의 기울기, 두께 조정하는 스타일
* font-style 속성 키워드
inherit, initial, italic, normal, oblique, unset
* font-weight 속성 키워드
숫자, bold, bolder, inherit ....line-height
--> 글자의 높이 지정, 글자를 수직 중앙 정렬할 때 사용
CSS는 block 형식을 가지는 태그를 수직 정렬할 수 없다. 따라서, 부모 태그의 높이와 같은 높이의 line-height를 지정해주면 수직 중앙 정렬이 가능하다.text-align
--> 글자를 정렬하는 속성 (수평 정렬)
inline 요소는 너비가 존재하지 않으므로 text-align 속성을 적용할 수 없다.text-decoration
-
위치 속성
요소의 위치를 설정하는 2가지 방법
1. 절대 위치 좌표: 요소의 X,Y 좌표를 설정해 절대 위치 지정
2. 상대 위치 좌표: 요소를 입력한 순서를 통해 상대적 위치 지정position
--> 태그의 위치 설정 방법 변경
static: 태그가 위에서 아래로 순서대로 배치 (상대)
relative: 초기 위치 상태에서 상하좌우로 위치 이동 (상대)
absolute: 절대 위치 좌표 설정 (절대)
fixed: 화면을 기준으로 절대 위치 좌표 설정 (절대)
position: absolute
특정 태그에
position: absolute속성을 걸어주면,position: relative속성을 가진 가장 가까운 부모를 기준으로 절대적으로 이동한다.body태그는 기본적으로position: relative속성을 지니고 있다.<div class= "box red"></div> <div class= "box green"></div> <div class= "box blue"></div>.box { width: 100px; height: 100px; position: absolute; } .red { background-color: red; left: 10px; top: 10px; } .green { background-color: green; left: 50px; top: 50px; } .blue { background-color: blue; left: 90px; top: 90px; }--> 해당 코드는
body태그를 기준으로 속성에 지정한 만큼 절대적으로 이동
* HTML은 기본적으로 뒤에 입력한 태그가 상위에 올라가는 특성을 지님z-index
--> 태그가 앞에 오는 순서를 변경, 숫자가 클수록 앞에 위치
위치 속성과 관련된 공식
1.
position속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않는다.
2. 자손의position속성에absolute키워드를 적용하면 부모는height속성을 사용한다. --> 부모 태그가 영역을 차지하게 만들 수 있음.
3. 자손의position속성에absolute키워드를 적용하면 부모의position속성에relative키워드를 적용한다. --> 자손 태그가 부모의 위치를 기준으로 절대 좌표를 설정overflow
--> 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성
hidden: 영역을 벗어나는 부분을 보이지 않게 만듦
scroll: 영역을 벗어나는 부분을 스크롤로 만듦
부모 속성에 걸어준다.float (중요 !!)
--> 부유하는 대상을 만들 때 사용하는 스타일 속성
웹 페이지의 레이아웃 만들 때 사용
left: 태그를 왼쪽에 붙임
right: 태그를 오른쪽에 붙임
float 속성을 사용한 수평 정렬
float: left: 왼쪽으로 수평 정렬 ex) 1,2
float: right: 오른쪽으로 수평 정렬 ex) 2,1
float 속성을 사용한 레이아웃 구성
* 자손에
float속성을 적용하면 부모의overflow속성에hidden키워드를 적용
* 대표적인 웹 레이아웃<div id="header"></div> <div id="navigation"></div> <div id="wrap"> <div id="aside"></div> <div id="section"></div> </div> <div id="footer"></div>body 태그 중앙 정렬
body { width: 960px; margin: 0 auto; }wrap 태그 내부에 aside, section 나누기
#aside { width: 200px; float: left; } #section { width: 200px; float: right; } #wrap { overflow: hidden; } <!-- wrap과 footer 나누기 위하여 사용 --> -
clear: both를 사용한 레이아웃
--> aside와 section을 wrap으로 따로 감지 않는다.
가로로 자를 수 있는 부분에<div class="clear"></div>를 넣어준다.
css 속성으로 clear 클래스 태그에 both 키워드를 걸어준다.<div id="header"></div> <div id="navigation"></div> <div class="clear"></div> <div id="aside"></div> <div id="section"></div> <div class="clear"></div> <div id="footer"></div> <div class="clear"></div>body { width: 960px; margin: 0 auto; } <!-- 중앙 정렬 --> .clear { clear:both; } <!-- 행으로 sector를 나눔 #aside { float:left; width:260px; } #section { float: right; width: 700px; } -
그림자 속성
text-shadow
text:shadow: 오른쪽 아래 흐림도 색상box-shadow
---> 박스에 그림자 부여하는 속성, 키워드는 text-shadow와 일치
* 쉼표를 사용하여 여러 개의 중첩 그림자를 사용할 수 있음. -
그레이디언트
--> 2가지 이상의 색상을 혼합해서 채색하는 기능
linear-gradient(각도, 색상1 위치, 색상2 위치) <!-- linear-gradient 함수 -->
