1.개발자들은 보통 css와 html을 같이 사용하지 않는다.
따라서 이를 분리해서 사용하는데 문제는 html과 css를 연결해야 한다는 것이다.
이를 <href>, <type>, <rel>를 이용해서 해결한다.
<href> - 앵커 요소와 마찬가지로 이 속성의 값은 CSS 파일의 주소 또는 경로여야 한다.
<type> - 이 속성은 연결 중인 문서 유형(이 경우 CSS 파일)을 설명한다.
<rel> 이 속성은 HTML 파일과 CSS 파일 사이의 관계를 설명한다.-HTML 파일과 CSS 파일을 함께 연결하면 <링크> 요소는 다음과 같다.
<head>
<title>Vacation World</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>2.class
코드를HTML에서 다음과 같이 설정한 경우
<h1 class="title">Top Vacation Spots</h1>
CSS에서는 이와 같이 써야 한다.
.title{
}
2-1. Multiple class
HTML에서 다음과 같이 설정한 경우
<h1 class ="title uppercase">Top Vacation Spots</h1>
CSS에서는 이와 같이 multiple이 가능하다.
.title{color: teal;}
.uppercase{text-transform:uppercase;}3.ID Name
HTML에서 다음과 같이 ID를 설정한 경우
<h1 id="article-title" class ="title uppercase">Top Vacation Spots</h1>
CSS에서는 해시태그를 통해 가져온다.
#article-title {
font-family: cursive;
text-transform: capitalize;
}4.Class와 Id의 차이
Class – 많은 요소에 걸쳐 재사용됨
ID - 한 요소만 스타일링하도록 되어 있음.(태그와 Class스타일 무시)
5.Specificity
CSS에서 가장 좋은 방법은 가장 낮은 수준의 특수성을 사용하면서 요소를 스타일링하는 것이다. 따라서 요소가 새로운 스타일을 필요로 할 경우 오버라이드하기 쉽다.
따라서 CSS에서는 ID>Class>태그 순으로 선택하는 것이 바람직하다.
6.선택기 체인
CSS 규칙을 작성할 때, HTML 요소가 동시에 둘 이상의 CSS 선택기를 갖도록 요구할 수 있다.
h2.destination{
font-family: cursive;
}-
기본적인 CSS 개념
1) 기초적인 틀
선택자(selector) {
속성: 값;
속성: 값;
}2) 기본 속성
width: 가로 너비
heigth: 세로 너비
font-size: 폰트 크기
margin: 바깥 여백
padding: 안쪽 여백
position: 위치 기준(부모 요소 기준)
내실 있는 프론트엔드 개발자가 되기 위해 오늘도 최선을 다하고 있습니다.