DAY2_CSS | Notion

안녕하세요 CSS 시작합니다.

안녕하세요? CSS 시작합니다.

안녕하세요? CSS 시작합니다. css파일에서 import

"> CSS 시작하기

안녕하세요 CSS 시작합니다.

안녕하세요? CSS 시작합니다.

안녕하세요? CSS 시작합니다. css파일에서 import

"> CSS 시작하기

안녕하세요 CSS 시작합니다.

안녕하세요? CSS 시작합니다.

안녕하세요? CSS 시작합니다. css파일에서 import

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>CSS 시작하기</title>
			
			<!-- 2. head 태그 안에서 <style>태그를 이용하여 CSS 정의 -->
			<style type = "text/css">
				h3{color : blue;}
			</style>
			
			<!-- css 파일 가져오기(import) -->
			<link href = "1.css_start.css" rel = "stylesheet">
			
		</head>
		<body>		
		
			<!-- 
				HTML : 정적언어
					1. 문서[텍스트] 작업만 가능
				CSS : Cascading Style Sheets
					1. 주로 HTML, XML 문서에서 사용 [html 꾸미기]
					2. 레이아웃과 스타일 정의
					3. 확장자 : 파일명.css
					4. 사용방법 
						1. 태그에 style 속성 이용 => <태그 style = "속성 : 값"> 
						2. head 태그 안에서 CSS 정의 => <style> 선택자{속성 : 값;} </style>
						3. 외부 CSS 파일을 import 
					5. 정의방법 
						식별자{ 속성 : 값 }
			 -->
			 
			<!-- 1. 태그 속성의 style 속성 이용하여 CSS 정의 -->
			<p style = "color : red"> 안녕하세요 CSS 시작합니다. </p>
			
			<h3>안녕하세요? CSS 시작합니다.</h3>
			<h4>안녕하세요? CSS 시작합니다. css파일에서 import</h4>
			
		</body>		
	</html>

아래의 CSS 코드를 가져와서 스타일 정의 (html파일과 css파일이 같은 폴더에 있음)

@charset "UTF-8";

h4{color : green;}

CSS 식별자

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>css 식별자</title>
			
			<!-- css 파일 가져오기(import) -->
			<link href = "2.css_식별자.css" rel = "stylesheet">
		</head>
		<body>
			
			<!-- 
				css : html 꾸미기 [누구를 어떻게 꾸밀건지]
					1. 식별자[꾸미기할 대상] 선택
						1. *{ }  : 모든 곳에 적용 -> 웬만하면 쓰지 X
						2. 태그명{ } : 해당 태그에만 적용 -> 웬만하면 쓰지 X
						3. .class명{ } : 해당 class명을 가진 태그에 적용    [복수 적용]
						4. .#id{ } : 해당 id명을 가진 태그에 적용          [단일 적용]
						* <p style=" "> : 해당 태그에 바로 적용
						
					2. 우선순위 : 속성이 중복일 경우
						style(x) > id > class > 태그 > * 
				   		           단일    복수
				   		           
				css 주석 : 
					1. /* */
			 -->
			
			<!-- 1. * -->
			<p>
			 현존하는 모든 집고양이들은 대략 2000만년 전에 하나의 조상으로부터 갈라져 나온 것으로 추측되며,
			 그 중 고양이의 조상으로 여겨지는 것은 아프리카들고양이(Felis lybica)라는 동물이다. 
			 중동에 살던 인류가 약 만년 전에 사막고양이를 가축화하여 인간과 함께 살기 시작한 것으로 생각된다.
			</p>
			
			<!-- 2. tag -->
			현대의 사막고양이는 살쾡이 종류치고는 체구가 작은 편이지만 
			꼬리를 제외한 몸길이가 대략 45~75cm 정도, 체중은 약 3~6.5kg 정도인데 
			만약 오늘날 집고양이의 조상인 사막고양이도 덩치가 이랬다면 
			고양이는 인간에게 길들여지는 과정에서 몸이 상당히 작아진 셈이다.
			
			<!-- 3. class -->
			<p class ="p1">
			하지만 아직 중형견에 육박하거나 덩치가 큰 품종도 존재한다. 메인쿤이나 랙돌 등.
			</p>
			
			<!-- 4.id -->
			<p id = "p2">
			고대 이집트인들은 고양이를 신격화(바스테트)할 정도로 좋아했는데, 
			이는 고양이가 독사를 사냥할 수 있었기 때문이라 한다. 
			다만, 오늘날 우리가 집에서 기르는 고양이를 가족처럼 생각하며 이름도 지어주는 것과 다르게, 
			고대 이집트인들은 야생 고양이와 자기 집에 사는 고양이를 구분하지 않았으며, 
			이름도 지어주는 법이 없이 그냥 “미유”나 “미윳”이라고만 불렀다
			</p>
			
			<!-- 5. id or class의 우선순위(?) => 우선순위는 id가 더 높음  -->
			<p class = "p1" id= p2>
			반면 집에 기르는 개는 이름을 붙여주었다고 하니,
			당시 고양이는 아직 완전한 가축/애완동물이 아니라 반 야생/반 공생 동물 취급을 받았던것으로 보인다.
			</p>
		</body>
	</html>

