CSS 파일 참조
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
</head>- CSS 파일을 사용하기 위해서는 head 내에 link 태그로 css 파일을 연결해줘야 한다
- CSS는 Cascading Style Sheet로 스타일 보관 파일
기본 CSS 스타일링
.profile {
width: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}- .css 파일 내에 profile 이라는 class 를 위와 같이 만들어 스타일을 지정해줄 수 있다
p {
text-align: center;
}- 태그 자체에 전역적 스타일을 지정하기 위해서는 . 없이 태그명을 적어 스타일링 할 수 있다
#special {
text-align: center;
}- html에서 id를 사용한 태그(여기서는 id="special")의 스타일은 #을 붙여 지정할 수 있다
- .profile p #special 은 selector 라고 부른다 > class selector, tag selector, id selector
- 각 selector가 중복될 경우 우선 순위는 style > id > class > tag(예를 들어 모두 color 지정이 되어 있고 한 태그가 모든 selector 중복 사용될 경우, html의 style 속성이 최종적으로 적용)
HTML 내 스타일링 적용
<body>
<img src="lion.png" class="profile">
</body>- 지정한 스타일을 적용하려면 html 파일에서 class 속성을 이용해 삽입하면 된다
eunji yang