[CSS] CSS 끄적끄적

css 표현언어(style.css)

- 사용법
1. 외부스타일 시트사용
<link href="파일경로">

2. 내부스타일 사용
<style>
css구문작성
</style>

3. 인라인스타일 사용방법
<p style="font-size: 24px">안녕하세요</p>
<div style="color:red">div입니다.</div>

- css 구문

선택자 { 속성:속성값; }

ex> div { font-size: 24px; }

- 선택자 (이 3가지보다 더 많음 ! )

1. 태그 선택자

html요소의 태그명으로 선택

태그명 { 속성: 속성값; }

ex> div { font-size: 24px; }

2. 아이디 선택자

html요소의 아이디명으로 선택

#아이디명 { 속성: 속성값; }

ex> #header { font-size: 24px; } /* #이 있어야 아이디에서 찾음, 없으면 태그에서 찾아버림 */

3. 클래스 선택자

html요소의 클래스명으로 선택

.클래스명 { 속성: 속성값; }

ex> .inner_container { font-size: 30px; }

- 스타일 속성

1. color 글자의 색상 지정

컬러단위

1) 색이름 ex> green / red / blue / pink 등등

2) 16진수 색상 코드 ex> #ffffff(흰색) / #000000(검정)

3) 컬러함수 rgb(r, g, b) 0 ~ 255 ex> rgb(255, 0, 0)

rgba(r, g, b, a) r, g, b: 0 ~ 255 / a: 0 ~ 1

2. font-size 글자의 크기 지정

px, em

웹 페이지 본문: 14px

제목: 24px ~28px

3. font-family 글자의 서체 지정

font-family: 나눔고딕, Dotum;

4. text-decoration 글자의 꾸며주기 지정

underline: 글자 아래 밑줄 / none: 줄없음 / overline: 글자 위 줄 / line-through: 중간에 줄

5. text-indent 첫줄 들여쓰기 지정

ex> text-indent: 50px;

6. line-height 줄 간격

ex>line-height: 24px;

7. font-weight 글자의 두께 지정

normal / bold

100 ~ 900

100 ~ 300: 얇게 / 400 ~ 700: 보통 / 700 ~ 900: 두껍게

8. text-align 글자 정렬

left / center / right

9. border 속성

border-width / border-style / border-color

ex> div { border: 1px solid red; }

border-top: 1px solid red;

border-left: 1px solid red;

border-right: 1px solid red;

border-bottom: 1px solid red;

10. padding 속성

컨텐츠와 요소와의 간격(여백) -내부여백

padding: 50px;

padding-top: 상단여백

padding-left: 왼쪽여백

padding-right: 오른쪽여백

padding-bottom: 하단여백

11. background 속성

ex> background: pink;

1. css 기초

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<title>css 기초</title>
		<style>
			/* 선택자 { 속성: 속성값; } */
			div { color: green; }
			p { font-size: 36px }
			
		</style>
	</head>
	<body>
		<div style="color: red">div입니다.</div>
		<p style="font-size: 38px">p입니다.</p>
		<a href="http://naver.com">네이버</a>
	</body>
</html>

