반응형
CSS(Cascading Style Sheets)는 마크업 언어를 꾸미기 위한 언어로 html 등에 사용된다.
폰트를 바꾸거나 배경색을 바꾸는 등 웹페이지의 스타일을 만들어주는 역할을 한다.
사용방법은 세 가지가 있다.
1. inline
<h1 style="color: green; text-align: center;"> heading </h1>한 h1 요소에 대해 색상은 초록, 가운데 정렬로 바꿔준다.
요소 하나하나에 직접 속성을 입력하는 방식으로,
중복이 많이 발생할 수 있으며 가독성이 떨어질 수 있다.
2. <style>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>head 부분에 <style> 태그를 삽입하여 모든 h1 요소에 대해 색상은 파랗게, 가운데 정렬로 바꿔준다.
※ 만약 h1 요소가 여러개 존재하고, 각각에 대해 다른 스타일이 필요한 경우 id 또는 class를 이용할 수 있다.
<h1 id="hd1"> Heading </h1> <!-- unique-->
<h1 class="baz"> other heading </h1>
<h1 class="baz"> another heading </h1> <!-- not unique-->id는 오직 하나의 요소에 대해서만 부여된다.
반면 class는 여러 개의 요소를 포함할 수 있다.
요소의 id나 class를 지정한 이후 해당 id나 class의 스타일을 지정할 수 있다.
※ 이 경우 충돌이 발생할 수 있는데 우선 순위는 다음과 같다.
inline > id > class > type
즉, 아래의 경우
<html>
<head>
<title>title</title>
<style>
h1 { /* type */
color: red;
}
#hoo {
color: green;
}
</style>
</head>
<body>
<h1 style="color:blue;">heading1</h1> <!-- inline -->
<h1 id="hoo">heading2</h1> <!-- id -->
<h1>heading3</h1>
</body>
</html>heading1의 색상은 파랑이 될 것이고 heading2는 초록, heading3는 빨강이 된다.
3. css 파일
확장자가 .css인 별도의 파일을 작성한 후, html의 head 부분에 다음과 같이 추가해주기만 하면 된다.
<head>
<link rel="stylesheet" href="style.css">
</head>앞서 작성했던 html 파일에 다음과 같이 style 태그를 추가하면,
<style>
h1 {
color: blue;
text-align: center;
}
/* 주소가 "https://google.com" 인 하이퍼링크 요소의 색상을 변경 */
a[href="https://google.com"] {
color: red;
}
/* id가 hd1인 요소에 대해 색상을 변경 */
#hd1 {
color: red;
}
/* class가 baz인 요소에 대해 색상을 변경 */
.baz {
color: yellow;
}
/* margin은 요소의 바깥쪽에 여백을 만들어주며
padding은 요소 내부에 여백을 만들어준다. */
div {
border: 3px dashed black;
background-color: skyblue;
padding:10px; <!-- inside -->
margin: 30px;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: Bold;
}
/* border-collapse는 테이블 한 칸 한 칸마다 그려진 경계선이 겹쳐질 경우, 이를 하나로 만든다. */
table {
border-collapse: collapse;
background-color:orange;
width: 150px;
height: 100px;
margin: 30px; <!-- outside -->
}
/* td요소와 th요소 모두에 경계선과 패딩을 만들어준다.*/
td,th {
border: 2px solid black;
padding: 10px;
}
button {
background-color:green;
}
/* 마우스를 갖다대면 색이 변한다 */
button:hover {
background-color:orange;
}
</style>이렇게 된다.
반응형
'Front-end' 카테고리의 다른 글
| HTML 기본 구조와 태그(tag), 요소(element), 속성(attribute) (0) | 2023.01.19 |
|---|---|
| submit 버튼 쓰지 않고 submit하기 (0) | 2023.01.12 |
| CSS / 애니메이션과 트랜지션 animation & transition (0) | 2022.05.23 |
| SASS (0) | 2021.05.13 |
| CSS로 반응형 웹 디자인하기 (0) | 2021.05.12 |
댓글