#1. Color
rgb(red, green, blue);
빛의 삼원색 표현
rgba(red, green, blue, alpha);
빛의 삼원색에 투명도까지 표현
hsl(hue, saturation, lightness);
빛의 색조,채도,밝기로 표현
hsla(hue, saturation, lightness, alpha);
빛의 색조,채도,밝기에 투명도까지 표현
opacity : 0 ~ 1;
투명도 조절. (주의) 요소 전체의 투명도를 전환함
transparent ;
투명하게
#2. Selector
선택자selector{속성property : 값value;}
속성 중에 계산식이 필요할 경우
calc()함수를 속성의 값으로 넣음
ex) left:calc(100% - 135px);
*{}
전체 선택자, 애스터리스크 (우선순위 0점)
p{}**
element선택자 ( 우선순위 1점)
#id{}
id선택자 (우선순위 10점)
.class{}
class선택자 (우선순위 100점)
.classA .classB{}
하위 선택자 : classA 아래에 있는 모든 classB 선택
.class, .classB{}
다중 선택자 : classA와 classB 다중 선택
.classA>.classB{}
자식 선택자 : classA가 부모로 있는 classB 선택
:link{}
링크가 걸려 있을 때
:visitied{}
링크에 방문 했을 때
:hover{}
마우스가 올라가 있을 때
:active{}
마우스로 클릭하고 있을 때
:focus{}
Tab키로 타겟팅 되어 있을 때
:target{}
앵커링크(a)를 클릭해서 연결되는 요소를 선택
:first-line{}
요소의 첫 줄에 있는 컨텐츠 선택 (반응형)
:first-child{}
첫번 째 자식 요소를 선택
:nth-child(n){}
앞에서 n번째 자식 요소를 선택
:first-of-type{}
해당 타입의 첫번 째 요소를 선택
:nth-of-type(n){}
같은 타입 중 n번째 자식 요소를 선택
:only-child{}
유일한 자식요소 선택
:first-letter{}
요소의 첫 글자만 선택
:last-child{}
마지막 자식 요소를 선택
:nth-last-child(n){}
뒤에서 n번째 자식 요소를 선택
:last-of-type{}
해당 타입의 마지막 요소를 선택
:nth-last-of-type(n){}
같은 타입 중 n번째 자식 요소를 선택
:one-of-type{}
해당 타입 중 유일한 요소 선택
타입(요소)가 여러가지 일 경우에는 of-type을 이용하는 것이 좋음
- (n) : n번 째 / (3n) : 3의 배수 / (odd): 홀수 / (even): 짝수
:empty{}
빈 항목 선택자 (텍스트, 공백 없어야 함)
.classA+.classB{}
인접형제 선택자 : classA에 가장 가까운 classB를 선택
.classA~.classB{}
형제 선택자 : classA뒤에 있는 모든 classB를 선택
div[title]{}
속성 선택자 : title이라는 속성을 가진 모든 div를 선택
- [속성^=”속성 값 시작”]{} / [속성$=”속성 값 마지막”]{} / [속성*=”속성 값 포함”]{}
#3. Background
background: color url(image path) repeat 100% 100% fixed;
기업에서는 리소스 사용량을 위해 이모지를 한 곳에 저장하여 위치에 맞춰서 사용(sprite 기법)
배경 색상, 이미지 경로, 반복 여부, 이미지 위치 순으로 한번에 사용 가능
이미지를 쉼표(,) 를 사용해서 두개 이상 적용 가능
linear-gradient ( to direction, color1, color2 );
선형 그라디언트 색상, 작성하는 방향의 반대에서 시작함, 각도로 작성 가능(x+축이 0도 기준)
radial-gradient ( color1, color2 );
radial-gradient ( circle, color1, color2 );
원형 그라디언트 색상, 중앙에서 시작함, 정원 적용 시 circle 추가
radial 모양 circle,ellipse 기본값, 위치 at 30% 30%
radial-gradient ( closest-side at per% per%, color1, color2, … );
radial-gradient ( closest-corner at per% per%, color1, color2, … );
원형 그라이언트 시작 위치를 지정 하고 가까운 사이드/코너까지 채움
radial-gradient ( farthest-side at per% per%, color1, color2, … );
radial-gradient ( farthest-corner at per% per%, color1, color2, … );
원형 그라이언트 시작 위치를 지정 하고 먼 사이드/코너까지 채움
background-size: px(고정) / %(상대) / cover(채우기) / contain(가로맞춤);
백그라운드 이미지를 박스 크기에 맞춰 설정 가능
쉼표(,)를 통해 여러개의 이미지 사이즈를 조절 할 수 있음
resize: horizontal(가로), vertical(세로), both(가로/세로) ;
박스의 크기가 내용물 보다 작을 때 크기를 조절 할 수 있게 해주는 속성
overflow : hidden; 속성과 함께 사용 함
background-origin : padding-box(기본 값);
백그라운드 이미지의 위치를 지정 해주는 속성
- padding-box(패딩라인에 위치) / border-box(보더라인에 위치) / content-box(내용시작에 위치)
background-clip : border-box(기본 값);
백그라운드 컬러의 위치를 지정 해주는 속성
- padding-box(패딩라인에 위치) / border-box(보더라인에 위치) / content-box(내용시작에 위치)
#4. Text
기본 글꼴
16px, 100%, 1em, serif(명조), sans-serif(고딕)
글자 숨기기 공식
div{ text-indent: -9999px; overflow: hidden; }
color: ;
폰트 색상
font-size: ;
폰트 사이즈
font-weight: ;
폰트 굵기
font-family: ;
폰트 종류
text-indent: ;
텍스트 들여쓰기
line-height: ;
텍스트 줄간격 (1.5~1.6배가 가장 가독성 좋음)
letter-spacing: ;
텍스트 글자 간의 간격
word-spacing: ;
단어 간의 간격
text-decoration: ;
텍스트 꾸미기 none / underline / linethrouth / overline 등
text-align: ;
텍스트 가로방향 정렬 left / center / right / justify 등
vertical-align: ;
사진 옆 텍스트 세로방향 정렬 top / middle / bottom 등
text-transform: ;
- uppercase : 영문 소문자를 대문자로
- lowercase : 영문 대문자를 소문자로
- capitalize : 영문 첫글자만 대문자로
white-space: ;
- normal : 자동 줄 바꿈 (기본값)
- pre : 공백처리, html의 pre태그와 동일
- noWrap : 자동 줄 바꿈이 되지 않도록 설정
text-overflow: ;
- ellipsis : 말줄임표 (…)
- clip : 넘치는 텍스트 잘라버림
word-wrap : break-word;
철자가 긴 영문일 경우 자동 줄바꿈 해주는 속성 ex)이메일 주소
word-break : break-all;
텍스트 양쪽 정렬 시 여백이 이상할 때, 단어로 자동 줄바꿈 해주는 속성
#5. List
list-style-position: ;
inside / outside(기본값) : 리스트 위치
list-style-type: ;
- none : 없음
- disc(기본값) : 채워진 원
- circle : 빈 원
- square : 사각
- upper-alpha : 대문자 알파벳 순
- lower-alpha : 소문자 알파벳 순
- upper-roman : 대문자 로마자 순
- lower-roman : 소문자 로마자 순
list-style-image: url(이미지 경로) ;
이미지로 리스트 불릿 적용
#6. Border
border: width style color ; (ex, border: 1px solid black;)
테두리의 두께/스타일/색상 설정
- 주로 한번에 넣지만 아래처럼 따로 작성도 가능
- border-width: / border-style: / border-color
border-radius: R ;
테두리에 R값 지정 (한개의 값만 적용 시 모든 코너에 적용)
-
좌측 위 / 우측 위 / 우측 아래 / 좌측 아래 순으로 적용
-
8개의 구역으로 나누어서 적용도 가능
border-image: url(이미지 경로) x y (stretch / round / repeat)
이미지로 테두리 설정, 3X3 타입의 border이미지를 사용하여 박스의 테두리를 설정 함
- stretch : 늘리기
- round : 연속 채우기
- repeat : 반복하기
- 보더이미지 코드생성 사이트 : https://border-image.com/
outline : width type color;
border영역 외곽에 테두리를 한번 더 적용해주는 속성
- outline-offset : ; outline의 offset 값 적용 가능
#7. Box model
Box model
요소의 크기를 설정하고 테두리와 여백을 지정 함으로 써 위치와 공간의 속성을 적용
- width / height : 요소의 박스 가로 세로 크기 설정 (100% 설정 시 부모 크기 상속)
- border : 요소의 박스 테두리 설정
- padding : 요소의 박스 안쪽 여백
- margin : 요소의 박스 바깥쪽 여백
inline level은 padding-top이 적용되지 않음, block level 로 변경해야 함
박스모델의 실제 크기
요소(width,height) + 안쪽여백(padding) + 테두리(border) + 바깥쪽 여백(margin)
border-width 축약 작성법
- 4개: 상/우/하/좌 (시계방향)
- 3개: 상/좌우/하
- 2개: 상하/좌우
- 1개: 전체 동일
box-sizing : border-box;
border,padding 값이 실제크기에 포함되지 않음 (margin은 예외)
#8. Position
body는 기본으로 position:releative의 속성을 가지고 있음
position: ;
- absolute : 절대위치 (부모에 releative 속성이 있으면 부모의 위치를 따라감)
- releative : 상대위치(요소의 기본 위치)
- fixed : 고정위치 (스크린 기준), 레이어개념, 본문 위에 위치, 주변에 영향을 줌
- static : 기본 값(코드 작성 순)
- 자식에서 absolute 적용 시 부모의 위치를 따라감
- 애니메이션으로 움직임 만들 때에는 position:absolute 로 지정 할 것
offset값 지정
top / bottom / left / right : 0px
z-index: 0 ;
레이어 순서 지정, 큰 수가 맨 위에 나타남
자식요소가 float된 경우, 부모요소의 높이 지정 방법 (공식)
div:after{ content:””; display: block; clear: both; }
:after{} / :before{}
가상의 콘텐츠를 뒤쪽이나 앞쪽에 추가 할 수 있는 선택자로 content속성에 원하는 문자열을 지정할 수 있음
float: left / right / both
요소를 나란히 위치 지정 가능, 동일한 float속성 적용 시 중첩 형식으로 쌓임
clear: both;
위치상 위 요소가 정렬(flaot) 되었을 때 무시하고 제 자리에 있도록 설정
overflow: ;
- hidden : 부모 밖에 있는 요소를 숨김
- visible : 부모 밖에 숨어있는 요소를 보이게 함
요소를 중앙에 위치 시키는 방법
position : absolute;는 margin:0 auto; 가 안됨
- position : absolute; left:calc(50% - 가로1/2px); top:calc50% - 세로1/2px);
- position : absolute; left:50%; top:50%; margin-left:-가로1/2px; margin-top:-세로1/2px;
- position : absolute; left:50%; top:50%; transform:tranlate3d(-50%,-50%,0);
#9. Shadow
box-shadow: x y blur (spread) color (, inset x y blur color) ;
요소의 박스 외측 그림자 스타일 적용 (내측 적용 시 ,inset 속성 추가)
text-shadow: x y blur (spread) color (, x y blur color, x y blur color) ;
텍스트에 그림자 스타일 적용 (쉼표로 중첩해서 여러개의 그림자 적용 가능)
- spread : 복제 시 확대(+) / 축소(-) 를 사용 하여 빈 공간을 채울 수 있음
#10. Web font
사용자가 웹에 접속 했을 때 코딩에 사용한 폰트를 볼 수 있도록 해주는 기능 (사용자가 자동으로 웹 폰트 다운)
@font-face{}
@font-face{ font-family: roboto; src: url(Roboto/Roboto-Regular.ttf); } .text1{ font-family: roboto; }웹에서 사용할 폰트를 선언 하고, CSS의 font-family로 동일한 이름으로 사용 가능
폰트 API
폰트 사이트에서 원하는 폰트를 찾아 API로 연결
사용하기 간편한 장점이 있지만, API를 사용하는 것이라 사용자의 폰트 다운로드 시간 발생HTML에 외부 링크 연결해서 사용하는 법 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&display=swap" rel="stylesheet">CSS내에 직접 연결해서 사용 하는법 @import url('https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&display=swap');
#11. Column
column-count : ;
나눌 단의 개수 속성 ex) column-count : 3; : 단을 3개로 나눔
column-gap : px;
나눈 단 간의 갭 속성
column-rule : width type color;
단 사이의 구분 선 적용 속성
#12. Transform & Transition
transform: ; (모든 속성 한 번에 적용 가능)
개체 이동, 회전, 확대/축소, 기울임 등의 기능
- rotate(deg) : 각도 지정 하여 회전
- scale(배수) : 배수 지정하여 확대/축소, 쉼표로 가로(x)세로(y) 순으로 따로 지정 가능
- skew(Xdeg, Ydeg) : 기울임, 값이 하나만 있으면 가로(x)축으로만 적용 됨
- translate(Xpx,Ypx) : 개체 이동, 값이 하나만 있으면 가로(x)축으로만 적용 됨
inline요소에는 기본적으로 transform 적용 불가능하지만 아래 방법으로 적용이 가능함
- display : inline-block 속성 추가
- position 속성 추가
- float 속성 추가
transform-origin: ;
개체의 중심 축을 지정
- 기본값은 center center
- left top / right top / left bottom / right bottom
transition: property duration timingfunc delay;
개체가 호버되거나 변화 기능이 필요할 때 사용 (원본에 적용 해야 함)
- 쉼표를 통해 두 개 이상의 속성을 변경 가능
ex) transition: color 1s ease 0s, background 1s ease 0s;
- property : 선택할 속성 (all / background / color / height / width / transform…)
- duration : 시작부터 끝 까지의 시간 (s)
timingfunc :
linear(일정한간격)
ease(가속시작-감속끝)
ease-in(천천히시작-가속끝)
ease-out(최고속도시작-감속끝)
ease-in-out(정속시작-최고속도-감속끝)
cubic-bezier(직접속도조절)- delay : 지정한 시간만큼 지난 후 작동 (s)
perspective: px; (transform 3D)
2차원 공간(x,y)으로만 구성 되어 있는 웹에 3차원 공간(x,y,z)을 설정 할 수 있음, 부모에 지정 해야 함
transform-style : preserve-3d;
자식요소에 3D속성을 그대로 전달
#13. Animation
animation : name duration timing-func delay interaction-count direction;
애니메이션 적용 (transition과 다르게 웹에 접속 시 바로 실행)
- CSS에 animation속성만 따로 지정도 가능 함
ex) div.jelly{animation-delay: -0.8s;}**
@keyframes name{
from(0%){모션 시작의 css 설정}
to(100%){모션 끝의 css 설정}
- name : 모션이름
- duration : 시간 (0~100%까지의 실행속도를 초단위로 설정, 1s=1000ms)
- timing-func : 이동 중 가속도 (transition과 동일)
- delay : 지연시간
- interaction-count : 반복횟수 (0~100%까지의 반복횟수 지정, 무한반복은 infinite)
- direction : 진행방향 (normal: 0~100%반복진행, alternate: 0~100% 후 100%~0반복, reverse)
- fill-mode : 애니메이션이 시작되거나 끝난 후의 효과 (forwards, backwards, both, none)
- steps() : 애니메이션 동작 지정
#14. Media query 반응형 웹
크기 정의
항상 부모의 크기가 기준, 부모는 무조건 100%
- ( 자식/부모 ) x 100 = 자식%
- 부모% / 자식% = 자식의 가로%
Media query 작성법
1. 기본 구조 CSS 작성 (최대 스크린 기준)
2. 스크린 사이즈 구분
3. 기존 작성한 CSS중 사이즈에 따라 변경될 속성 만 복사
4. 변경될 속성들을 [변경] 해야 함. 삭제하면 기존 코드 속성들이 적용 됨
반응형 웹 디자인의 기초
/* PC크기 : 1280px ~ */ @media screen and (min-width:1280px) { div{background: red;} } /* Tablet크기 : 768px ~ 1279px */ @media screen and (min-width:768px) and (max-width:1279px) { div{background: green;} } /* Mobile크기 : ~767px */ @media screen and (max-width:767px) { div{background: blue;} }@media screen and (최소/최대 해상도의 크기) { css 코드 }
- 기기의 해상도에 따라 CSS를 다르게 설정 할 수 있음
PC크기 : 1280px ~ / Tablet크기 : 768px ~ 1279px / Mobile크기 : ~ 767px
Mostly fluid
/* ~해상도 1024px : PC크기 */ @media screen and (max-width:1024px) { #wrap{width: 90%;} } /* ~해상도 800px : Tablet크기 */ @media screen and (max-width:800px) { #wrap{width: 100%;} } /* ~해상도 500px : Mobile크기 */ @media screen and (max-width:500px) { #box_b,#box_c{float: none; /* 가로가 500 이하로 내려가면 float 해제 */ width: 100%; } }해상도의 크기에 따라 요소의 가로값과 float을 조작 가능 함
Column drop
#box_a{float: left; width: 30%; height: 400px; background: #fcb354;} #box_b{float: left; width: 50%; height: 400px; background: #f1779e;} #box_c{float: right; width: 20%; height: 400px; background: #24bbaf;} /* 해상도 줄어들 때 일렬로 병렬 되어 있던 요소 중 한 요소를 밑으로 떨어트리는 법 */ /* 방법 1 */ @media screen and (max-width:1024px) { #box_b{width: 70%;} #box_c{float: none; width: 100%; /* 여기까지는 밑으로 내려가지 않음 box_a와b가 float되어있기 때문 */ clear: both; /* clear: both; 속성으로 끌어내림 */ } } /* 방법 2 */ @media screen and (max-width:1024px) { #box_b,#box_c{float: none; width: 100%; } }해상도의 크기에 따라 일렬로 병렬 되어 있던 요소 중 원하는 요소를 밑으로 내림
- float되어 있는 모든 요소를 해제 하고, 가로 크기를 100%로 지정 한 후, 올라가있는 요소를 끌어 내리기 위해서 clear:both; 속성을 추가 함
Layout shifter
#wrap{width: 1000px;margin: 0 auto;} #box_a{float: left; width: 20%; height: 400px; background: #fcb354;} #box_b{width: 100%; height: 200px; background: #f1779e;} #box_c{width: 100%; height: 200px; background: #24bbaf;} /* 해상도 줄어들 때 한 개의 요소(주로 헤더)를 위로 올리는 법 */ @media screen and (max-width:1024px) { #wrap{width: 90%;} } @media screen and (max-width:800px) { #wrap{width: 100%;} #box_a{float: none; width: 100%; /* float 해제 후, 가로크기 100% 지정 하여 모든 요소 세로로 정렬 */ } }해상도 줄어들 때, 한 개의 요소(주로 헤더)를 위로 올릴 때 사용
float되어 있는 모든 요소를 해제 하고, 가로 크기를 100%로 지정 함
Tiny tweaks
#box_a{height: 400px; background: #f1779e;} .list{width: 80%; margin: 0 auto; padding-top: 50px;} .list li{float: left; width: 18%; margin: 1%; background: #fff;} /* li의 개수가 4개일 때 */ @media screen and (max-width:1024px) { .list{width: 95%;} .list li{width: 23%; margin: 1%;} } /* li의 개수가 3개일 때 */ @media screen and (max-width:800px) { .list li{width: 31.333%; margin: 1%;} } /* li의 개수가 2개일 때 */ @media screen and (max-width:500px) { .list li{width: 48%; margin: 1%;} }가로 정렬 되어있는 요소의 열 개수를 나눌 때 (4등분 / 3등분 등) 사용
Off canvas
#wrap{width: 1000px;margin: 0 auto;} #wrap_box{width: 100%;height: 1000px;background: #999;} #box_a{float: left; width: 30%; height: 400px; background: #fcb354;} #box_b{float: left; width: 40%; height: 400px; background: #f1779e;} #box_c{float: left; width: 30%; height: 400px; background: #24bbaf;} @media screen and (max-width:1024px) { #wrap{width: 100%;} } @media screen and (max-width:800px) { #wrap_box{width: 150%;} #box_a,#box_b,#box_c{width: 33.333%;} /* 실제크기 : 50% */ } @media screen and (max-width:500px) { #wrap_box{width: 300%;} #box_a,#box_b,#box_c{width: 33.333%;} /* 실제크기 : 100% */ }부모와 자식간의 크기 관계( 부모% / 자식% = 자식의 가로% )를 이용해서 숨겨놓기
#15. 기타 속성
appearance : none;
form이 가지고 있는 기본 모양의 초기화를 통해 모든 웹 브라우저에서 동일하게 보이도록 하는 속성
cursor : pointer;
마우스를 포인터를 링크가 걸린 것 처럼 표현 ( 실제 링크는 없음)
backface-visibility : hidden;
3D transform 회전 시 반짝임이나 뒷면을 숨김
@import url(*.css);
CSS내에서 다른CSS 불러오기
#16. CSS 구조 작성 순서
Layout 기본 구조
CSS 작성 순서
1. reset.css 불러오기 ( @import url(reset.css); )
2. common : body의 폰트, 색상, 배경 등 작성
3. webfont : 웹폰트 선언
4. layout : (구조 설정, 들여쓰기로 구조 확인하기 쉽게 설정)#wrap{} #header{} #container{} .content1{} .content2{} .content3{} #footer{}
- wrap / header / container / footer 의 사이즈 및 위치 설정
- 대부분의 웹사이트는 header/footer는 높이가 동일함, container는 높이가 각각 다름(높이지정불가)
-container의 content를 float시 옆으로 안올 경우 width값 지정 할 것
- 웹 상 왼쪽 위부터 스타일 작성
- 작성 중 동일한 속성 있을 시 그룹 선택자로 적용
