CSS(Cascading Style Sheet, 스타일이 전이되는 문서). HTML를 보기좋게 꾸밀 때 사용된다.
대표적인 디자인의 영역이다.
선택자
<style>
/* 태그 선택자 */
form {
}
/* 클래스 선택자 */
.box {
}
.f-color-green{
color : green;
}
.w-200{
width : 200px;
}
/* 아이디 선택자 */
#user-id{
}
</style>
<div class="box">
<form action="#">
<input type="text" id="user-id" class="f-color-green w-200">
<input type="submmit" value="send">
</form>
</div>tag, class, id는 필요에 따라 만들 수 있다.
그러나 tag에 경우 이미 준비되어 기능이 있는 태그를 사용하는게 유리하다.
.(점)을 사용하면 클래스, #(샾)을 사용하여 선택한다.
포괄적이면서 넓은 범위일수록 구체적이면서 좁은 범위일수록 동일한 위치라면 아래(최신)에 있을수록 적용범위가 달라진다.
스타일이 적용되는 우선순위가 있다는 의미이다.
tag → class → id 순으로 구체적이다.
중첩된 태그를 선택하는 방법이 있다.
자식 선택자
- 특정 부모 요소의 바로 아래 하위 요소 자식 요소 을 선택한다.
- 자식 선택자는
>를 사용해서 정의한다.
div>p {
color: brown;
font-size: 12px;
}자손 선택자
- 특정 부모 요소의 모든 하위 요소 자손 요소 를 선택한다.
- 자식 선택자는 공백 을 사용해서 정의한다.
div span {
color: purple;
font-style: italic;
}속성
정말로 많다.
1. 텍스트 관련
- color: 폰트 컬러
- font-size: 폰트 사이즈
- font-family: 글자체
- text-align: 정렬
2. 너비와 높이
- width: 너비
- height: 높이
- min-width / max-width: 최소 • 최대 너비
- min-height / max-height: 최소 • 최대 높이
- 상대 크기
- 예시) width: 50vw(뷰포트 너비의 50%) / width: 50%(부모 요소 너비의 80%)
3. 단위(Unit)
- 절대 단위: px
- 상대 단위: %, em, rem(보통
<html>의 글꼴 크기 기준), vw, vh
4. 배경 관련 속성
- background-color: 배경색
- background-image: 배경 이미지
- background-repeat: 반복 방식 지정
5. 그 외
- opacity, cursor, visibility, ...
상속
또한 속성들은 중첩된 태그를 작성하면 부모와 자식, 자손의 개념을 사용한다.
부모에서 지정한 속성 중에 상속되어 적용되는 스타일이 있기 때문이다.
- 상속 O : color, font-family, fint-size, line-height, text-align, visibility, ...
- 상속 X : margin, padding, border, width, height, background, ...
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
선택자 연습 사이트이다.
첫번째 정답은
plate
728x90
'SeSAC 클라우드 기반 JAVA 풀스택 웹개발 > 2. HTML & CSS' 카테고리의 다른 글
| [SeSAC] CSS(Flex) (0) | 2024.10.21 |
|---|---|
| [SeSAC] CSS(박스 모델, 요소 조정) (0) | 2024.10.16 |
| [SeSAC] HTML (1) | 2024.10.16 |
