주제:CSS
CSS는 Cascading Style Sheets로 웹 페이지를 꾸미는 데 사용된다. CSS는 작성 방식에 따라 내부,외부, 인라인 CSS로 적용되며
내부 CSS:문서의 HEAD 태그 내부에 작성
외부 CSS:링크를 통해 외부 파일로 작성
인라인 CSS:태그 내부에 자체적으로 작성
이라고 보면 된다.
선택자:문서 내의 어떤 요소에 CSS를 적용할지 작성하는 요소, 선택자에 따라 적용 범위가 달라진다.
*:전체 지정,모든 요소에 적용한다
*{
적용 속성:값;...
}태그 선택자
div,p 처럼 특정 태그 전체에 속성을 적용한다.
div(p,li...){
적용 속성:값;...
}ID,Class 선택자
ID나 Class가 지정된 요소에 적용된다
ID는 #,Class는 .으로 지정한다.
#myID{
적용 속성:값;...
}
.myClass{
적용 속성:값;...
}의사(가상)클래스
기존 선택자에서 특정 조건을 만족시킬 때에만 적용되는 선택자
대표적으로 마우스를 올릴 때의 :hover, tab키로 이동할 시 focus되는 :focus, 리스트의 첫번째 요소만을 지정하는 :first_child, n번째 요소를 지정하는 :nth-child(n) 등이 있다.
# mylist:hover {
적용 속성:값;
}
# mylist:focus {
적용 속성:값;
}
# mylist:fist_child {
적용 속성:값;
}
# mylist:nth-child{
적용 속성:값;
}같은 식으로 적용하면 된다.
상속:부모 요소에 적용된 스타일 값을 자식 요소가 적용받는 것, div h2 처럼 동시에 두개 이상의 속성을 가진 요소에만 적용되는 것을 자식 결합자라고 한다.
div {...}
h2 {...}
div h2 {...}<div> ...(div 태그 적용)
<h2> ... (h2태그 적용)
<div>...
<h2>... (div h2 태그 적용)초기화:요소의 속성을 초기화하는 것, 초기화 과정에서 예상치 못한 값이 나올수 있으므로 주의
p {
color:...;
}
em {
color:initial;
}<p>
<em>색깔 초기화</em>
</p>해당 HTML에서 em태그 내부는 원래 p 태그의 색깔이 적용되야 하지만 em 태그의 CSS인 initial로 인해 기본 색깔로 돌아가게 된다.
자손 결합자:한 칸의 공백을 주어 해당 요소의 자식 요소임을 나타낸다.
div h1 {
적용 속성:값;
}div 요소의 h1 요소에게 적용
자식 결합자: 두 요소 사이에 >로 표시되며 직계 자손만 적용 가능
div > h2 {
적용 속성:값;
}<div>
<h2>...</h2> ## 적용
</div>
<div>
<p>
<h2>...</h2> ##미적용
</p>
</div>인접 형제 결합자:해당 요소 다음 요소에 적용되는 값으로, +를 통해 표시한다.
a + p {
적용 속성:값;
}<a>...</a>
<p>...</p> ##적용
<p>...</p> ##미적용일반 형제 결합자:해당 요소 다음의 모든 요소에 적용되는 값으로,동등한 깊이의 요소에만 적용된다
a + p {
적용 속성:값;
}<a>...</a>
<p>...</p> ##적용
<div>
<p>...</p>##미적용
</div>
<p>...</p> ##적용우선도:CSS 적용의 우선순위는 작성 순서, 결합, 선택자에 따라 변하며 아래 표에서의 기준으로 분류 가능하다
아래로 내려갈수록 높은 우선순위를 지닌다
1.유형(태그)선택자 및 의사(가상)요소
2.Class 선택자, 속성 선택자, 의사(가상)클래스
3.ID 선택자
4.inline Css
!important:돌발 상황을 만드는 코드로, CSS 우선순위에서 !important 코드는 위 표에 작성된 우선도를 무시하고 우선적으로 적용하게 한다. 다만 해당 코드는 강제적으로 선택자를 선택하게 만드는 만큼 코드가 길어지거나 오남용한다면 예기치 않는 결과를 초래할 수 있다.
#fontcolor{
color:blue;
}
div {
color:yellow !important;
}<div id=fontcolor>파랑이 아닌 노랑</div>해당 CSS의 적용 결과는 노란색이다.
단위:Css로 요소의 크기를 정할때 사용하며 고정 단위와 가변 단위가 있다.
고정 단위의 대표적인 예시로는 px,pt가 있다.
가변 단위는 여러 가지가 있는데
em은 px 기반 가변 단위로, 1em=1font size이다
font size가 16px이라면 1em=16px,2em=32px으로 환원된다. 또한 em은 합성 단위이므로 div font size=16px,div p font size = 2em, div p span = 2em 이라고 한다면 div p span의 크기는 64px이므로 주의해야 한다.
위처럼 합성을 피하기 위해 rem이라는 단위가 신설되었으며, rem은 font size로만 측정된다. 따라서 위 div p span이 2rem 이라면, 2*16px = 32px이 된다.
%단위는 부모 객체의 크기에 적용되며, %는 부모 크기의 비례해서 결정된다
div {height = 100px, legnth = 100px}
div p {height = 50%, legnth = 50%}이 경우 div p의 크기는 50/50 px이 된다.
vw는 현재 보고 있는 브라우저의 길이를 기반으로 넓이를 만드며, % 단위로 계산된다. 100vw는 브라우저 가로 길이의 100%, 1vw는 1%로 환원된다.
vh는 브라우저의 세로 길이=높이를 기반으로 측정되며 그 외에는 vw와 같다.
vmin은 더 작은 길이를 기반으로 사용되며 가로와 세로 중 더 작은 값을 기반으로 %로 환원한다.
vmax는 더 큰 길이를 기반으로 %로 환원한다.
CSS 꾸미기
글꼴 크기 = font-size
글꼴 = font-family
글꼴의 경우 한 요소에 여러 글꼴을 지정할 수 있으며 해당하는 글꼴을 지원하지 않는 경우 기본 폰트인 sans-serif가 자동으로 적용된다. 또한 글꼴에 공백이 포함되는 경우가 있으므로 따옴표를 씌워줘야 한다.
글꼴 두께 = font-weight
100~900까지 지정 가능하며 기본 글씨체는 normal, 굵은 글씨는 bold로 간단하게 지정 가능하며 부모 요소를 참조하여 얇게 할려면 lighter, 두껍게는 bolder로 지정하면 된다.
글자 색상 = color
정해진 키워드를 통해 변경하거나 16비트 RGB나 255 RGB 형식을 이용할 수 도 있다.
줄 간격= line-height
다양한 단위로 지정 가능하나 보통 1.2 라는 값을 지니며 단위 없이 숫자만 쓴다면 퍼센트로 받아들이게 된다.
글 간격(자간)=letter-spacing
normal 키워드를 기본으로 가지며 주로 em 단위를 통해 지정한다.
배경 색 = background-color
글자 색상과 비슷하게 색을 지정 가능하면 currentcolor를 지정하면 부모 요소의 글꼴 color를 상속받을 수 있다.
배경 이미지 = background-image
url('이미지 경로')를 통해 이미지를 지정 가능하며 파일(프로젝트 내부)나 외부 이미지를 가져올 수 있다.
배경 이미지 반복 = background-repeat
배경 이미지를 반복할 수 있으며 반복의 횟수나 방향 등을 지정 할 수 있다.
repeat = 기본 반복
repeat x/y = x축,y축으로 반복
round = 이미지가 잘리거나 늘어나지 않도록 채워지게 반복
space = 이미지가 잘리지 않게 고르게 반복
no-repeat = 반복 없음
배경 이미지 크기 = background-size
단일 값은 너비, 2개 값은 너비와 높이를 조절 가능하며 contain 키워드는 부모 크기에 맞게 조정되 cover 키워드를 쓰면 제일 작은 크기가 부모의 크기에 맞춰지며 나머지 이미지는 잘리게 된다.
배경 이미지 위치 = background-position
top, right, bottom 같은 키워드 제어, 10px 같은 단위 조절 혹은 right 10px offset 같은 복합 제어가 가능하다.
위 옵션들을 단일 속성으로 제어할려면 background 속성을 활용하여 여러 값들을 공백으로 구분하여 한번에 작성 가능하다. 다만 크기/위치는 형식에 맞게 작성해야 한다.
