CSS
CSS는 Cascading Style Sheet의 약자로, HTML을 꾸며주는 언어이다.
CSS의 구성요소는 선택자 {속성: 속성값;}으로 이루어져 있다. html에서 CSS를 작성
할 때는 코드 끝에 세미콜론이 있어야 한다.
CSS를 연동하는 방법은 3가지가 있다.
1. Inline Style Sheet: 태그안에 직접 원하는 스타일 적용
<h1> style="color: red;">Inline Style Sheet</h1>- Inernal Style Sheet:
<style>안에 넣기
<head>
<style>
h1 {background-color: yellow;}
</style>
</head>- External Style Sheet:
<link>로 불러오기
<head>
<link rel="stylesheet" href="style.css">
</head>캐스캐이딩
CSS의 우선순위를 결정하는 세 가지 요소
1. 순서: 나중에 적용한 속성의 우선순위가 높음
p { color: red;}
p { color: blue;} /* 더 늦게 작성된 p태그에 blue가 적용된다. */- 디테일: 더 구체적으로 작성된 선택자의 우선순위가 높음
p {color: red;}
header p {color: blue;} /* 더 구체적으로 작성된 header의 자식인 p태그에 blue가 적용된다. */- 선택자: style > id > class > type 순으로 우선순위가 높음
<!--선택자에 직접 style을 넣었기 때문에 h3태그는 pink가 적용된다.-->
<h3 style="color: pink" id="color" class="color"> color </h3>
<style>
#color { color: red; }
.color { color: blue; }
h3 { color: yellow;}
</style>CSS 주요 속성
- width, height
.paragraph { width: 500px, height: 500px; }width와height는 넓이와 높이를 설정한다. 고정값은 px, 가변값은 %로 표기한다. 이때 가변값 %는 부모의 박스크기에 영향을 받는다.
- font
.paragraph {
font-size: 50px;
font-family: Arial, sans-serif;
font-style: italic;
font-weight: bold;
}font-family: 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용font-weight: 100-900 사이의 숫자도 입력 가능.
- border
.paragraph {
width: 500px;
height: 500px;
border-style: solid;
border-width: 10px;
border-color: red;
}+한 줄에 이어 쓸수 있음. 이때, 쉼표는 작성하지 않고 띄어쓰기만 하면 됨.(순서 상관 없음)
- background
.paragraph {
background-color: yellow;
background-image: url(이미지 경로);
background-repeat: no-repeat;
background-position: left;
}background-repeat: x축 반복은 repeat-x,y축 반복은 repeat-y, 반복 없음은 no-repeatbackground-position: 공간 안에서 이미지의 좌표 변경- 이미지는 css와 이미지가 같은 폴더 내에 있어야한다.
- 한 줄에 이어 쓸 수 있음. 이때, 쉼표는 작성하지 않고 띄어쓰기만 하면 됨.(순서 상관 없음)
-자료 출처: 엘리스 코딩, AI트랙
