0215/CSS, selected

쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.

<meta>

- 검색엔진 설정( 사이트에 대한 설명,검색 키워드 설정 ), 자동페이지 이동

- HTML문서의 charset설정

- <head> 태그의 하위 태그로 설정

* charset 설정

- 사용자에게 제공하는 문자열의 charset 설정하거나,

사용자가 입력하는 입력 문자의 charset을 설정할 때 사용.

<meta charset="사용할 charset"/>

* 검색엔진 대한 설정

- 검색엔진으로 검색했을 때 보여줄 데이터의 설정

- 등록된 데이터는 일정 시간이 지난 후에 적용된다.

- 사이트에 대한 설명( 검색 엔진에서 검색했을 때 )

<meta name="description" content="페이지에 대한 설명"/>

<meta name="description" content="이 사이트는 xxx에 대한 사이트 xxx주력업종으로 …"/>

- 키워드로 검색 했을 때 ( 키워드 노출 )

<meta name="keyword" content="키워드, ..."/>

<meta name="keyword" content="java,jsp,자바,코딩"/>

* 페이지의 이동( redirect )

- 접속 했을 때 일정시간이 지난 후 페이지를 이동할 때( 정보 제공 후 페이지를 이동 )

  <meta http-equiv="refresh" content="초;이동할URL"/>

HTML5에서 추가된 태그

* <details>

- 사용자가 클릭했을 때 메시지를 열어서 보여줄 때 사용.

<details>
<summary>사용자에게 보여줄 데이터</summary>
<span>위의 텍스트를 클릭했을 때 보여줄 데이터</span>
</details>
<!-- 클릭하면 <span>의 내용을 보여준다. -->

* <datalist>

- 사용자가 클릭했을 때 준비된 여러 옵션을 보여주고, 옵션을 클릭하면

옵션의 값이 <input type=“text”>에 설정되는 객체

<input type="text" list="아이디">
<datalist id="아이디">
<option value="보여질 값( 값을 클릭하면 값이 input에 설정된다 )"/>
</datalist>
<!-- input이 클릭되면  list 의 아이디와 같은 datalist 의 옵션을 제공한다.
text에 값을 입력하면 시작문자열에 해당되는 option 값들만 제공한다.
-->

CSS( Cascading Style Sheet )

- 하콤 비움 리( hakon Wium lie )가 1994년 제안한 Style sheet 언어

- 웹 디자이너가 주로 사용하는 스타일 시트 언어.

- CSS Framework – bootstrap

- 웹페이지에서 통일성있는 디자인을 적용할 때 사용.

- 3가지 방식으로 사용( inline, embed, external file 방식 )

- 속성 : 값과 같은 문법을 사용

- CSS 의 주석은 <style> 태그 안에서 /* */로 사용된다.

* inline 방식

- HTML 태그에 직접 정의하는 방식

- selector 가 사용되지 않는다.

- 적용 우선 순위가 가장 높다.

- 디자인 코드의 중복성이 가장 높다.

<태그명 style="속성:값; 속성:값; ...">
<!--  ; = 다음 속성을 구분하는 구분자  -->

* embed 방식

- 디자인 코드를 HTML에 <style>태그를 선언하고, <style>태그 안에 정의하는 방법

- external file 방식보다 적용 우선순위가 높다.

- 디자인 코드의 중복성을 낮출 수 있다.

- 페이지에서만 적용

( 다른 페이지에서 디자인을 사용하고 싶다면 디자인코드를 다시 만들어야 한다.)

- selector 사용, 디자인을 적용 받을 태그를 정의하고

디자인의 사용성을 고려하여 특정이름으로 묶는 것

- 특정 페이지에서 사용하는 디자인을 정의할 때 사용

<head>
<style type="text/css">
selector { 속성:값; 속성:값; ...  }
</style>
</head>

* external file 방식

- CSS코드를 확장자가 css인 파일을 만들고 그 안에 정의하는 방식

- 코드의 중복성이 가장 낮다.

- 적용 우선순위 가장 낮다.( inline -> embed -> external file )

- selector가 사용된다.

- 로딩의 속도가 느리다.

- 여러 페이지에서 사용하는 공통디자인을 정의할 때 적합하다.

- 페이지의 전체구조를 설정할 때는 적합하지 않다.

