CSS 부터 다시 공부해보기

CSS란 Cascading Style Sheets

<div>, <span> 자주 사용한다.
<link rel="stylesheet" href="global.css">
<style> @import url("global.css"); </style>

주로 위와 같이 사용 한다.

h1 { color:red }
h1 { color:red; font-style:italic; } 여러개의 속성을 지정하는 경우 ;(세미콜론)으로 구분한다.

• h1: 선택자
• color: 속성
• red: 값

CSS 각 속성에는 미리 초깃값이 지정되어 있다.
font-weight: normal;
위의 속성과 아무것도 입력하지 않은 속성값은 동일하다.

/* CSS의 주석은 이렇게 표시한다. */

여러 요소에 같은 스타일을 지정하는 방법과 모든 곳에 스타일 적용하는 방법

h1, h2 { color:red; font-style:italic; }
h1, h2를 쉼표로 구분해서 넣는다.
*{ font-family: serif; } (*을 전체 선택자라고 한다)

p.smile(클래스 이름) {
   color: green;
   font-size: x-large;
}

<p class="smile"> 이렇게 지정 해준다 </p>
smile을 클래스 선택자라고 한다.

아이디 선택자, 클래스

p#id-select { font-weight: bold; }

<p id="id-select"> 이렇게 사용한다 </p>

.class-name
<p class="class-name"> 이렇게 클래스 이름을 사용하기도 한다</p>

a:hover {
   color: red;
   font-weight: bold;
   font-family: serif;
}

hover처럼 특정 상태에 스타일을 지정해 주는 특수한 클래스를 가상 클래스 라고 합니다.

a:active {
   position: relative;
   top: 2px;
   left: 2px;
   color: red;
   font-weight: bolf;
}

active: 마우스를 누르고 나서 뗄 때 까지의 상태를 말한다.
relative로 지정하면 일반적으로 표시되는 위치로부터 상대적인 위치로 배치됩니다.

active 가상 클래스는 hover 가상 클래스 다음에 지정한다.

색을 지정하는 방법 

색 이름	red
rgb와 %값	rgb(100%, 0, 0)
rgb와 16진수 값	rgb(255, 0, 0)
#과 16진수 값	#ff0000 (00~ff의 두자리 16진수(256단계)로 표현한다.
#과 16진수 값(3자리 수 표기)	#f00 (0~f 의 한자리 16진수로 표현) 2개의 값이 ff나 00처럼 같은 경우에 표현한다.

.tp { background: transparent; } 요소의 배경을 투명하게 지정한다.

 

+
오랜만에 다시 css를 공부했다.
마지막으로 홈페이지 디자인에 대해 좀 더 알아보기로 했다.(올해까지만 공부?)
인생 어떻게 될지 모르지만..