YEV.log

CSS | CSS파일 연결하기 / 선택자 / Inline-Block 본문

Web/HTML&CSS

CSS | CSS파일 연결하기 / 선택자 / Inline-Block

일렁이는코드 2021. 9. 5. 23:25

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
'Web/HTML&CSS' Related Articles more