- @charset “UTF-8";( CSS파일의 charset )이

한글이 사용되는 디자인코드가 적용되지 않는다. ( 글꼴 )

- 공통디자인이 필요한 HTML에서 <link> 사용

<link rel="stylesheet" type="text/css" href="css파일의 URL"/>

selector ( 선택자 )

- embed 방식, external file 방식에서 사용된다.

- 디자인을 적용 받을 태그를 선택하거나, 정의된 디자인을 하나의 이름으로 묶는 것

- id selector, class selector, tag selector, sub selector,

name( attribute ) selector, behavior selector, multiple selector

- selector { 속성:값; ... }의 형식을 가지고 있다.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
<!-- selector = 사용자에게 보여질 태그 
디자인 코드 = 속성:값;-->
selector { 디자인 코드, ... } 
</style>
</head>
<body>
사용자에게 보여질 태그
...
</body>
</html>

* id selector

- 웹 페이지에서 디자인을 적용 받을 태그가 유일할 때 사용.

- 참조하는 속도가 빠르다.

- #아이디명{ 속성:값; }으로 선언

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"> <!-- style tag에서 selector 선언-->
#이름 { 속성:값; ... }
</style>
</head>
<body>
사용자에게 보여질 태그...
<태그명 id="이름"> <!-- body tag 아래의 태그에 selector 적용 -->
</body>
</html>

* class selector

- 웹페이지에서 디자인을 적용 받을 태그가 여러 개 일 때 사용

- .클래스명{ 속성:값; }으로 선언

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type=“text/css”>
.클래스명 { 속성:값; }
</style>
</head>
<body>
<태그명 class="클래스명">  <!-- style tag에서 선언된 디자인이 적용되어 태그를 그린다. -->
<태그명>
<태그명 class=“클래스명”>  <!-- style tag에서 선언된 디자인이 적용되어 태그를 그린다. -->
<태그명>
</body>
</html>

* name selector( attribute selector )

- 태그에 정의되는 모든 속성으로 사용할 수 있는 selector

- [속성명=‘값’] { 속성:값; }으로 선언

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"
[value='a']{ 속성:값; }
</style>
</head>
<body>
<태그명 value="a"> <!-- style tag에서 선언된 디자인이 적용되어 태그를 그린다. -->
<태그명 value=“b”>
<태그명 value=“a”> <!-- style tag에서 선언된 디자인이 적용되어 태그를 그린다. -->
<태그명 type=“text”>
</body>
</html>

* tag selector

- 모든 태그에 디자인이 적용된다.

- 태그명 { 속성:값; }으로 선언한다.

- 동일 태그명이 몇 개가 나오든 적용된다.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{ 속성:값; ... }
</style>
</head>
<body>
<div></div> <!-- div 태그 전부 적용 -->
<p></p>
<p><div></div></p> <!-- div 태그 전부 적용 -->
<div></div> <!-- div 태그 전부 적용 -->  
</body>
</html>

* multiple selector

- 모든 selector에 적용 가능

- 하나의 디자인을 여러 selector에 사용하는 문법

- selector는 ,로 구분한다.

- 디자인 코드의 중복을 최소화 할 수 있다.

selector, selector,... { 속성:값; }

* behavior selector

- 사용자의 동작이 있을 때 디자인을 적용하는 selector

- selector:동작{ 속성:값; }으로 선언

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div:hover{ 속성:값; ... }
</style>
</head>
<body>
<div></div>
<p></p>
<p><div></div></p>
<div></div>  
</body>
</html>

* sub selector

- 특정 상속관계의 태그에만 디자인을 적용할 때

- 부모태그명 > 자식태그명 { 속성: 값; }으로 선언

- 태그의 상속관계 표현은 하나이상 사용할 수 있다.

( 부모태그명 > 자식태그명 > 자식 > 자식 ... )

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div > span { 속성:값; ... }
</style>
</head>
<body>
<span>
<div></div>
<p><span></span></p>
<p><div></div></p>
<div><span><span></div>  <!-- 적용될 태그 -->
</body>
</html>

</p

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div > span { 속성:값; ... }
</style>
</head>
<body>
<span>
<div></div>
<p><span></span></p>
<p><div></div></p>
<div><span><span></div>  <!-- 적용될 태그 -->
</body>
</html>