오늘의 주제
기존에 html에 작성한 style 속성을 css 파일로 분리해서 만들고, CSS selector, class, id에 대해서 알아보려 합니다.
CSS 파일로 분리해 보자
html에 style 속성으로 웹페이지를 꾸미다 보면, style 속성에 들어가는 코드들이 점점 길어지며 보기도 번잡하고, 더러워지는 코드를 확인할 수 있다.
그래서 우리는 이 style 속성을 css파일로 빼서 작성함으로써 html 코드를 간단하게 유지할 수 있다.
우리가 작업하고 있는 폴더에 .css로 끝나는 파일을 만들고, html 코드에 다음과 같이 작성해야 css 파일에 있는 style 들이 html 코드에 적용될 수 있다.
<link href="css/main.css" rel="stylesheet">필자는 추후 편리함을 위해 작업 폴더에 css라는 폴더를 만들었고, 그 폴더에 있는 main.css를 현재 작업중인 index.html에 적용시키려한다.
이제 css 파일에 스타일을 작성해보도록 하겠다.
.profile {
width: 200px;
margin-top: 30px;
display : block;
margin-left:auto;
margin-right:auto;
}이 코드는 우리가 전 시간에 만들었던 프로필의 이미지에 대한 스타일 속성을 적은 코드이다. 스타일 속성들을 중괄호로 묶어주고, profile이라는 클래스명을 지정하여 앞에 .을 붙이고 작성해주면 된다.
그리고 이렇게 작성한 css 파일을 html에 적용하려면, 프로필의 이미지에 저 클래스 명을 넣어주어야 한다.
<img src="mokoko.jpeg" class="profile">CSS selector에 대해서 알아보자
위에 우리가 사용했던 class 처럼 CSS에는 여러가지 selector가 존재한다.
.title {
font-size: 30px;
text-align:center
}
p {
text-align: center;
}
#special {
font-size: 10px;
}위에서 부터 class selector이다. .클래스명{} 이런식으로 작성하며 저 클래스명을 가진 모든 html 요소에 스타일을 적용한다.
두번째는 태그 selector이다. html에 존재하는 모든 p 태그에 스타일을 적용한다.
마지막으로는 아이디 selector이다. 클래스와는 다르게 #아이디명{} 이렇게 작성하며 저 아이미를 가진 모든 html 요소에 스타일을 적용한다.
저 셀렉터의 우선순위는
style 속성 > id > class > tag
순서로 적용된다.
여기서 우선순위란 만약 한 html 요소에 4가지 셀렉터가 모두 적용되어 있을 경우, 해당 우선순위를 따져 스타일이 적용된다는 것이다.
마무리
이번에는 html에 적용되었던 style 속성을 css파일로 분리하여 작업하는 방법에 대해서 알아보았다. 다음시간에는 웹페이지의 레이아웃을 작성하는 법에 대해서 공부해보려 한다.
