CSS 간략 설명
■ CSS란?
CSS는 Cascading Style Sheet의 약자로 웹 사이트의 레이아웃과 글꼴, 색상 등의 디자인을 입히는 역할을 하는 언어로
HTML로 웹 사이트의 구조를 만들었다면, 그 위에 CSS를 사용해서 디자인을 입혀야 멋있는 웹 사이트가 만들어진다.
■ CSS 적용 방법
1. 인라인 스타일 :
태그 style 속성에 직접 작성이 가능하다.
<h1 style="color: red;">FRONTEND 101</h1>
- 빠르고 편리하다.
- 적용해야할 스타일이 많아지면 코드 가독성이 떨어진다.
- html 태그와 style 코드가 혼재되어 있어 유지보수에 좋지 않다.
<!-- style이 너무 길어서 안 좋은 코드 -->
<h1 style="color: red; font-size: 30px; background-color: yellow; font-weight: bold;">FRONTEND 101</h1>
2. style 태그 :
html 파일 내에 css를 작성할 수 있는 방법이다.
<style> 사이에 css 문법을 사용하여 스타일을 작성한다.
<style>
h2 {
color: #408090;
}
</style>
- html 파일에 HTML 코드도 작성하고, CSS도 작성하니 편하고 빠른 방법이다.
- 기능적으로(HTML 구조와 디자인) 분리되지 않았기 때문에 유지보수에 적합하지 않다.
- HTML을 수정하려면 html 파일을 확인하고, 디자인을 수정하려면 css파일을 확인하는 것이 개발하기 좋다.
3. css 파일에 작성
html 파일과 분리하여 css 파일에 따로 작성하는 방법이다.
html 파일에서 어느 css 파일이 쓰였는지 브라우저에 알려야 하므로, 링크를 해주는 태그를 추가해야 한다.
<link href="style.css" rel="stylesheet" type="text/css" />
- link : link 태그로 사용할 css 파일을 링크해준다.
- href : href 속성에 css 파일 경로를 작성한다.
- type : link 태그로 연결되는 파일이 어떤 것인지 알려준다.
여기서 css file을 연결하므로 type 값은 항상 "text/css" 이다. - rel : rel은 HTML file과 CSS file과의 관계를 설명하는 속성으로 css 파일을 링크할 때는 항상 "stylesheet"값을 대입!
■ CSS 작성법
디자인을 적용할 선택자(selector)를 지정하고, 어떤 디자인을 적용할지 작성한다.
위 예제는 <p> 태그의 내용을 빨간색으로 바꾼다는 뜻이다.
콜론 (:) 을 기준으로
- 왼쪽의 color 는 property(속성)이라 한다.
- 오른족의 red는 속성 값이다.
selector(선택자)는 여러 종류가 올 수 있다.
태그이름 뿐만 아니라 class, id 이름도 올 수 있다.
■ tag : 태그이름
p {
font-size: 12px;
}
모든 p 태그의 글씨 크기가 12픽셀로 적용된다.
■ class : .클래스명
selector가 태그였을 때는 단순히 태그 이름만 적어주었다.
하지만 클래스에 디자인을 적용하고 싶을 때는 selector에 .(dot)이 필요하다.
.(dot) 클래스명으로 selector를 작성해야 한다.
.className{
/* 디자인 */
}
.profile-detail {
font-weight: bold;
}
# profile-detail 이라는 클래스가 적용된 태그에는 글씨 두께가 두꺼워진다.
■ id : #아이디명
id에 디자인을 작용하고 싶을 때는 selector에 #이 필요하다.
#idName{
/* 디자인 */
}
#profile {
border-width: 1px;
border-color: black;
border-style: solid;
text-align: center;
}