1. CSS란?
- Cascading Style Sheets의 약자
- 마지막에 작성한 규칙, 구체적인 규칙 (p보다는 p #idName)이 우선 적용
- 구성
선택자 {
속성: 값;
속성: 값;
}
2. 스타일 시트 적용
1. 외부 스타일 시트 적용 (권장)
- html문서의 <head>안에 <link>를 사용함
- href = "css파일의 경로"
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title입니다.</title>
<link rel="stylesheet" href="test.css">
</head>
2. 내부 스타일 시트 적용
- html문서의 <head>안에 <style> </style>을 사용
- 외부 스타일 시트보다 우선 적용
- @import : 외부 스타일 시트 불러옴, 스타일 시트의 최상단에 위치해야 한다.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title입니다.</title>
<style>
@import url(test.css);
/*여기 바로 css코드 작성*/
</style>
</head>
3. 인라인 스타일 적용
- 외부 or 내부 시트보다 우선 적용
<p style="color: pink; background-color: aliceblue;">test</p>
3. 박스 모델
1. 속성 값의 개수에 따른 적용
- 값이 1개 일 때 = 모든 면에 적용
- 값이 2개일 때 = {(top & bottom), (right & left)}에 적용
- 값이 3개일 때 = {top, (left & right), bottom}에 적용
- 값이 4개 일 때 = {top, right, bottom, left}로 적용
2. 좌우 가운데 정렬
선택자 {margin : 0 auto;}
[예시코드]
<head>
<style>
.block{
width: 100px;
border: 1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="block">test</div>
</body>
3. 화면의 100% 높이를 유지하기
- 화면 크기를 바꿔도 깨지지 않음
[예시코드]
<head>
<style>
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.header{
position: relative;
height: 70px;
background-color: cornflowerblue;
}
.main{
min-height: 100%;
margin: -70px 0 -50px;
}
.content{
padding: 70px 0 50px;
}
.footer{
height: 50px;
background-color: rgb(20, 71, 112);
}
</style>
</head>
<body>
<div class="header">header : height = 100px</div>
<div class="main"><div class="content">main</div></div>
<div class="footer">footer</div>
</body>
[결과]
*추천 사이트
1. html, css 등 학습할 때 유용한 사이트
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
2. 웹 브라우저 별 테스트
The CSS3 Test
Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly.
css3test.com
'Programming > CSS' 카테고리의 다른 글
| 5. UI(User Inteface) 속성 (0) | 2022.03.12 |
|---|---|
| 4. Text 속성 (0) | 2022.03.12 |
| 3. Font 속성 (0) | 2022.03.12 |
| 2. 선택자 (0) | 2022.03.12 |
| CSS 기초 (0) | 2021.02.08 |