2. HTML 기초 2일차 커피 페이지 css 적용

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8"/>
		<title>div태그</title>
		<style>
			body { font-size: 14px; line-height: 1.5; color: #333; font-family: "나눔고딕"; }
			h1 { font-size: 34px; font-weight: normal; color: green; line-height: 60px }
			h2 { color: lightgreen; font-size: 24px; font-weight: normal; }
			h3 { text-decoration: underline; }
		</style>
	</head>
	<body>
		<div id="wrap">
			<h1>Web Cafe - Coffee</h1>
			<div id="origin">
				<h2>Coffee 원두</h2>
				<h3>자메이카 블루마운틴(jameica blue mountain)</h3>
				<p>자메이카의 블루 산맥에서 재배되는 커피의 명칭이다. 블루 마운틴은 쓴 맛이 덜하고 
				향이 부드러운 커피로 신맛과 단맛이 완벽하게 조화를 이룬 커피로 평가 받는다.</p>
				<h3>케냐 커피(kenya)</h3>
				<p>아프리카 최고의 커피 생산국에서 생산되는 케냐 커피는 와인향
				 또는 꽃향기가 나는 것으로 유명하며, 과일의 상큼한 신맛과 품위 있는 산미, 
				중후하면서도 상큼한 맛이 매력적인 커피이다. </p>
			</div>
			<div id="blending">
				<h2>Blending Coffee</h2>
				<h3>아메리카노(americano)</h3>
				<p>커피 원액에 물을 희석시킨 커피로 에스프레소의 
				진하고 쓴맛을 부드럽고 가볍게 만든 음료</p>
				<h3>카페라떼(caffe latte)</h3>
				<p>커피원액에 우유를 듬뿍 넣은 부드러운 커피</p>
				<h3>카푸치노(cappuccino)</h3>
				<p>커피 원액에 우유와 우유 거품을 넣은 커피로 라떼보다는 다소 진한 맛, 
				우유의 거품을 풍부하게 느낄 수 있는 커피</p>
			</div>	
		</div>
	</body>
</html>

3. 테이블에 css 적용

<!DOCTYPE html>
<html lang ="ko">
	<head>
		<meta charset="utf-8" />
		<title>테이블 태그</title>
		<style>
			/* border-collapse 속성: cell과 cell사이 간격을 제거 */
			table { border-collapse: collapse; border: 1px solid red; }   /* cellspacing 역할 */
			th { border-bottom: 1px solid #ccc; padding: 10px; border-top:1px solid #ccc; 
            		background: lightblue;
			}
			td { border-bottom: 1px solid #ccc; padding: 10px; }
			.abc { border-right: 1px solid red; }
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>수업명</th>
				<th>개강일</th>
				<th>인원</th>
				<th>수강료</th>
			</tr>
			<tr>
				<td colspan="2">건축설계 04-07</td>
				<td rowspan="2">25명</td>
				<td>300,000</td>
			</tr>
			<tr>
				<td>웹 개발자 프론트</td>
				<td>05-02</td>
				<!-- <td>25명</td> -->
				<td>360,000</td>
			</tr>
		</table>
		<p>
			그린컴퓨터 아카데미<br/>   <!-- br은 줄바꿈 태그 -->
			그린컴퓨터 아카데미<br/>
			그린컴퓨터 아카데미
		</p>
	</body>
</html>

⭐ CSS 주석: /* */

4. 테이블에 css 적용 실습

<!DOCTYPE html>
<html lang ="ko>
	<head>
		<meta charset="utf-8" />
		<title>테이블 태그</title>
		<style>
			table { border-collapse: collapse; border-top: 3px solid #0255A0; }
			.up { background: #EEF6FD; }
			.gray { font-weight: bold; background: #F8F8F8; }
			th {padding: 10px; }
			td { border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; padding: 10px; }
			.right { border-right: 1px solid #ffffff; }
		</style>
	</head>
	<body>
		<h1>재무제표</h1>
		<h4>연결재무상태표 단위(원)</h4>
		<table>
			<tr>
				<th class="up">구분</th>
				<th class="up">제14(당)기 3분기</th>
				<th class="up" class="right">제13(전)기</th>
			</tr>
			<tr>
				<td class="gray">자산</td>
				<td>7,946,706,096,992</td>
				<td class="right">7,153,937,451,859</td>
			</tr>
			<tr>
				<td>유동자산</td>
				<td>1,155,186,906,270</td>
				<td class="right">1,342,743,897,920</td>
			</tr>
			<tr>
				<td>비유동자산</td>
				<td>6,791,519,190,722</td>
				<td class="right">5,811,193,553,939</td>
			</tr>
			<tr>
				<td class="gray">부채</td>
				<td>4,687,984,795,144</td>
				<td class="right">4,013,382,224,753</td>
			</tr>
			<tr>
				<td>유동부채</td>
				<td>1,139,653,068,860</td>
				<td class="right">684,285,128,862</td>
			</tr>
			<tr>
				<td>비유동부채</td>
				<td>3,548,331,726,284</td>
				<td class="right">3,329,097,095,891</td>
			</tr>
			<tr>
				<td class="gray">자본</td>
				<td>3,258,721,301,848</td>
				<td class="right">3,140,555,227,106</td>
			</tr>
			<tr>
				<td>지배기업 소유주에게 귀속되는 자본</td>
				<td>3,239,003,380,186</td>
				<td class="right">3,120,032,338,136</td>
			</tr>
			<tr>
				<td>비지배지분</td>
				<td>19,717,921,662</td>
				<td class="right">20,522,888,970</td>
			</tr>
		</table>
	</body>
</html>

'Stack > CSS' 카테고리의 다른 글

[CSS] display 복습 끄적끄적 (0)	2022.04.08
[CSS] 선택자 / display 연습 (0)	2022.04.07
[CSS] CSS 복습 끄적끄적 (0)	2022.04.07
[CSS] fontstyle / box / table 연습 (0)	2022.04.06
[CSS] CSS 정리 (0)	2022.04.06

'Stack > CSS' 카테고리의 다른 글

티스토리툴바