◎CSS의 개요
:CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격
:초기의 웹은 HTML 하나로 문서의 뼈대도 만들고 꾸미기도 하지만 공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는등의 번거로움이 존재 했는데 이런 문제를 해결함과 동시에 웹페이지의 내용과 스타일 (표현)을 분리해주어 역할 분담도되는 효과를 가져옴
◎CSS의 사용 방법
:CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이
- HTML 태그의 style 속성을 이용
- <style>태그를 통해 HTML 문서 내부에 기술
- .CSS 파일로 분리하여 HTML문서에 연결
▶HTML 문서 내부에 기술
▶태그 선택자
:처음 사용하며 해당되는 태그 전부에 스타일을 적용
태그이름 { 속성1: 속성값1; 속성2: 속성값2; } 
▶id, class 선택자
:태그에서 설정한 id 나 class 속성에 따라 스타일을 지정
(참고:HTML 태그의 속성)
:id 선택
#아이디{ 속성1:속성값; 속성2:속성값; } :class선택
.box{ background-color:blue; }
▶부모자식 선택자
:상속관계에 있을때 상위 태그 영역에만 속성값을 지정해 줌
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
ul li{
color: red;
}
#lecture > li { //부모자식 선택자
border: 1px solid red;
}
ul,ol{ //같은 코드 중복일때
background-color: seagreen;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="lecture">
<li>HTML</li>
<li>CSS
<ol>
<li>selector</li>
<li>declation</li>
</ol>
</li>
<li>JavaScript</li>
</ol>
</body>
</html>
▶margin, cpadding 속성
:margin 과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미
:margin 과 padding 은 border 을 경계로 나뉨
:방향
- margin: 20px 같은 표현은 상하좌우 모두 20px의미
- margine: 30px 10px 은 상하 30px, 좌우 10px 를 의미
- margine: 30px 10px 20px 50px 은 위30px, 오른쪽 10px, 아래20px 왼쪽50px 의미
#box{ margin: 10px; padding: 20px }
▶margin, cpadding 속성
:text-align 속성은 텍스트의 정렬 방향을 의미
#아이디 { text-align: right; }
#아이디 { text-align: left; }
#아이디 { text-align: center; }
(※ 이 외의 기능들은 구글링을 통해서 찾아서 사용)
'프론트앤드 > CSS' 카테고리의 다른 글
| CSS 배경화면 여백주기 (0) | 2022.02.16 |
|---|
댓글