css# 기초 문법
- 웹/css
- 2020. 8. 19.
CSS
CSS (Cascading Style Sheet)
- html문서의 모든 요소에 대해 스타일을 적용할 수 있는 표준 규격(디자인적인 부분)
- 스타일시트를 작성할 때는 CSS라는 언어를 사용한다.
- 웹 브라우저는 스타일시트를 해석하여 해당 요소의 디자인을 결정한다.
-주요 기능-
html 태그의 글자색을 바꿀 수 있다.
글자의 정력방식을 바꿀수있다.
배경색을 지정할 수 있다.
이미지등을 지정할 수 있다.
외에도 여러가지 기능이 있다.
위의 기능은 html로도 사용 가능하지만
사용의 편의성과 일괄성 때문에 css를 사용한다
css는 style라는 태그를 명시해서 사용한다.
| <style type ="text/css"> |
-인라인 스타일 지정-
하나의 태그에 직접 스타일을 지정하는 방법
하나의 태그에만 원하는 스타일 지정
단점 : 같은 스타일을 사용하는 태그가 많다면 스타일 코드를
작성하는 작업이 많아진다는 단점이 있음
//인라인 스타일
<html>
<head>
<title>인라인 스타일 적용하기</title>
</head>
<body>
<h2 style="font-family:돋음;font-size:14pt">인라인 스타일 적용하기</h2>
인라인 스타일은 하나의 태그에 스타일 정보를 적용할 때 사용한다.<br>
<span style="color:green;font-weight:bold"> 사용하기는 편리</span>하지만 스타일 정보를<br>
수정하려면 일일이 스타일이 적용된 태그를 찾아다니면서 수정해야 하는<br>
<span style="color:red;font-weight:bold">불편</span>이 있다.
</body>
</html>위 코드는 스타일 하나 지정할때마다 태그하나하나에 스타일을 적용해야한다는 단점이 있다.(인라인)
-CSS로 지정-
//style로 css지정
<html>
<head>
<title>HEAD태그에 스타일 추가하기</title>
<style type="text/css">
body{
line-height:170%;
}
h2{
font-family:돋움;
font-size:14pt;
}
span{
color:Green;
font-weight:bold;
}
</style>
</head>
<body>
<h2>HEAD태그에 스타일 추가하기</h2>
스타일시트를 html문서의 <HEAD>태그에 추가하면<br>
<span>같은 태그에 같은 스타일을 한꺼번에 지정</span>할 수 있다.<br>
하지만<span>같은 태그라 하더라도 조금씩 다른 스타일을 지정하려면<br>
다른 방법을 사용</span>해야 한다.
</body>
</html>위 코드는 head태그에 style시트를 추가해서 같은 태그에 같은 스타일을 한꺼번에 지정 할 수 있다.(css)
-html에서 css파일 지정해서 스타일 사용하기-
//파일명 csstest.css
body{
line-height:170%;
}
h2{
font-family:돋움;
font-size:30pt;
}
span{
color:green;
font-weight:bold;
}
//test.html 위의 css문서를 참조해서 스타일 정의 할 수도 있다.(실행은 이걸로)
<html>
<head>
<title>html문서에 css포함하기</title>
<link rel="stylesheet"type="text/css" href="csstest.css">
</head>
<body>
<h2>HEAD태그에 스타일 추가하기</h2>
스타일시트를 html문서의 <HEAD>태그에 추가하면<br>
<span>같은 태그에 같은 스타일을 한꺼번에 지정</span>할 수 있다.<br>
하지만<span>같은 태그라 하더라도 조금씩 다른 스타일을 지정하려면<br>
다른 방법을 사용</span>해야 한다.
</body>
</html>위 코드는 두개의파일 (html과 css가 있고) html파일에서 css파일을 지정해주면 그 css파일의 스타일을 쓸 수 있다.
css파일을 참조해도 내가 새롭게 정의하면 내가 새롭게 정의한 내용으로 바뀐다.(맨 마지막에 적용한 내용으로 적용)
//스타일의 적용 순서
<html>
<head>
<title>html문서에 css파일 포함하기/내가 새롭게 정의</title>
<style type="text/css">
h2{
color:red;
font-family:궁서;
}
@import url("csstest.css");
</style>
//위의 import를 해주는거랑 같은의미
<!--<link rel="stylesheet"type="text/css" href="csstest.css">-->
</head>
<body>
<h2>HEAD태그에 스타일 추가하기</h2>
스타일시트를 html문서의 <HEAD>태그에 추가하면<br>
<span>같은 태그에 같은 스타일을 한꺼번에 지정</span>할 수 있다.<br>
하지만<span>같은 태그라 하더라도 조금씩 다른 스타일을 지정하려면<br>
다른 방법을 사용</span>해야 한다.
</body>
</html>
-ID를 이용해서 스타일지정 (#을 이용해서 지정)-
//같은태그지만 다른 ID를 사용해서 다른 스타일 적용가능
<html>
<head>
<title>ID로 스타일 적용하기</title>
<style type="text/css">
//title1,positive라는 id 생성
#title1, #positive{
font-size:14pt;
color:blue;
}
#negative{
color:red;
font-size:14pt
}
</style>
</head>
<body>
<h2 id="title1">ID로 스타일 적용하기</h2>
스타일시트에 대그의 ID특성값을 이용해서 스타일을 정의하면 <br>
HTML 문서의 태그들에 개별적으로 스타일이 적용된다.
<h2 id="positive">장점</h2>
동일한 태그라 하더라도 서로 다른 스타일을 적용 할 수 있다.
<h2 id="negative">단점</h2>
ID는 유일한 값이므로 같은 스타일을 다른 태그에 적용할 수 없다.
</body>
</html>위 코드는 태그가 같지만 id를 만들어서 각각 다른 스타일을 적용이 되는것을 볼 수 있다.
명확하게 스타일 지정할때 id를 사용한다.
-클래스를 이용해서 스타일 지정(.을 이용해서 지정)-
//클래스 장단점, 사용법
<html>
<head>
<title>클래스로 스타일 적용하기</title>
<style type="text/css">
.title{color:blue;font-size:14pt;}
.subtitle{color:red;font-size:12pt;}
<!--h2태그의 subtitle에는 따로 적용한다 !-->
h2.subtitle{color:black;font-size:12pt;}
</style>
<link rel="stylesheet" href="css/csstest.css">
</head>
<body>
<h2 class="title">클래스로 스타일 적용하기</h2>
스타일 시트에 html 태그의 class 특성값을 이용해서 스타일을 정의하면<br>
태그의 종류에 관계없이 같은 클래스를 가지는 모든 태그에 스타일이 적용된다.
<h2 class="subtitle">장점</h2>
스타일을 ID보다 유연하게 적용할 수 있다.
<h2 class="subtitle">단점</h2>
<span class="subtitle">너무많은 css클래스가 정의되지 않도록 주의해야한다.</span>
</body>
</html>
-여러가지 클래스를 하나의 태그안에 적용 시키기
//하나의 태그에 여러가지 클래스를 적용할 수 있다.
<html>
<head>
<title>한번에 여러가지 클래스를 지정하고 여러클래스스타일 적용하기</title>
<style type="text/css">
.title{color:blue;font-size:14pt;}
.bold{font-weight:bold}
.red{color:red;}
.blue{color:blue;}
.subtitle{color:black;font-size:12pt;}
</style>
<link rel="stylesheet" href="css/csstest.css">
</head>
<body>
<h2 class="title bold blue">클래스로 스타일 적용하기</h2>
스타일 시트에 html 태그의 class 특성값을 이용해서 스타일을 정의하면<br>
태그의 종류에 관계없이 같은 클래스를 가지는 모든 태그에 스타일이 적용된다.
<h2 class="subtitle blue">장점</h2>
스타일을 ID보다 유연하게 적용할 수 있다.
<h2 class="subtitle red">단점</h2>
<span class="subtitle">너무많은 css클래스가 정의되지 않도록 주의해야한다.</span>
</body>
</html>
클래스를 이용해서 스타일을 지정하면 태그의 종류상관 없이 유연하게 쓸 수 있다는 장점이 있다.
여러가지 클래스를 한번에 지정할 수 있기 때문에 style안에서 여러가지 스타일을 미리 만들어놓고 사용하면 편하다.
'웹 > css' 카테고리의 다른 글
| [css] Box model 박스모델의 구조 (0) | 2021.06.28 |
|---|---|
| [css] 여백주기 Margin 과 Padding (0) | 2021.06.28 |
| [css] border-style 종류 (0) | 2021.06.28 |
| [css] 백그라운드 이미지 적용하기 (background-image 속성) (0) | 2021.06.28 |
| [css] 선택자 ( Selector) (0) | 2021.06.28 |