@charset "UTF-8";

/* css 주석*/

/*1. 모든 곳에 적용 */
*{ color : blue;}

/*2. 태그에 적용*/
p{color : orange;}

/*3. 클래스에 적용*/
.p1{color : red;}

/*4. id에 적용*/
#p2{color : green;}

css 속성

텍스트

속성 1개 일 때
1. 식별자 명 {속성 명 : 값;}
속성이 여러 개 일 때
1. 식별자명 {
```
    속성명1 : 값1;
```
  속성명2 : 값2;
```
    속성명3 : 값3;
```
  }
font-family : “폰트 명” : 폰트
color : 색상 명 : 폰트 색상
text-decoration : 속성 값
1. overline : 윗 줄
2. line-through : 취소 선
3. under-line : 밑줄
text-shadow : x축, y축, 깊이(흐림 정도, 투명도(?), 색상 : 그림자
text-align : 텍스트 정렬
1. left : 왼쪽 정렬
2. right : 오른쪽 정렬
3. center : 가운데 정렬
font-size : 글자 크기
font-style : italic; : 글자 기울기
font-weight : bold; : 굵게/진하게
word-spacing : 2px; : 단어 간격[어간]
letter-spacing :2px; 글자 간격[자간]
line-height : "200%"; : 줄 간격

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Insert title here</title>
			
			<link href = "3.css테스트.css" rel = "stylesheet">
		</head>
		<body>
			<h3>고양이</h3>
			
			<p>
			 현존하는 모든 집고양이들은 대략 2000만년 전에 하나의 조상으로부터 갈라져 나온 것으로 추측되며,
			 그 중 고양이의 조상으로 여겨지는 것은 아프리카들고양이(Felis lybica)라는 동물이다. 
			 중동에 살던 인류가 약 만년 전에 사막고양이를 가축화하여 인간과 함께 살기 시작한 것으로 생각된다.
			</p>
		</body>
	</html>

@charset "UTF-8";

/* 모든 곳에 적용 */
*{ /*  s */
	font-family : "궁서";
	color : "blue";
} /* e */

/* 2. h3태그에 적용*/
h3{
	/*윗줄*/    
	text-decoration: overline; 
	
	/*취소선*/ 
	text-decoration: line-through;
	
	 /*밑줄*/ 
	text-decoration: underline; 
	
	text-shadow : 2px 2px 2px orange;
	
	/* 정렬 */
	text-align :center 
}

p{
	font-family : "굴림";
	color : black;
	font-size : 8px;
	font-style : italic;
	font-weight : bold;
	word-spacing : 2px;
	line-height : "200%";
}