자바 스크립트를 배우기전 기초지식들! (CSS)

자바 스크립트를 배우기전 기초배경 지식들!

자바 스크립트를 알아보기전 우선 HTML 과 CSS 를 알고 있어야 합니다.

앞에 글에서 이어서 css에 대해서 알아보겠습니다.

css 요점 정리

css는 HTML을 사용하여 문서를 완성한후에 그것을 꾸며 주는것입니다.

그럼 우선 css 선언문 부터 알아보겠습니다. 

선언문은 css 를 html 작성할때 반드시 필요합니다. 

선언문이 없으면 브라우저는 작성한 css를 HTML로 받으들이기 떄문에 꼭! 선언을 하시고 작성하셔야 합니다.

CSS 선언문

<style type="test/css">
선택자{속성:값;}
</style>

위와 같이 작성하시면 됩니다. 중간 부분에는 선택자{속성:값;} 을 입력하시면 되겠습니다 ㅎ

그리고 css를 외부에 작성하였을경우도 있는대 그것을 연동시키는 외부 스타일 연동방식에 대해서도 알아보겠습니다.

외부 스타일 연동방식

1. link 방식

<link rel="stylesheet" type="text/css" herf="경로" media="all">

herf="경로" <--- "경로" 에는 작성한 css 파일의 위치(경로) 를 작성하시면 됩니다.

(ex: c:/123.css <--- c드라이브에 있는 css 파일)

2. import 방식

<style type="text/css">
  @import:url("경로");
</style>

"경로" 에 주소를 적어주시면 되겠습니다.

선택자의 종류

요소에 자신이 생각하는 꾸밈을 주기위해서 요소를 정확히 알아야겠죠? 선택자는 요소들을 다양한 방식으로 선택할수 있도록 해줍니다.

종류	사용 예	설명
전체 선택자	*{속성:값;}	전체 요소를 선택할 때 사용
요소명 선택자	요소명{속성:값;}	태그 이름{요소명}으로 선택할 때 사용
아이디 선택자	#아이디명{속성:값;}	아이디를 가진 요소를 선택할 때 사용  (단독 사용 시)
클래스 선택자	.클래스명{속성:값;}	클래스를 가진 요소를 선택할 떄 사용  (반복해서 사용 시)
가상클래스 선택자	a:link{속성:값;}	링크 걸린 텍스트 선택
	a:visited{속성:값;}	링크 방문을 했던 텍스트만 선택
	a:hover{속성:값;}	링크 걸린 텍스트에 마우스를 올렸을 떄
	a:focus{속성:값;}	링크 걸린 텍스트에 포커스가 생성되었을 때
	a:active{속성:값;}	링크 걸린 텍스트에 마우스를 눌렀을 때
수도 클래스 선택자	요소명:first-letter{속성:값;}	선택한 요소의 첫 글자 한개만 선택
	요소명:first-line{속성:값;}	선택한 요소의 첫 줄만 선택
	요소명:before{속성:값;}	선택한 요소의 앞의 지점
	요소명:after{속성:값;}	선택한 요소의 마지막 지점
	요소명:first-child{속성:값;}	선택한 요소 중 첫번째 자식 요소
	요소명:last-child{속성:값;}	선택한 요소 중 마지막 자신 요소{IE 9 이상 지원}
종속 선택자	요소명.클래스명{속성:값;}	선택한 요소 중 지정 클래스를 포함한 요소만 선택
	요소명#아이디명{속성:값;}	선택한 요소 중 지정 아이디를 포함한 요소만 선택
하위 선택자	div h2{속성:값;}, #아이디명.클래스명{속성:값;}	선택한 요소에 하위 요소만 선택
그룹 선택자	h1, h2, p{속성:값;}	여러 요소를 그룹으로 선택

서체 꾸미기 속성

서체 꾸미는 속성들입니다.

종류	설명	사용예
font-family	글꼴	font-family: dotum, "돋움", sans-serif;
font-size	사이즈	font-size: 12px;   font-size: 1em;   font-size: 10%;
font-weight	두께	font-weight: bold;  font-weight: normal;
font-style	기울기	font-style: italic;  font-style: normal;
line-height	행간	line-height:1.5; line-height: 150%;
font-valiant	소문자를 작은 대문자로 표기	font-valiant: small-cpas; font-valiant: normal;
함축방식	font:[두께 스타일 valiant][사이즈/행간][글꼴];	font:bold 12px/1.4 dotum, "돋움", sans-serif;

문단 속성

웹 문서에 글자를 정렬, 색상, 들여쓰기, 간격 등등등 을 맞출때 사용하는 속성

종류	설명	사용예
color	텍스트 색상	color:#00;   <-- 색상 코드표  color:red;
test-align	블록 요소 내에 인라인 요소를 정렬   (인라인 요소에 직접 사용해야 합니다.)	text-align:center;   text-align:left;  text-align:right;  text-align:justify;
vertical-align	인라인 요소 간의 세로 정렬  (인라인 요소에 직접 사용해야 합니다.)	vertical-align:top;   vertical-align:middle;  vertical-align:bottom;
text-indent	블록 요소 내에 텍스트 내어쓰기/들여쓰기	text-indent:-10px; <-- 내어쓰기  text-indent:10px;  <-- 들여쓰기
text-decoration	텍스트 밑줄(underline), 윗줄(overline),  가운데 줄(line-through)	text-decoration:underline;  text-decoration:none; <-- 밑줄 삭제
letter-spacing	글자 간격	letter-spacing:5px;

