<!--
스타일 시트는 HTML 요소를 선택하여 요소의 배치(Layout)와 스타일을 변경할 때 사용한다.
HTML 요소를 선택할 때 선택자(selector)를 사용한다.
스타일 시트 적용 방법은 작성 위치에 따라 인라인 방식 적용, 내부 방식 적용, 외부 방식 적용으로 구분한다.
인라인 방식은 style 속성의 값으로 스타일 속성과 스타일 값을 적용하고 내부 스타일 시트는 <style> 태그 내부에 스타일 속성과 스타일 값으로 스타일을 적용하고 외부 스타일 시트는 별도의 *.css 파일을 외부에 저장한 후 이 파일을 웹 문서(*.html)에 포함시켜서 스타일 시트를 적용한다.
기본문법:
선택자와 CSS블록({ })으로 구성되며, CSS 블록 내부에는 스타일 속성과 스타일 값으로 구성된다.
선택자는 요소를 선택할 때 사용한다. CSS블록의 스타일 속성과 스타일 값은 콜론(:)으로 구분하며, 스타일 값 뒤에는 세미콜론(;)을 붙인다.
적용 우선 순위: 인라인 스타일시트> 내부 스타일시트> 외부 스타일시트
스타일 시트 적용 우선 순위: 아래에 작성하는 것이 우선 순위가 높다.
스타일 시트의 상속성 : 위에서 작성한 스타일 시트는 아래쪽에 영향을 미친다.
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>스타일시트 기본 문법</title>
<link rel="stylesheet" href="./css/style.css">
<style>
.box { width: 300px; height: 200px; background: #fc0; }
</style>
</head>
<body>
<div style="width: 300px; height: 200px; background: blue;"></div>
<div class="box"></div>
<div class="out"></div>
</body>
</html>
------------------------ style.css 파일
@charset "utf-8";
/*CSS Document*/
@import url(./css/reset.css);
.out { width: 300px; height: 200px; background: #0f0; }
-----------------------
<!--
기본 선택자: 스타일 시트를 적용할 때 기본 선택자만 사용하려고 노력해야한다.
1.전체 선택자: 웹 문서의 모든 요소를 선택하는 선택자
2.태그 선택자: 요소명으로 요소를 선택하는 선택자(시멘틱 태그, h태그)
3.클래스 선택자: 클래스명으로 요소를 선택하는 선택자(div, span, p 등)>대부분의 요소에 사용
4.아이디 선택자: 아이디명으로 요소를 선택하는 선택자 >자바스크립트와 제이쿼리에 관련된 박스에 사용한다.
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>기본선택자</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* box-sizing:border-box; 는 박스의 패딩값과 보더값을 박스의 크기 값에 포함시킨다.*/
.pbox { width:500px; height:250px; background:#999; }
.cbox { width:500px; height:100px; padding:50px; background:#fc0; }
h2 { color:#36f; } /*태그선택자*/
p { color:palegoldenrod; }
.blue { color:#00f; } /*클래스선택자(.)*/
#javascript { color: palevioletred; } /*아이디 선택자(#)*/
</style>
</head>
<body>
<h2>태그선택자로 선택하여 스타일을 적용한다.</h2>
<p>클래스 선택자로 선택하여 스타일을 적용한다.</p>
<p class="blue">클래스 선택자로 선택하여 스타일을 적용한다.</p>
<p id="javascript">아이디 선택자는 제이커리에서 주로 사용한다.</p>
<div class="pbox">
<div class="cbox"></div>
</div>
</body>
</html>
-----------------------------------------------
<!--
HTML 태그는 계층 구조를 이루고 있다. 부모, 형제, 자식, 후손 태그가 있다.
부모 태그는 태그를 감싸는 태그이다. <header>
형제 태그는 같은 계층에 해당되는 태그이다. <h1>, <ul>
자식 태그는 부모 태그 바로 아래 계층에 해당하는 태그이다. <h1>, <ul>
후손 태그는 부모 태그가 감싸고 있는 모든 태그이다. <h1>, <ul>, <li>, <a>
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>후손(하위)+자식 선택자</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/*자식 선택자(>)는 자식 태그만 선택할 때 사용한다.*/
/*후손(하위) 선택자(스페이스)는 후손 태그를 모두 선택할 때 사용한다.*/
header > ul { margin-left: 50px; } /*자식 선택자 */
header ul { margin-left: 50px; } /*후손 선택자*/
ul li { list-style: none; } /*후손 선택자로 블릿제거*/
/* ul li ul {display: none; } */ /*후손 선택자로 박스 제거*/
header > ul > li { float: left; } /* 자식 선택자로 메인메뉴만 선택하여 박스를 왼쪽에서 오른쪽으로 배치*/
ul li { background: #fc0; } /*후손 선택자로 메뉴의 배경을 변경.*/
</style>
</head>
<body>
<header>
<h1>LOGO</h1>
<ul>
<li><a href="#">menu01</a>
<ul>
<li><a href="#">submenu01</a></li>
<li><a href="#">submenu01</a></li>
</ul>
</li>
<li><a href="#">menu02</a></li>
</ul>
</header>
</body>
</html>
'Coding' 카테고리의 다른 글
| CSS 선수학습(4) (0) | 2021.07.14 |
|---|---|
| CSS 선수학습(3) (0) | 2021.07.13 |
| html 선수학습(7) (0) | 2021.07.09 |
| html 선수학습(6) (0) | 2021.07.08 |
| html 선수학습(5) (0) | 2021.07.07 |