html파일에 style.css 연동하기
html에서 css를 사용하는 방법은 3가지 정도가 있다. <style> </style> 태그 사용 / style = ";" 이용 / style.css파일 연동. 보통의 경우에는 css파일을 연동하는 방법으로 사용한다.
<head>
<link rel = "stylesheet" type="text/css" href="style.css">
</head>
Selector의 종류
대부분의 경우에는 type선택자와 class 선택자를 많이 쓴다.
h1{ } //TYPE 선택자
a[href="google.com"]{ } //ATTRIBUTE 선택자
#id{ } //ID 선택자
.section{ } //CLASS 선택자
h1,p{ } //그룹 선택자class선택자는 하나의 태그에 2개의 class를 지정할 수 있다. (class = "intro paragraph_01" / class = "intro paragraph_02") 두개는 다른 태그에 속해있는 class 이지만 같은 css 속성을 주고 싶을 때에는 .intro{ } 를 사용하여 속성을 주면 적용된다.
💡 가상선택자
선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다.
:link{ } //방문한 적이 없는 링크
:visited{ } //방문한 적이 있는 링크
:hover{ } //마우스를 롤오버 했을 때
:active{ } //마우스를 클릭했을 때
:focus{ } //포커스 되었을 때(ex.input태그 등):hover의 예제 (h1 부분에 마우스를 롤오버 하면 색상 변경하기)
h1{
color: blue;
background-color: pink;
}
h1:hover{
color: white;
background-color: black;
}
Block vs Inline vs Inline-Block
width / height / margin와 같은 속성들은 Block Element(ex.<h1> <p>)는 사용할 수 있고 , Inline Element(ex. <a>)에서는 사용할 수 없다.
Block Element를 Inline처럼 쓰고 싶다면 display : inline; 속성을 추가해주면 된다. display : inline-block; 은 inline과 block의 기능을 반반 가지고 있어 block처럼 width/ height / margin과 같은 속성을 사용할 수 있다.
반응형
'Web > HTML&CSS' 카테고리의 다른 글
| css | 부모의 너비를 무시하고 자식의 요소를 화면 전체 너비로 설정하기 (0) | 2023.05.15 |
|---|---|
| CSS | display 속성 (inline, block, inline-block) 과 float (0) | 2021.10.07 |
| CSS | position 속성 (static, relative, absolute, fixed) (0) | 2021.10.07 |
| HTML | 시맨틱 웹 Semantic Web, 시맨틱 태그 Semantic Tags (0) | 2021.10.07 |
| CSS | 자주 쓰는 Tag들의 CSS 속성 (0) | 2021.09.06 |