알고리즘 바로가기 
보안 포스트 바로가기 
JAVA 바로가기 
리눅스 서버 바로가기 
CSS(Cascading Style Sheet) -종속형 시트
기존 HTML 문서에서 스타일을 표현하려면 일일히 태그를 달아야 하며,
HTML 문서 내에서만 활용이 가능하다.
따라서 그것을 다양한 문서에서 이용할 수 있도록 재사용성을 증가시키고
이식성을 높이면서 HTML 문서의 가독성을 높여주기 위해 고안되었다.
CSS는
Selector(선택자)
h1 { 선택자의 선언
color : red;
property : value;
(스타일속성 : 속성값)
으로 이루어져 있다.
// 콜론으로 매핑시키며, 문장의 끝애 세미콜론을 붙여 구분한다.
}
font 속성
font-family : 글꼴 // 나눔고딕, koverwatch등
font-size : 글자 크기 // 30px등
font-weight: 글자 두께 // bold, 100~900 [normal, default 400, bold, default 700]
font-style 글자 스타일 // 글자 스타일 italic
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- 선택자를 h1으로 하였으므로, h1태그에 대한 색깔이 바뀐다 -->
<style type="text/css">
h1{
color : #FF92B1;
}
p{ font-family: 궁서체;
font-size: 50px;
font-weight: bold;
font-style : italic}
p2{ font-family: 궁서체;
font-size: 50px;
font-weight: bold;
font-style : italic;
color : red}
pasta_eat { font-family: koverwatch;
font-size: 40px;
font-weight: bold;
font-style: italic;
color: blue }
</style>
</head>
<body>
<p> HTML은 정보 </p>
<p2> CSS는 디자인 </p2>
<br><pasta_eat> 점심은 파스타</pasta_eat>
</body>
</html>기본적인 CSS 사용 예제이다
선택자를 head에서 선언하여 태그화 시켜
body에서 사용하도록 할 수 있다.
혹은 이미 존재하는 선택자 태그 (p, h1 등 ) 이라면
head에 선언된 선택자로 대체되게 된다.
선택자: 전체 선택자, 태그선택자, 아이디선택자, 클래스선택자, 계층선택자 등이 존재한다.
계층선택자: 자식 선택자, 자손 선택자,
【 전체 선택자 】
*로 표시되며 웹 문서 내 모든 요소를 선택한다 {} 사용
【 타입 선택자 】
위의 예제에서 사용한 것고 ㅏ같은
p { color:black; } 등
【 아이디 선택자 】
#기호로 표시되며, 특정한 요소 선택
HTML 구조의 공간분할을 적용할 때
【 클래스 선택자 】
마침표(.)기호로 표기되며 특정한 요소 선택
공통적 스타일을 적용할 때
『id 선택자』는 body 태그 안에 한개만 존재
정의한 후 한 페이지에서 한번만 사용, 그렇지 않으면 웹 표준 테스트에서 오류
한 페이지에 한번만 들어가는 로고, 상단메뉴, 하단정보 등 스타일 정의할 때 사용
『클래스 선택자』 선택자는 여러개의 태그에 동시에 적용될 수 있으며
몇 번이고 재사용 가능
반복적으로 사용되는 스타일, id로 정의해준 구역에 세부 스타일 정의할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<style>
#liid_01{
font-weight:bold;
}
.class_01{
color : blue;
}
.class_02{
color : red;
}
.class_03{
color : green;
}
.class_04{
font-style : italic;
}
</style>
<body>
<h1> CSS 타입 선택자</h1>
<p> 웹 페이지를 꾸며주는 시트 언어</p>
<details>
<summary>컴퓨터 조립하는 방법</summary>
<ul id = "liid_01">
<li class="class_01"> 메인보드에 CPU와 쿨러를 장착한다.</li>
<li class="class_02"> 메인보드 메모리 슬롯에 메모리를 장착한다.</li>
<li class="class_03"> 파워 서플라이를 케이스에 조립한다.</li>
<li class="class_01"> 메인보드를 케이스에 조립한다. </li>
</ul>
</details>
<strong class="class_04"> 선정리 하는 방법 </strong>
<ol>
<li class="class_01"> 케이블 타이를 준비한다.</li>
<li class="class_02"> 같은 위치로 가는 선끼리 엮는다.</li>
<li class="class_03"> 선을 모두 분류하여 케이블타이로 묶어 정리한다.</li>
<span>케이블 타이가 너무 꽉 조여 선이 손상되지 않도록 주의</span>
<li class="class_01"> 마감 처리 </li>
</ol>
</body>
</html>liid_01은 하위 li에 대해 동일하게 bold체를 적용하므로 id로 묶어주었고
그 아래 색상을 각각 조정하기 위한 class를 선언해주었다.
【 계층 선택자 】 div
트리형태로 구성됨.
예를 들어
body
h1 p ul
li li li 가 있다면,
p의 근접 후행은 ul이고
h1 p ul 은 형제 관계이다.
div 띄고 li를 쓴다면 ul 아래의 li를 모두 가져올 것이다.
div ul>li 이라 한다면 자식선택자를 가져올 것이다.
div li+li 라고 쓴다면 근접후행한 li를 가져올 것이다.
div li~li 라고 쓴다면 후행한 모든 li를 가져올 것이다.
[공백(스페이스)]: 자손 선택자
*: 전부선택
> : 자식 선택자
+ : 형제(근접후행) 선택자
~ : 형제(후행) 선택자
【 그룹 선택자 】
h1, span, li{
color: blue;
font-size:50px;
}
이미 선언된 h1, span, li의 색상, 폰트 속성만을 한꺼번에 그룹으로 묶어 바꿀수 있다.
:first-child selects all first child elements.
p:first-child selects all first child p elements.
div p:first-child selects all first child p elements that are in a div.
