● style 우선순위
이렇게 요소를 선택해서 꾸미고 있는데 모든 클래스로 이름을 맞춰주고 css 작성까지 완료 하였는데 부득이하게 하나만 바꿔야 할 때가 온다면 그냥 타입 안에 style을 적어서 꾸며 주면 된다. 그렇게 되면 자기 태그 내에서도 스타일을 적용 한 것이 가장 우선순위가 되어 그게 적용이 된다.
<h2 class="c1">bbb</h2>
<h2 class="c1" style="background-color: pink; text-align: center"> fff</h2>
● css 파일로 style 불러오기
자주쓰는 스타일이라면 해당 css를 파일로 저장하여 필요 할 때 불러오기 하면 사용하기가 용이해진다. 따라서 꾸민 요소들을 css파일로 따로 저장 해줘서 링크를 불러와서 사용 하는것이 코드가 깔끔해지고 보기 좋다.
▶저장 되어 있는 css 코드
@charset "EUC-KR";
h1{
background-color : yellow;
text-align : right
}
body{
color : blue
}
#h1_1{
color: red;
}
/* 아이디가 h1_1 인 요소 */
h1#h1_2{
color : green ;
}
/* h1태그 중 아이디가 h1_2인 요소 */
.c1{
background-color : black;
color : white
}
h3.c2{
background-color : yellow ;
color : green
}
▶ css 코드 불러오기
<link rel = "stylesheet" href = "mystyle.css" >
이 코드를 통해 css 파일에 저장 되어저 있는 내용들을 불러온다
link : 연결 태그
rel : relation 의 줄임말로 링크 태그에 달리는 링크가 현재 페이지와 어떤 관계를 갖는지 설명하는 속성이다.
href : 경로를 찾는 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1 id="h1_1">ccc</h1>
<h2>ddd</h2>
<h1 id="h1_2">eee</h1>
<h1 class="c1">aaa</h1>
<h2 class="c1">bbb</h2>
<h2 class="c1" style="background-color: pink; text-align: center"> fff</h2>
<h4 class="c2">ddd</h4>
</body>
</html>
'Front > css' 카테고리의 다른 글
| [css] 웹 페이지의 살 붙이기 - border 테두리 꾸미기 (0) | 2023.03.22 |
|---|---|
| [css] 웹 페이지의 살 붙이기 - button 이미지 넣기 (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - position (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - 요소 선택 (1) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - css란 (0) | 2023.03.22 |
