CSS 기본 구조와 선택자 알아보기
기본 개념
html에서 몸통 만들어줬다면 이제 옷을 입히고 꾸며줄 차례다.
그러기 위해 css를 사용하는데, Cascading Style Sheet라는 뜻이다.
스타일 시트를 사용하는 여러가지 방법이 있다.
그중 외부에 코드를 작성하고 html에 링크를 삽입하여 연결하는 방법이 가장 좋다
<head>
<link rel="stylesheet" href="파일이름.css">
</head><haed>쪽에 이런식으로 연결해주면 된다. css 파일은 같은 폴더에 있는 게 좋다.
다른 폴더에 있어도 가져올 순 있다.
기본 구조
h1 {color: white;}선택자 {속성: 값;}
이런식으로 스타일을 적용할 대상(선택자)를 정하고, 속성을 사용해 다양하게 꾸며준다.
선택자는 id, class, tag 등이 될 수 있고, 속성은 종류가 굉장히 많다.
속성중에서 중요한 부분, 헷갈리는 부분만 정리할 예정
선택자
html에서 어떤 요소를 꾸며줄지를 불러오는 거다.
예를들어
html의 <h1> 태그는 h1로
banana라는 id는 #banana로
apple이라는 class는 .apple 형태로 가져온다.
| * | 모든 태그를 선택 (사용할 일 없다.) |
| tag | 이름을 그대로 사용 |
| #id | id 이름 앞에 #을 붙여 사용 |
| .class | class 이름 앞에 . 붙여 사용 |
또 선택자를 다양한 방식으로 불러올 수 있다.
| a b | a 안에 있는 b (띄어쓰기 해줘야 함) // |
| a + b | a 바로 뒤에 오는 b (같은 계층) |
| a > b | a 바로 뒤에 오는 b (아래 계층) |
| a [b=""] | b 속성을 갖고있는 a |
| a.b | a요소에 있는 모든 b 클라스들 |
이런식으로 불러오고.. 추가로 위 선택자와 합쳐 사용할 수 있는 것들도 있다. (:hover 이런것들)
'WEB > css' 카테고리의 다른 글
| [css/공부] sticky (0) | 2024.12.24 |
|---|