CSS 강좌정리
1. 환경설저
1) node 설정
https://nodejs.org/ 다운받고 설치(기본설치)
cmd창에서 node -v 입력하고 버전 확인.
2) VSC 설정
- https://code.visualstudio.com/ 다운받고 설치(기본설치)
- VSC 확장팩 설치
3) 워크스페이스 작성
2. CSS 역할 및 버전
역할: html에 시각적 표현을 지정해서 스타일 관리.
css1: 1996년
css2: 1998년
css3: 현재까지도 개발중. ( 표준화 버전 )
3. CSS 적용 방법 3가지
1)인라인 스타일 ( inline style )
- html내의 시작태그에서 style 속성으로 스타일을 지정하는 방법.
예> <p>Hello1</p>
<p style="color:red">Hello2</p>
<span style="color:red">Hello3</span>
2)내부 스타일 ( internal style )
- html내의 <head>에 <style> 태그이용해서 스타일을 지정하는 방법.
예>
# a.html
<head>
<style>
p, span{
color:red;
}
</style>
</head>
<body>
<p>Hello2</p>
<span>Hello3</span>
</body>
- <style>태그의 css 속성들이 길어질 수 있음.
다른 html에서 동일한 css일지라도 중복 정의해야 된다.
3)외부 스타일 ( external style )
- html외부에 *.css 가진 외부 파일로 작성하고
필요한 html에서 불러다가 사용. ( <link> 태그 이용 )
- 같은 *.css 파일을 사용하는 여러 html 페이지는 맨 처음 요청한 페이지에서
다운로드 받은 css 파일을 웹브라우저에 저장(캐시메모리)해두고
다른 페이지에서 재사용한다.
예> #main.css
p, span{
color:red;
}
# a.html ( b.html )
<head>
<link rel="stylesheet" type="text/css" href="main.css" >
</head>
<body>
<p>Hello2</p>
<span>Hello3</span>
</body>
4) 우선순위
인라인 스타일 > 기본적으로는 내부 스타일 > 외부 스타일
4. CSS (Cascading Style Sheet ) 선수 내용
1) 캐스캐이딩 (Cascading)
html
|
head body
|
div
|
p
child, children(descent)
parent, parents
siblings (형제들)
- 개념:
DOM 트리의 상위요소에서 정의한 스타일이 하위 요소로 전달되는 개념이다. ( 상속개념 )
하나의 요소에 여러 스타일이 지정될 수 있음을 뜻함.
이러한 규칙은 충돌을 발생시킴. 해결방법은 명시도(Specificity)를 사용한다.
하위에서 재정의 가능
2) 명시도(Specificity)
- 개념:
선택자(selector)마다 우선순위가 있음.
즉 나중에 설정했다고 해서 덮어쓰는 것이 아님. (*******************)
- 기본적인 CSS 명시도 우선순위 ( 외우기 )
인라인스타일 > id > css의 class, 속성 > 태그
예> <a href=""></a>
<p class="y"></p>
<span id="x"></span>
* 다음은 명시도 가중치 표현식이다. ( vsc에서 css선택자 위에서 마우스 오버하면 확인이 가능)
#id 의 명시도 값: ( 1,0,0 ) ==> 가중치: 100 이라고 생각하자.
.클래스와 속성의 명시도 값: ( 0,1,0 ) ==> 가중치: 10 이라고 생각하자.
태그의 명시도 값: (0,0,1) ==> 가중치: 1 이라고 생각하자.
- !important
=> 권장안함
=>기본적인 명시도의 가중치값을 완전히 무시하고 최우선 순위를 가짐.
( 인라인 스타일보다 우선권이 더 높음 )
예> div{
color:aqua !important;
}
- 선택자를 결합해서 구체적으로 지정할 수록 명시도가 올라간다.
지정된 선택자를 모두 사용하기 때문임.
명시도 참조사이트:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
5. CSS 선택자 ( selector )
* DOM 트리 계층구조
- 개별적인 요소를 노드(node)라고 부른다.
- 노드 종류 3가지
element node: tag 의미
text node: 리터럴 값 의미
attribute node: 속성의미
nodelist : 같은 부모의 자식의 모임(배열로 받음)
html
|
head body
| |
title div p span a - href
link | | |
script div "다음" "daum.net"
style |
p
|
"hello"
1) 개념
- DOM의 요소를 접근(선택)하는 방법.
2) 문법
가. 전체선택자
- * 표현
- DOM 트리에 있는 모든 태그가 선택됨.
예>
<style>
*{
color:red;
}
</sytle>
나. 태그선택자
- 태그명으로 표현
만약에 여러개 표현할때는 ,(쉼표) 지정하고 사용.
예>
<style>
p{
color:red;
}
p, div, #xx, .yy{
color:red;
}
</sytle>
다. id 속성 선택자
- #id 표현
- 중복불가 ( 유일하게 지정한다. )
예>
<style>
#xxx{
color:red;
}
</sytle>
<p id="xxx">Hello</p>
라. class 속성 선택자 (**********)
- .class 표현
- 중복이 가능
- 한번에 여러개 지정 가능. 공백으로 구분 ( 예> class="yyy yyy2")
독립적으로 적용됨.
만약 class="xxx xxx2" 인 경우 나중에 정의된 xxx2가 적용된다.
예>
<style>
.xxx{
color:red;
}
.xxx2{
color:blue;
}
</sytle>
<p class="xxx">Hello</p>
<span class="xxx">Hello</span>
..
<span class="xxx2">Hello</span>
- 헷갈릴만한 선택자 표현식 예
1) <style>
.select .aaa{ <== class가 select를 찾고 그 자손으로 class가 aaa인 요소 반환.
}
.select.aaa{ <== class가 select 이면서(그리고 and) class가 aaa인 요소 반환.
}
.select,.aaa{ <== class가 select가 이거나( 또는 or) class가 aaa인 요소 반환.
}
</style>
마. 계층구조 1- 자식
- 부모선택 > 자식 선택
예>
#xxx > p{
}
바. 계층구조 2- 자손 ( 공백 )
- 부모선택 자손 선택
- 자식포함.
예>
#xxx p{
}
사. 계층구조 3- 형제 ( sibling )
- 선택자 + 형제
- 인접한 바로 뒤의 형제요소 반환
예>
#xxx + p{
}
아. 계층구조 4- 형제들 ( siblings )
- 선택자 ~ 형제들
- 인접한 요소 뒤의 모든 형제요소 반환
예>
#xxx ~ p{
}
자. 속성으로 찾기
- 특정속성으로 구성된 요소를 찾을 때 사용됨.
예> <a href="http://www.daum.net">다음</a>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.navercloud.com">네이버</a>
<link href="" >
a. 속성명으로 찾기
- [속성명] 표현식, 태그명[속성명] <== and 조건
예> a[href]{
}
b. 속성명="속성값"으로 찾기 ( 정확하게 일치하는 속성값을 가진 요소 반환 )
- [속성명="속성값"] 표현식, 태그명[속성명="속성값"]
예> a[href="http://www.daum.net"]{
}
c. 속성명^="속성값"으로 찾기 ( 지정된 속성값으로 시작하는 요소 반환 )
- [속성명^="속성값"] 표현식, 태그명[속성명^="속성값"]
예> a[href^="https"]{
}
d. 속성명$="속성값"으로 찾기 ( 지정된 속성값으로 끝나는 요소 반환 )
- [속성명$="속성값"] 표현식, 태그명[속성명$="속성값"]
예> a[href$="com"]{
}
e. 속성명*="속성값"으로 찾기 ( 지정된 속성값이 포함된 요소 반환 )
- [속성명*="속성값"] 표현식, 태그명[속성명*="속성값"]
예> a[href*="naver"]{
}
f. 속성명|="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 속성값 뒤에 하이픈(-) 붙은 요소 반환 )
- [속성명|="속성값"] 표현식, 태그명[속성명|="속성값"]
예> a[href|="naver"]{ <== naver 또는 naver- 요소반환.
}
g. 속성명~="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 공백이 포함된 값 목록에 존재하는 요소 반환 )
- [속성명~="속성값"] 표현식, 태그명[속성명]~="속성값"]
예> a[href~="naver"]{ <== naver 또는 ko naver 요소반환.
}
6. 의사코드 (의사 클래스 (pseudo class ) 와 의사 요소 (pseudo elements))
1) 개념
- 이름안에 어떤 기능인지를 내포하고 있음.
2) 의사클래스(pseudo class )
-문법: :클래스명
-기능:스타일 지정하거나 마우스오버 및 a태그의 3가지 상태(state)인
방문전(blue), 방문후(purple), 활성화(red,누르고 있을 때) 링크 색상을 변경할 수 있음.
가. a태그의 link 의사 클래스 ( 순서가 중요 )
a:link{color:red;} /* 방문전 */
a:visited{color:green;} /* 방문후 */
a:hover{color:yellow;} /* 마우스 오버 */
a:active{color:blue;} /* 누르고 있을 때 */
나. input태그 focus 클래스 <---> blur: focus 잃어버렸을 때
input:focus{
background-color:yellow;
}
* DOM 트리에서 자식 선택하는 의사 클래스 ( 지정된 태그의 부모가 기준(******))
다. 지정된 태그의 부모기준인 첫번째 자식
선택자:first-child{
}
예>
p태그를 찾고 찾은 p태그의 첫 번째 자식을 반환. (X)
p태그의 부모를 찾고 그 부모의 첫번째 자식인 p태그 반환 (o)
p:first-child{
}
라. 지정된 태그의 부모기준인 마지막 자식
선택자:last-child{
}
마. 지정된 태그의 부모기준인 유일한 자식
선택자:only-child{
}
바. 지정된 태그의 부모기준인 n번째 자식 ( 1부터 시작 )
선택자:nth-child(n){ <== n번 위치
}
선택자:nth-child(2n){ <== 짝수번째, n에 1부터 시작해서 2,3,4 치환됨.
}
선택자:nth-child(2n+1){ <== 홀수번째.
}
사. 지정된 태그의 부모기준인 짝수번째/홀수번째 자식
선택자:nth-child(even){ <== 짝수번째
}
선택자:nth-child(odd){ <== 홀수번째
}
#########################################################
아. 부정선택자
선택자:not(선택문법){
}
자. input태그에서 check 된 요소 반환 (*****)
input:checked{
}
차. input태그에서 enable/disable 된 요소 반환
input:enabled{
}
input:disabled{
}
카. 지정된 선택자에서 자식이 없는 요소 반환
선택자:empty{
}
3) 의사 요소 (pseudo elements)
- 문법: ::요소
- 의사클래스와 다르게 요소의 특정부분의 스타일을 지정할 수 있다.
의사클래스는 전체(whole) 스타일 적용되고
의사요소는 부분(part)스타일이 적용됨.
가. 문단의 첫줄 선택
p::first-line{}
예>
<p>
hello1<br>
hello2<br>
hello3<br>
</p>
나. 텍스트의 첫 글자
p::first-letter{
}
다. 특정요소 컨텐츠(content,body)앞에 삽입 / 뒤에 삽입
p::before{
content:'값'|url('images/001.png')
}
p::after{
content:'값'|url('images/001.png')
}
################################################
7. Box 모델
1) 개요
- CSS상에서 모든 요소(tag)는 box로 인식한다.
2) 구성요소
가. content
- 요소의 실제 내용 ( 텍스트,이미지등)
나. padding
- 안쪽여백
다. border
- padding과 content 를 둘러싼 영역으로 테두리 라고 부름.
라. margin
- 바깥쪽 여백
==> 크롬 개발자도구에서 확인이 가능하다.
==> 웹브라우저에서는 300px 너비를 맞췄는데
실제 Box Model에서는 284px로 보인다.
==> 블럭(block) 레벨은
실제 Box Model 의 너비가 숫자로 보이고
인라인(inline) 레벨은
실제 Box Model 의 너비는 auto로 지정되어 보인다.
이유는 블럭레벨은 기본적으로 전체너비를 확보하고
인라인 레벨은 content 만큼만 너비를 확보하기 때문이다.
따라서 블럭레벨은 전체너비를 사용하기 때문에
다음 요소는 new line에 랜더링되고 width와 height 지정해서 값을 변경이 가능함.
인라인 레벨은 필요한 만큼만 너비를 확보하기 때문에
new line 없이 한줄에 랜더링이 되고
width와 height 지정해도 적용이 안됨.
3) width 와 height
가. 개념
- Box Model에서의 content의 너비(width)와 높이(height)를 의미한다.
- 지정하지 않으면 실제 요소 크기로 설정된다.
( 블럭레벨은 전체너비 사용, 인라인레벨은 필요한 만큼만 차지함)
- 지정하면 블럭레벨은 적용이 되지만
인라인레벨은 적용이 안됨.
나. width
- 인라인 레벨은 적용안됨
- 블럭레벨 요소는 기본적으로 전체 너비를 사용한다.
- 문법:
width:px|%
px: 절대값
%: 상대값. 기준은 가장 가까운 부모요소이다.
하지만 position(static,fixed,relative,absolute)에 따라서 기준이 달라질 수 있음.
만약에 부모가 100px이고 자식이 50% 라면 실제 자식너비는 50px이다.
다. height
- 인라인 레벨은 적용안됨
- 블럭레벨 요소는 기본적으로 필요한 높이를 사용한다.
- 문법:
height:px|%
px: 절대값
% : 상대값. 기준은 가장 가까운 부모요소이다.
만약에 부모가 100px이고 자식이 50% 라면 실제 자식 높이는 50px이다.
** width와 height 사용시 고려해야될 사항 (*************)
지정된 width와 height가 content의 width와 height 가 아니다.
기본적으로 항상 지정된 값보다 크게 보임.
이유는 padding과 border 관여가 된다.
margin는 제외됨. ( margin는 여백상쇄가 발생되기 때문에 width와 height 사용시 고려대상이 아님)
8. box-sizing 속성
1) 개념
요소의 너비(width)와 높이(height)를 계산하는 방식이다.
2) 종류
가. content-box 개념
- 기본
- 지정된 width 와 height 값이 아닌
padding+border 값이 추가되어 최종적으로 box의 보여지는
크기가 정해지는 방식이다.
따라서 실제 너비와 높이보다 더 커지는 상황이 발생될 수 있음.
최종 width = 지정 width 값 + (2*padding) + (2*border)
최종 height = 지정 height 값 + (2*padding) + (2*border)
나. border-box 개념 (*****************)
- content-box와 다르게 자동으로 padding+border 값이 포함되어
width와 height값이 정해지는 방식이다.
최종 width = 지정 width 값
최종 height = 지정 height 값
- 실제로는 다음과 같이 설정하고 사용한다.
*{
box-sizing: border-box;
}
9. margin
1) 기능
- Box와 Box 사이의 여백(바깥쪽 여백) 제어.
- px와 % 지정 가능
2) 문법1
- 개별적으로 요소 지정
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
2) 문법2 - 축약표현
가. margin: top right bottom left
margin: 10px 10px 10px 10px;
나. margin: top right|left bottom
margin: 10px 10px 10px;
다. margin: top|bottom right|left
margin: 10px 10px;
라. margin: top|bottom|right|left
margin: 10px ;
==> 축약된 표현식은 개발자도구에서
어떻게 축약되었는지를 보여준다.
==> body태그가 기본적으로 margin:8px 가짐.
이 값이 브라우저의 기본값이다.
body {
display: block;
margin: 8px;
}
일반적으로 이 값을 제거하고 요소가 페이지의 바로 배치되도록 수정해서 사용한다
*{
margin:0px;
}
==> margin의 여백 상쇄
인접한 Box의 margin는 서로 겹쳐질수 있는데
하나로 합쳐져서 margin 만들어지는 것이 아니고 큰 크기의 여백으로 적용된다.
이유는 요소간 거리가 너무 멀어지는것을 방지한다.
만약에 필요하면 명시적으로 margin-top|margin-bottom 을 지정해야 된다.
==> margin:auto; 수평 가운데 정렬 가능
반드시 block 레벨이면서 width 값을 가져야 된다.
inline 레벨에서는 동작안됨.
10. padding
1) 기능
- content와 border 사이의 여백(안쪽 여백) 제어.
- px와 % 지정 가능
2) 문법1
- 개별적으로 요소 지정
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
2) 문법2 - 축약표현
가. padding: top right bottom left
padding: 10px 10px 10px 10px;
나. padding: top right|left bottom
padding: 10px 10px 10px;
다. padding: top|bottom right|left
padding: 10px 10px;
라. padding: top|bottom|right|left
padding: 10px ;
11. border
1) 개요
- 테두리
- margin과 padding 사이에 둘러싸인 요소.
- 3가지 속성이용해서 스타일링 가능
가. width: border의 두께
나. style: border 스타일( 실선, 점선, ...)
다. color: border 색상
2) 표현식1
가.width
border-top-width:5px;
border-right-width:5px;
border-bottom-width:5px;
border-left-width:5px;
나.style
border-top-style:solid|dotted|dashed;
border-right-style:solid|dotted|dashed;
border-bottom-style:solid|dotted|dashed;
border-left-style:solid|dotted|dashed;
다.color
border-color: red;
2) 표현식2-축약
가.width
border-width: top right bottom left;
border-width: top right|left bottom;
border-width: top|bottom right|left;
border-width: top|right|left|bottom;
나.style
border-style: top right bottom left;
border-style: top right|left bottom;
border-style: top|bottom right|left;
border-style: top|right|left|bottom;
2) 표현식3-축약 (*************)
border: width style color;
예> border: 3px solid red;
3) border-radius 속성
- 박스 모서리를 둥글게 설정할 때 사용
- 값이 클수록 많이 둥그러짐.
border-radius: 20px;
border-radius: 50%; // 원
##########################################
12. 요소 배치 ( position)
1) display 속성
가. 개념
요소를 어떻게 배치할지를 제어가 가능한 속성.
블럭레벨로 배치/인라인 레벨로 배치/랜더링 방지/인라인처럼 배치되지만widht와height지정가능
display:block;
display:inline;
display:none; // 영역유지 안됨.
display:inline-block(*****);
2) position 속성
가. 개요
- display 속성은 요소가 배치되는 기본적인 규칙만 변경할 수 있다. ( 블럭레벨, 인라인레벨)
- top,left,right,bottom 속성을 이용해서 요소의 실제위치를 바꿀수 있다.
나. 용어
배치 컨텍스트(positioning context): 누구를 기준으로 삼을건지를 결정하는 용어.
문서 대열 ( document flow, normal flow): 웹브라우저에 요소가 기본적으로 배치되는 용어.
다. 종류
position:static
==> 기본.
기본적인 문서 대열 ( document flow, normal flow)를 따른다.
따라서 임의적으로 위치변경이 불가능하다.
즉 top,left,right,bottom 속성이 적용이 안됨.
역으로 top,left,right,bottom 속성이 적용될려면 static이 아닌 다른값으로 지정해야 된다.
position:relative
==> 배치 컨텍스트(기준)는 기본적인 문서 대열(document flow, normal flow)이다.
top,left,right,bottom 속성이 적용이 됨.
position:absolute
==> 배치 컨텍스트(기준)는 가장 가까운 부모(조상)이다.
==> 2가지 상황이 있음
가. 부모(조상)에 position 없는 경우
예>
<body>
<div id="a"> <== position:static 또는 지정안한 경우
<div id="b"> <== position:absolute
- html(body) 기준
- top,left,right,bottom 속성이 적용이 됨.
나. 부모(조상)에 position:relative 있는 경우
예>
<body>
<div id="a"> <== position:relative
<div id="b"> <== position:absolute
- <div id="a"> 기준
- top,left,right,bottom 속성이 적용이 됨.
position:fixed
==> 배치 컨텍스트(기준)는 뷰포트(view port ) 이다.
top,left,right,bottom 속성이 적용이 됨.
스크롤해도 고정되어 있음.
* 정리
static와 relative는 문서 대열 (document flow, normal flow)에서 제외가 안됨.
absolute 와 fixed 문서 대열 (document flow, normal flow)에서 제외됨.
따라서 요소들이 겹쳐서 랜더링 될 수 있다.
position:sticky
==> 최근에 추가된 기능임. 따라서 caniuse.com 에서 지원여부 확인 할 것.
static 과 fixed 합쳐진 기능.
평상시에는 특정한 임계점에 오면 fixed 처럼 동작됨.
예>
position:sticky;
top:30px;
3) z-index 속성
가. 개념
absolute 와 fixed 문서 대열 (document flow, normal flow)에서 제외됨.
따라서 요소들이 겹쳐서 랜더링 될 수 있다.
stack에 요소들을 쌓게 된다.
나. 요소 배치하는 방식 3가지
x축으로 배치: 왼쪽에서 오른쪽 배치 ( 인라인 )
y축으로 배치: 위에서 아래 배치 ( 블럭 )
z축으로 배치: 깊이
다. 특징
- z-index:auto; 기본값임 ( z-index: 0 과 동일 )
- 값이 작을 수록 stack 밑에 배치된다.
(양수)
0 (기본)
(음수)
- 반드시 position이 지정되어야 한다. ( static 제외 )
##########################################
13. 배경(background) 관련
1) 배경 이미지
- background-image 속성이용
- 문법:
background-image:url("images/");
background-image:url("images/a"),url("images/b"); // a가 가장위에 보임.
- 특징은 기본적으로 이미지가 반복되고 텍스트의 배경으로 랜더링된다.
2) 배경색
- background-color 속성
- 문법:
background-color:색상;
* 정리
background-image 와 background-color 같이 사용하면 background-image가 보인다.
3) 배경 이미지 반복 제어
- background-repeat 속성
- 문법:
background-repeat:repeat-x|repeat-y|repeat|no-repeat
- 기본값은 repeat
4) 배경 사이즈
- background-size 속성
- 문법:
background-size:auto|px|contain|cover
auto: 기본값. 크기를 자동으로 설정함.
px: 절대값
background-size: 10px 20px; // widht:10px height:20px
contain: 이미지를 보여주는 컨테이너내에서 이미지 크기를 최대한 크게 설정한다.
화면을 작게하면 이미지도 같이 작아지고 크게하면 이미지가 무한정 커지지 않고
이미지를 모두 볼수 있는 정도까지만 커진다.
따라서 이미지를 전체를 볼수 있다.
cover: 이미지의 비율을 관리하기 때문에 이미지 전체가 안 보여질 수 있다.
화면을 작게하면 이미지가 일정부분까지만 작아지기 때문에 화면이 잘라져 보이고
화면을 크게하면 이미지가 비례해서 커지기 때문에 화면이 잘라져 보인다.
5) 배경 위치
- background-position 속성
- 문법:
background-position:top|right|bottom|left
px(x축)
px(x축) px(y축)
% (x축)
% (x축) %(y축)
6) 이미지가 scroll 여부 제어
- background-attachment 속성
- 문법:
background-attachment:scroll|fixed;
7) 이미지를 border 및 padding 및 content 영역까지 설정
- background-clip 속성
- 문법:
background-clip:border-box|padding-box|content-box;
border-box: 기본, 배경이미지가 border(테두기)까지 차지함.
z축 순서상 배경이미지와 border가 겹쳐서 보임.
padding-box: 배경이미지가 padding(안쪽여백)까지 차지함.
border까지 차지안함.
content-box: 배경이미지가 content 까지 차지함.
##########################################
14. 크기 단위 ( units, ******)
1) 단위 종류
- px
- %
- rem, em
- vw, vh ( viewport widht, viewport height )
2) 사용가능한 속성
- width/height
- font-size
- margin/padding/border
- top/right/bottom/left
3) 크기종류
가. 절대 길이(크기)
- px 만 사용하자. ( cm, inch,... )
나. 상대 길이(크기)
a. vw, vh ( viewport width, viewport height )
- position 여부와 무관.
- 뷰포트(viewport) 기준으로 너비 설정 방법 2가지
첫째:
position:fixed + width|height 로도 뷰포트 기준으로 길이(크기)설정 가능
.x{
position:fixed;
width: 50%;
height: 50%;
}
둘째:
.x{
position:fixed|relative|absolute 지정과 무관하게 동작됨.
width: 50 vw;
height: 50 vh;
}
b. rem(*****), em
- 글꼴 길이에 사용할 때 웹브라우저의 기본 글꼴크기(기본: 16px)가 기준
예> 1rem = 16px
c. %
c-1) 기본은 부모요소 기준이다.
예>
<div> <== width:100px
<div> <== width:50% ( 부모인 width:100px의 50% 확보. 실제값은 50px이 됨 )
c-2) position:fixed + %
예>
<div> <== width:100px
<div> <== position:fixed; width:50% ( 뷰포트의 50% 확보.)
- 화면크기를 변경하면 자동으로 설정된 크기도 변경된다.
c-2) position:relative + %
예>
<div> <== width:100px
<div> <== position:relative; width:50% ( 부모인 width:100px의 50% 확보. 실제값은 50px이 됨 )
- 만약에 부모가 인라인 레벨이면 적용안됨
c-3) position:absolute + %
예>
<div> <== position:relative;width:100px
<div> <== position:absolute; width:50% ( 부모인 width:100px의 50% 확보. 실제값은 50px이 됨 )
- 부모를 position:relative 지정하고 사용해야됨.
지정하면 자식은 부모의 width를 참조하여 %가 적용됨.
4) max-width 속성
- % 사용시 화면크기가 커지면 비율로 설정했기 때문에
이미지가 계속 커질 수 있음.
그런데 이미지의 부모(컨테이너) 크기를 제한하면 더 이상 커지지 않을 수 있다.
이때 부모(컨테이너)에 max-width:500px 지정하여
지정된 500px 보다 더 커지지 않도록 제어가 가능하다.
예>
<div> <== max-width:500px
<img> <=== width:100%
5) rem, em
- 글꼴 크기지정시 사용
- 기준은 웹브라우저에서 설정된 기본글꼴크기이다. ( 기본값은 16 px )
가. em
- 부모 요소의 em값을 상속해서 글꼴크기가 정해짐.
예>
<div> <-- 1.2 em ( 16 * 1.2 = 19.2px)
<div> <-- 1.3 em ( 16 * 1.2 * 1.3 = 24.96 )
<div> <--- ?
나. rem ( 권장 )
- root인 html 기준으로 글꼴크기가 정해짐
예>
<div> <-- 1.2 em ( 16 * 1.2 = 19.2px)
<div> <-- 1.3 em ( 16 * 1.3 = 20.8)
<div> <--- ?
* 권장하는 단위 선택하기
font-size: rem
padding/margin: rem (*), %
border: px
width/height: %,
vw,vh
top/right/bottom/left: %
##########################################
15. 색상
1) 영단어 표기 ( 120 여개 됨 )
예> color:red|blue|aqua|...
2) 16진수 ( 0~15)
- #RRGGBB ( 6비트), #RGB ( 3비트 )
- #FFFFFF: 흰색
#000000: 검정
예> color: #FF6347;
3) 10진수 ( 0~255) + rgb(r,g,b)
- rgb(0~255,0~255,0~255)
rgb(0,0,0) <==검정
rgb(255,255,255) <==흰색
예> color: rgb(15, 184, 226);
4) 투명도 + 10진수 ==> rgba(0~255,0~255,0~255, 0~1)
- alpha값은 0이면 완전투명, 1이면 완전불투명
예> color: rgba(15, 184, 226, 0.3);
##########################################
16. visibility 속성
용도: 요소를 보이거나 보이지 않게 동작.
문법:
visibility:visible(기본)|hidden|collapse
* display:none vs visibility:hidden
display:none 은 영역유지 안됨.
visibility:hidden 는 영역유지가 됨.
- visibility:collapse 는 <table> 를 안보이게 처리(영역유지 안됨)
##########################################
17. 투명도(opacity) 속성
- 요소의 투명도 제어
- 0~1 사용 ( 0:완전투명, 1:완전불투명)
예> opacity:0.3
##########################################
18. 글꼴(font) 관련
1) 스타일 속성
font-style:normal|italic|oblique|..
2) 두께 속성
font-weight:bold|bolder|lighter|100~900
3) 사이즈 속성
font-size:rem(*)|px
4) 글꼴 속성
- font-family: 값1, 값2, 값3;
- 값에 지정가능한 이름 2가지
가. generic family ( 실제 글꼴들의 카테고리라고 생각하자 )
- 웹브라우저에서 기본적으로 제공
- 여러 폰트가 가지는 특별한 주요 특징을 가짐.
- 종류: serif
sans-serif
monospace(고정폭글꼴)
cursive(필기체)
산술글꼴
나. font family
- generic family에 속하는 실제 글꼴의미.
대표:
serif: Tims New Roman, Geogia
sans-serif: consolas
monospace: ..
결론:
글꼴들의 특징을 담은 generic family가 있고
그 안에 공통특징은 공유하지만 생김새는 다른 여러 다양한 font family가 있다고 생각하자.
- 웹브라우저가 글꼴(font)를 결정하는 방법
가. font-family를 명시적으로 지정하지 않은 경우
- 웹브라우저의 표준글꼴에 설정된 font family로 랜더링된드
현재 설정된 표준글꼴인 font family는 Malgun Gothic이다.
따라서 웹 브라우저에서 출력되는 글꼴은 Malgun Gothic임.
글꼴확인 방법은 마우스 오버 또는 개발자도구에서 computed 탭 클릭하면 됨.
나. font-family를 명시적으로 지정한 경우
a. generic family만 지정한 경우
font-family: serif;
<== 웹브라우저의 글꼴설정에서 정의된 serif에 해당하는 실제 font family로 랜더링이 된다.
현재는 Batang 글꼴임.
font-family: sans-serif;
<== 웹브라우저의 글꼴설정에서 정의된 san serif에 해당하는 실제 font family로 랜더링이 된다.
현재는 Malgun Gothic 글꼴임.
b. font family 지정한 경우 ( 마지막에는 generic family 지정 권장 )
font-family: 'Malgun Gothic', 'Batang', serif;
font-family: 'Malgun Gothic', 'Batang', sans-serif;
* 단축표현식
font: style weight size family;
예> font: italic bold 2rem 'Malgun Gothic', 'Batang', serif;
19. 구글폰트
- 웹폰트(web font)라고 부름.
- 장점은 로컬에 설치된 폰트와 상관없이 사용 가능함.
단점은 <link> 사용해야됨.
http://fonts.google.com 접속해서
language 와 generic family 먼저 선택 > 목록에 나온 글꼴 선택 > get Fonts 버튼 선택 >
get embed code 선택 > <link> 와 css 복사해서 사용.
20. text 관련 속성
1) 색상
color: red
2) 수평 정렬
text-align:center|left|right|justify(양쪽정렬)
3) 밑줄 및 취소선
text-decoration: underline|overline|line-throuth
4) 대소문자, 첫글자 대문자
text-transform:uppercase|lowercase|capitalize
5) 첫라인 들여쓰기
text-indent:10px;
6) 줄간격
- font-size:16px 에 비례해서 적용됨
line-height: 값
예> line-height: 1
line-height: 2
line-height: 0.8
#############################################
21. FlexBox
1) 개요
전통적으로 레이아웃 처리할 때 사용했던 방식은 position과 float을 사용하는 방식임.
FlexBox 문법을 적용하면 매우 쉽게 레이아웃 및 수직 정렬, 요소 순서(ordering), 동적 사이징
처리가 가능함.
2) 2가지 구성요소
- 반드시 부모(flex container)/자식(flex item)관계가 성립되어야 한다. ( 자손은 적용안됨 )
- 중첩가능
- 1차원 (행(기본)/열)으로 배치됨.
( 전형적인 normal flow 를 따르지 않음 )
- 부모는 display:flex 로 지정
( 실행결과: -모든 div item 들이 가로(행) 배치됨.
-명시적으로 지정된 height 제외한 나머지는 가장 큰 height 값이 적용됨.
-브라우저 화면을 줄이면 어느정도까지 줄어듬 )
- 부모는 display:inline-flex 로 지정
( 실행결과: -모든 div item 들이 가로(행) 배치됨.
-명시적으로 지정된 height 제외한 나머지는 가장 큰 height 값이 적용됨.
-브라우저 화면을 줄여도 안줄어듬.
이유는 inline이기 때문에 자체적인 크기를 고수한다.)
가. flex container
- display:flex;
- container에서 사용가능한 속성들
나. flex item
- item에서 사용가능한 속성들
예>
.container{
display:flex;
}
<div class="container">
<div>item</div>
<div>item</div>
<div>item</div>
<div>item
<div>item2</div> <== flex item 아님. 자손은 제외
</div>
<div class="container2"> <== 중첩 가능
<div>item</div>
</div>
</div>
3) Container에서 사용 가능한 속성
* 2가지 축
주축: item이 배치되는 방향의미
기본은 row
교차축: 주축의 수직인 방향의미.
가. flex-direction 속성
- 주축의 방향 결정
- 속성값:
row : 기본값, 왼--->오
row-reverse: 오---->왼
column: 위-->아래
column-reverse: 아래 --> 위
나. flex-wrap 속성
- 화면크기를 줄일때 어느정도까지는 축소되고 item이 안보이게 된다.
축소되지않고 새로운 줄에 랜더링이 가능하도록 제어.
-속성값:
nowrap : 기본
wrap : 상단기준 ( 아래쪽에 wrap 됨)
wrap-reverse: 하단기준 ( 위쪽으로 wrap 됨 )
- 특징
wrap 되면 기존의 최대 height가 아닌
컨텐츠의 height만 차지함.
계속 화면을 줄이면 하나의 열로 표시됨.
다. flex-flow
flex-direction 와 flex-wrap 의 축약표현식
문법: flex-flow: direction wrap
예> flex-flow: row wrap;
라. align-items
- 교차축에 대한 정렬
- 속성값
flex-start
flex-end
center
baseline : item의 실제 컨텐츠의 기준에 맞춰 정렬됨.
stretch : 기본값. 기본적으로 item을 늘려서 Container를 꽉 채운다.
마. justify-content
- 주축에 대한 정렬
- 속성값
flex-start
flex-end
center
space-around
space-between
space-evenly
바. align-content
- 반드시 wrap된 상태에서만 적용가능. nowrap 적용안됨.
- align-items + justify-content 합성 기능.
속성값
flex-start
flex-end
center
baseline : item의 실제 컨텐츠의 기준에 맞춰 정렬됨.
stretch
space-around
space-between
space-evenly
4) item에서 사용 가능한 속성
가) order 속성
- 기본적으로 코드에 지정된 순서로 표시된다.
order를 이용해서 나타내는 순서를 변경할 수 있다.
- order:0 기본값
-1 0 1
(앞) (기본값) (뒤)
나) algin-self 속성
- align-items ? Container에 지정해서 모든 item들의 교차축 정렬 제어.
- algin-self ? 개별적인 item의 교차축 정렬.
( container에서 설정한 align-items의 교차축 정렬값을 재정의함 )
속성값:
flex-start
flex-end
center
baseline : item의 실제 컨텐츠의 기준에 맞춰 정렬됨.
stretch : 기본값. 기본적으로 item을 늘려서 Container를 꽉 채운다.
다) flex-grow 속성
- 화면을 크게할 때 item의 동작방식을 제어.
- flex-grow: 0 기본값
a. 기본동작
화면을 키우면 5번과 6번이 동시에 같은 비율로 커진거나 작아진다.
최대 350px까지 커진다.
b. 설정동작 1
5번에 flex-grow:1 로 지정.
화면크기를 키우면 6번은 최대 350px까지만 커지고
5번은 350px 넘어서 계속 커진다.
이유는 flex-grow: 0 인 요소들이 모두 너비를 차지하고
남은 너비를 flex-grow:1 인 5번이 차지하게 되어 5번은 350px 보다 더 커질수 있다.
b. 설정동작 2
5번에 flex-grow:1 로 지정하고
6번에 flex-grow:4 로 지정.
화면크기를 키우면 6번은 5번보다 더 빠르게 커진다.
flex-grow: 0 인 요소들이 모두 너비를 차지하고
남은 너비는 5등분하고 5번은 1/5 6번은 4/5가 차지하게 된다.
c. 설정동작 3
flex-wrap: wrap 지정
크기를 줄이면 5번이 다음라인으로 wrap되고
이때 5번은 전체 너비를 모두 차지하게 된다.
이유는 5번 하나만 존재하기 때문에 나머지 영역을 모두 차지하게 되기 때문이다.
라) flex-shrink 속성
- 화면을 작게할 때 item의 동작방식을 제어.
- flex-shrink: 1 기본값
- 컨텐츠에 필요한 공간까지만 축소됨.
- flex-shrink: 0 지정하면 축소 자체가 안됨.
a. 기본동작
화면을 줄이면 5번과 6번이 동시에 같은 비율로 작아진다.
컨텐츠를 보여줄수 있는 최소 크기까지만 줄어든다.
b. 설정동작 1
6번을 flex-shrink: 0 지정.
화면을 줄이면 5번 및 다른 item 들은 축소되었는데 6번은 축소안됨.
b. 설정동작 2
5번을 flex-shrink: 3 지정.
화면을 줄이면 5번이 다른 item들 보다 거의 3배정도 빠르게 축소됨.
마) flex-basis 속성
- item의 주축에 대한 기본 크기 설정시 사용.
만약에 주축이 row이면 width값이고 column이면 height값이 된다.
일반적으로는 width와 height 가 item의 크기를 결정하지만
flex-basis 를 지정하면 width와 height 를 덮어쓴다.
- flex-basis: auto 기본값.
- 동작방식
주축이 row ( width 고려 )
예> flex-basis: auto; width:300px ==> item의 실제 너비는 300px ( width값이 적용)
flex-basis: 200px; width:300px ==> item의 실제 너비는 200px ( flex-basis값이 적용)
주축이 column ( height 고려 )
예> flex-basis: auto; height:300px ==> item의 실제 높이는 300px ( height값이 적용)
flex-basis: 200px; height:300px ==> item의 실제 높이는 200px ( flex-basis값이 적용)
- flex-basis: % 가능 ( 화면 전체 너비/높이 기준 )
22. Grid
1) 개요
일반적으로 웹페이지는 행과 열로 구성된 grid 형식을 따름.
flexbox는 1차원인 행 또는 열만 따로따로 제어가 가능하다.
grid 2차원 제어 방식으로 행과 열을 같이 제어할 수 있다.
2) 2가지 구성요소
- 반드시 부모(grid container)/자식(grid item)관계가 성립되어야 한다. ( 자손은 적용안됨 )
- 중첩가능
가. grid container
- display:grid;
- container에서 사용가능한 속성들
나. grid item
- item에서 사용가능한 속성들
예>
.container{
display:grid;
}
<div class="container">
<div>item</div>
<div>item</div>
<div>item</div>
<div>item
<div>item2</div> <== grid item 아님. 자손은 제외
</div>
<div class="container2"> <== 중첩 가능
<div>item</div>
</div>
</div>
- grid 는 행으로 추가됨.
따라서 여러개의 행이 만들어지고 하나의 열로 구성됨.
3) Container에서 사용 가능한 속성
a. item 배치
grid-auto-flow:row|column
- row 기본. ( 행으로 추가됨. 다중행의 1열로 구성 )
- column ( 열로 추가됨. 1행의 다중열로 구성 )
b. 열 갯수 지정
- 주의할 점은 n 개 지정하지 않고
열의 크기를 지정한다.
grid-template-columns: 값 값 값 값;
값의 단위: px, %(기준:container) , rem(기준: 웹브라우저 기본글꼴값(16px)
, auto (나머지 영역 차지), fr(fraction)
예> grid-template-columns: 20px 20px 20px 20px;
grid-template-columns: repeat(4, 20px);
grid-template-columns: 20% 20% 20% 20%; /* container 기준 */
grid-template-columns: repeat(4, 20%);
grid-template-columns: 20% 20px 20px 20%;
grid-template-columns: 20px 20px 20px auto;
grid-template-columns: 20px 20px 20px 1fr;
grid-template-columns: 20px 2fr 20px 1fr;
grid-template-columns: 20px minmax(10px,100px) 20px auto;
c. 행 갯수 지정
- 주의할 점은 n 개 지정하지 않고
행의 크기를 지정한다.
grid-template-rows: 값 값 값 값;
값의 단위: px, %(기준:container) , rem(기준: 웹브라우저 기본글꼴값(16px)
, auto (나머지 영역 차지), fr(fraction)
d. gap(간격)
가. 행의 간격
grid-row-gap: 10px
나. 열의 간격
grid-column-gap: 20px
축약표현식(권장)
문법: grid-gap: row-gap column-gap;
grid-gap: 10px 20px
e. container내의 셀(cell)안에서 item 정렬
가. x축정렬
justify-items:flex-end|center|..;
나. y축정렬
align-items:flex-end|center|..;
f. container 자체 정렬
가. x축정렬
justify-content:flex-end|center|..;
나. y축정렬
align-content:flex-end|center|..;
g. 자동으로 row 추가
grid-auto-flow: row (기본)
==> grid-template-rows: 값 값: 를 명시적으로 지정하지 않아도
자동으로 row 로 추가된다.
==> 자동으로 추가되는 행의 height는 item이 가진 컨텐츠에 영향을 받아서 height가 정해진다.
이 height값을 고정하자.
grid-auto-rows: 값; <== 자동으로 추가되는 모든 행의 height가 동일해짐.
4) item에서 사용 가능한 속성
a. Container 속성에서 설정된 justify-items 와 align-items 재정의
.item-1{
justify-self: center|flex-start
align-self:center|flex-start
}
b. 원하는 위치에 배치 1 - 위치의 번호
.item-3{
grid-column-start:2
grid-column-end:4
grid-row-start:1
grid-row-end:3
}
축약표현식
grid-column: start / end;
grid-row: start / end;
b. 원하는 위치에 배치 2 - 위치 와 갯수
.item-3{
grid-column-start:2
grid-column-end: span 3;
grid-row-start:1
grid-row-end: span 2;
}
b. 원하는 위치에 배치 3 - 셀 이름
가. 셀 이름 지정 ( Container 에서 지정 )
.container{
grid-template-areas: "header header header1 header1"
". . main main" <== 셀명을 생략가능. 하지만 . 지정해서 갯수는 반드시 일치해야 됨.
"footer1 footer2 footer3 footer4"
}
나. 요소 배치 ( item 속성 )
.item-1{
grid-area:main;
}
.item-2{
grid-area:header;
}
'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| js 1일차 - 연산자, 문장, 객체 (1) | 2024.05.02 |
|---|---|
| js 1일차 - 개요, 식별자, 변수, 상수 (1) | 2024.05.02 |
| CSS 5일차 - Grid(3) item 속성 (0) | 2024.05.02 |
| CSS 5일차 - Grid(2) Gap, 정렬, auto-rows (0) | 2024.05.02 |
| CSS 5일차 - Grid(1) 행 과 열 (0) | 2024.05.02 |
