[Front] CSS 기초
CSS
css는 html을 디자인하는 속성 혹은 문서를 의미한다.
CSS는 Selector, property, value의 형태를 가지고 있다.
CSS 적용 방법
html코드에 CSS를 적용하는 방법은 3가지가 있다.
1.inline : inline방식은 말 그대로 라인에다가 정의하는 방식으로 원하는 태그 내에 style 속성을 사용하여 CSS를 적용하는 것이다.
- 형식 <태그 style=”속성 값”> *속성값이 여러가지인 경우 큰 따옴표 안에 모두 정의하고 속성 값마다 세미콜론(;)으로 구분해야한다.
- selector =태그,id,class, property , value=속성 값
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
</head>
<body>
<div>
<p style="color:red; font-size:20px;">
이곳은 문단입니다.
색은 빨간색이죠.
</p>
</div>
</body>
</html>
이런 식으로 디자인 할 수 있다.
2. internel : 내부에서 정의 하는 방법으로 해당 html파일의 <head>태그 내에 <style>태그로 정의하면 된다.
- 형식 : <style> 변경하고자 하는 태그 or id or class{ 속성 값 }
- selector = 변경하고자 하는 태그, property, value = 속성 값
<!DOCTYPE html>
<html>
<head>
<style>
div {
color:red;
font-size:20px
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
</head>
<body>
<div>
<p>
이곳은 문단입니다.
색은 빨간색이죠.
</p>
</div>
</body>
</html>
역시 똑같이 나오는것을 알 수 있다.
3. externel : 외부에서 정의하는 방법으로 해당 html외에 .css로 확장자가 css인 파일을 만들어 적용하고자 하는 html과 연결하여 사용한다.
- 형식 : 형식은 internal <style>태그 내부에 정의 하는 방식과 같다. 다만 css는 style을 위한 파일이기 때문에 style태그를 정의 할 필요 없다.
- 연결 방법 : <link rel=”stylesheet” href=”css파일의 경로” type=”text/css”>태그를 연결 하고자 하는 html의 <head>태그 내에 선언하면 된다.
/* CSS용 주석*/
div {
color:red;
font-size:20px
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css파일이름.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
</head>
<body>
<div>
<p>
이곳은 문단입니다.
색은 빨간색이죠.
</p>
</div>
</body>
</html>
결과 역시 셋다 같다.
4.혼합 : 가장 많이 쓰는 경우로 기본적으로 externel로 정의하고 특별한 부분만 inline이나 internel방식을 사용한다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color:red;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
</head>
<body>
<div>
<p style="font-family:굴림; font-size:20px;">
이곳은 문단입니다.<br>
글꼴은 굴림 입니다.<br>
색은 빨간색이죠.
</p>
<p>
이곳은 정상입니다.
</p>
</div>
</body>
</html>위와 같이 코드를 작성하면 아래와 같은 결과를 얻는데 모두 적용됨을 알 수 있다.
id와 class
선언과 적용 방법 :
이처럼 선언하여 아래처럼 적용하면 된다.
/*클래스*/
.red{
color:red;
}
/*아이디*/
#blue{
color:blue;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
</head>
<body>
<div>
<p class="red">
이곳은 클래스의 영역입니다.
</p>
<p id="blue">
이곳은 아이디의 영역입니다.
</p>
<p class="red">
이곳도 클래스의 영역입니다.
</p>
</div>
</body>
</html>얼핏 둘 다 같은 기능을 하는것 처럼 보이지만 class는 여러번 사용할 수 있다. 하지만 id는 의미처럼 한번 사용할 수 있다. 이는 나중에 JS에서 getElementById()메서드를 통해 지정된 ID를 가진 요소에 엑세스 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
</head>
<body>
<h1 id="myId">이것이</h1>
<button onclick="changeDis()">이걸 누르면</button>
<script>
function changeDis(){
document.getElementById("myId").innerHTML = "이걸로 바뀝니다!"
}
</script>
</body>
</html>
CSS의 적용 우선순위
css는 선언할 수 있는 경우의 수가 많고 겹칠 수 있기 때문에 우선순위를 잘 알고 사용해야한다.
1. inline>internel>externel : 같은 속성의 제어라면 inline의 영향을 받는다.
2. 태그 이름으로 속성을 정했다면 세부설정이 더 깊은 쪽으로 영향을 받는다. 이는 이해하기 어려울 것이므로 예를 통해 알아보자.
div{
font-size:10px;
color:red;
}
/*div영역 내에 p태그를 의미한다.*/
div > p {
font-family:바탕체;
color:blue;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
</head>
<body>
<div>
이곳은 div영역입니다.
</div>
<div>
<p>
이곳은 div영역이면서 p영역입니다.
</p>
나는 div영역 입니다.
</div>
<p>
나는 그냥 p 영역입니다.
</p>
</body>
</html>
이와 같이 작성하면 div안에 있는 p영역 또한 div의 영역이므로 div의 영향을 받지만 div > p 의 보다 세부적인 selector때문에 같은 속성을 가지는 색에 대해서 blue가 나온것을 알 수 있다.
3. id>class>element : id와 class의 영향을 동시에 받는다면 id를 우선적으로 받는다.
'FRONT > CSS' 카테고리의 다른 글
| [Front] CSS Layout (0) | 2020.06.12 |
|---|