배경 속성

웹문서에 배경 이미지/색상/위치 등을 적용하는 속성

종류	설명	사용예
background-color	배경 색상	background-color:#ff(); <-- 색상 코드표  background-color:yellow;
background-image	배경 이미지	background-lmage:url("이미지 경로");
background-repeat	배경 반복 여부	background-repeat:repeat;(가로/세로 반복)  background-repeat;no-repeat;(반복 안함)  background-repeat;repeat-x;(x축 반복)  background-repeat;repeat-y;(y축 반복)
background-position	배경 이미지 위치 지정	background-position:가로 위치 세로 위치;
background-attachment	배경 이미지 고정 여부  (기본 scroll 고정:fixed)	background-attachment:fixed;  (스크린 기준 배경 위치 고정)
함축 방식	background: 색상 이미지 반복여부,   위치 지정 고정 여부;	background:url("image/aa.gif") no-repeat 0 50px;

박스 모델 속성

요소에 여백,선,너비 등을 적용하는 속성

종류		설명	사용예
width / height		너비 / 높이	width:100px;  height:100px;
margin / padding		박스 바깥쪽 여백/ 안쪽 여백	margin: 10px 20px 30px 40px;   (상 10px, 우 20px, 하30px, 좌40px 바깥 여백에 적용)  padding: 10px; 20px 30px 40px;  (상 10px, 우 20px; 하30px, 좌 40px 안쪽 여백에 적용)
			margin-left: 10px;   (좌 10px 바깥 여백에 적용)  padding-left: 10px;   (좌 10px 안쪽 여백에 적용)
border	border-color	선색상	border-color:#000;  border-color:black;
	border-width	선 두께	border-width:1px;
	border-style	선 모양  (solid, dashed, dot-ted, double)	border-style:solid;
	함축 방식		border:2px solid #000;  border-bottom: 2px solid #000;

float 속성

플룻속성은 블럭 요소 정렬때 사용합니다. 처음접하시는분은 float 속성이 어려우실껍니다..

그래도 잘연습하신다면 마음대로 컨트롤이 가능하실껍니다.

그리고 clear 라는 속성도 있는대 같이 잘사용하셔야 합니다...

종류	설명	사용 예
float	블록요소를 좌우 정렬시킬 때 사용함	float:left; (왼쪽 정렬)  float:right; (오른쪽 정렬)
clear	float을 해지할 떄 사용합니다.	clear:left;  clear:right;  clear:both;

position

position 속성은 요소가 겹치게 정렬할때나 좌/우를 불분명하게 정렬할때 사용

종류	설명	사용 예
static	지정하지 않은 기본 상태	position:static;
relative	현재 위치를 기준으로 위치를 지정  (상대 위치)	position:relarive; left:10px; top20px;  (현재 위치 기준으로 이동)
absolute	body, 컨테이너 박스를 기준으로 위치를 지정  (절대 위치)	position:absolute: left:50px; top:30px;  (컨테이너 박스 기준으로 이동)
fixed	스크린을 기준으로 위치가 고정	position:fixed;

기타..

1. 박스 모델 넓이, 높이 계산법

전체넓이 = 너비값 + 좌우 패딩값 + 좌우 선 두께

전체 높이 = 높이값 + 상하 패딩 값 + 상하 선 두께

2. 마진 오류 현상

마진 겹침 현상: 인접 요소간 마진 방향이 겹치면 작은값은 소멸됨. 해결법은 display:inline-block 을 적용하면 됨.

더블 마진 현상: IE 6하에서 2배로 적용되는 버그가 있다(마진과 float 방향이 같을때). 이럴때는 display:inline 적용하면 됨.

3. display 속성

요소의 성격을 바꿀때 사용.

inline	블록요소 -> 인라인요소
block	인라인요소 -> 블럭요소
inline-block	요소를 인라인 블록 요소로 바꿀때 사용.  인라인에 너비,높이를 적용할수 있게된다.
none	요소를 숨길 때 사용

4. overflow 속성

내용이 넘칠때 어떻게 할것인지 지정.

hidden	넘치는 내용 숨김
auto	넘치면 스크롤바 생성, 안넘치면 스크롤바 숨김
scroll	무조건 스크롤바 생성

5. z-index

position 에서 이미지가 만약 겹치면 그것을 누가 위에 나오게 할것인지 정하는것이다. 기본값은 auto이며, 값이 클수록 위로 올라간다.

z-index 속성은 position 속성인 relative, absolute가 적용된 상태에서 적용해야한다..

이상으로 이번편에서 자바 스크립트를 배우기전 기초지식 CSS에 대해서 알아보았습니다.

저도 배우긴했지만 하두 안써서 다시 되돌아보는 좋은 시간이 되었던것 같습니다.

글을 보시고 많은 도움이 되었으면 좋겠습니다.

다음글에서 부터는 드디어 자바스크립트를 다루어 보겠습니다 ㅎㅎ

모두 수고하세요!