CSS
- 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
- CSS를 활용하여 웹 사이트의 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다.
- 화려하고 심미적인 부분 뿐만 아니라, 콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인에도 유용하고, 사용하기에 따라 색약이나 장애인이 보다 편리하게 웹 애플리케이션을 이용할 수 있도록 할 수도 있습니다.
- 훌륭한 내부 기능을 가진 애플리케이션이라도 UI(user interface)가 없으면 사용자가 원활하게 사용하지 못한다.
CSS 문법 구성
body { //셀렉터
color: red; // 속성 : 속성값
}
- 셀렉터 : 요소 이름이나 id, class
- 속성 : 요소에 적용할 속성 명
- 속성 값 : 요소에 적용할 속성의 값
CSS 스타일 적용
- 인라인 스타일 : html 내부의 같은 줄에서 스타일을 적용
<!--index.html-->
<head></head>
<body>
<div stye="color : red;">
</body>
- 내부 스타일 시트 : html 내부 <style> 요소 내에서 스타일 적용
<!--index.html-->
<head>
<style>
div { color : red; }
</style>
</head>
<body>
<div>
</body>
- 외부 스타일 시트 : 별도의 css 파일을 생성하여 스타일 적용
<!--index.html-->
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div stye="color : red;">
</body>
/* index.css */
div {
color : red;
{
CSS Selector
기본 셀렉터
- 전체 셀렉터
- HMTL 페이지 내부의 모든 요소 선택
- * { color : red; }
- 태그 셀렉터
- 주어진 모든 태그 선택
- p { color : red; }
- 클래스 셀렉터
- 주어진 값(class1) 에 해당하는 class 속성값을 가진 모든 태그 선택
- 동일한 값을 갖는 요소가 여러개 존재 가능
- .class1 { color : red; }
- ID 셀렉터
- 주어진 값(id1) 에 해당하는 id 속성값을 가진 모든 태그 선택
- 하나의 요소만 id 값을 가질 수 있다
- #id1 { color : red; }
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
자식/후손/형제 셀렉터
- 자식 셀렉터
- 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
- div > p {}
- 형제 셀렉터
- 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
- div ~ p {}
<body>
<div></div>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
</body>
- 후손 셀렉터
- 첫 번째로 입력한 요소의 모든 자식인 요소를 선택
- div p {}
- 인접 형제 셀렉터
- 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택
- div + p {}
<body>
<div></div>
<p></p> <!-- 선택 -->
<p></p>
<p></p>
</body>
자식/후손/형제 셀렉터
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
input[type="text"]:valid { }
input[type="text"]:invalid { }
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
CSS 속성
* {/* */
/* 색상 */
color: #155724; /* 글자 색상 */
background-color: #d4edda; /* 배경 색상 */
border-color: #c3e6cb; /* 테두리 색상 */
/* 폰트 */
/* 절대 단위: px, pt || 상대 단위: %, em, rem(상대적 단위에 많이 쓰임), ch, vw, vh 등 */
/* 글꼴 속성 */
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
/* 폰트 사이즈 */
font-size: ;
/* 폰트 굵기 */
font-weight: ;
/* 폰트 밑줄, 가로줄 */
text-decoration: ;
/* 폰트 그림자 */
text-shadow: ;
/* 폰트 자간 */
letter-spacing: ;
/* 폰트 행간 */
/* 수직 정렬 : 정렬하고 싶은 영역의 높이와 동일하게 적용 */
line-height: ;
/* 정렬 */
/* 가운데 정렬 : 정렬하고 싶은 영역의 부모 영역에 center 적용 */
text-align : ;
/* 영역 */
/* 영역의 테두리를 선으로 감싸기 */
border: 1px solid white;
/* 속성을 border-box : margin,border,padding 을 포함하여 크기 측정 */
box-sizing: ;
/* 요소의 외부 여백 */
margin: ;
/* 요소의 내부 여백 */
padding: ;
}
