[웹 스터디 2주차] CSS

1. CSS 기본

CSS란 HTML과 함께 웹 표준의 기본 개념이다.
HTML - 텍스트, 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 역할
CSS - 텍스트, 이미지, 배경의 크기나 배치 방법 등의 요소를 통해 디자인 담당

2. 스타일과 스타일 시트

• 스타일 : 문서의 겉모습(디자인)을 결정
  웹 문서의 내용(HTML)과 상관없이 디자인(CSS)만 바꿀 수 있다.

• 반응형 웹 디자인 : PC, 모바일 등 사용자가 접속하는 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꾼다.
  기존 HTML 문서는 PC를 기본으로 하지만, CSS를 활용하면 웹 문서 내용은 그대로 유지하고 CSS를 수정하여 여러 기기에서 볼 수 있다.

• 스타일 형식
  선택자 { 속성1: 속성값1; 속성2: 속성값2; }
  스타일을 어느 부분에 적용할지 알려주는 선택자와 {스타일 정보}로 구성
  예) <p>태그에 스타일 적용

p { text-align: center; color: blue; }	/* 주석 처리 방법 */

• 스타일 시트
  1) 브라우저 기본 스타일: CSS를 사용하지 않아도 기본으로 웹 브라우저에 적용되는 스타일

2) 인라인 스타일: 간단한 스타일 정보를 입력
<선택자 style="속성: 속성값;"> 형태로 작성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>
  <h1>레드향</h1>
  <p style="color: blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>

원래 웹 브라우저

인라인 스타일 실행 결과

3) 내부 스타일 시트: 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    h1 {
      padding: 10px; /* 안쪽 여백 */
      background-color: #222; /* 배경색 */
      color: #fff; /* 글자색 */
    }
  </style>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>

내부 스타일 실행 결과

4) 외부 스타일 시트: 여러 웹 문서에 사용할 스타일을 별도 파일로 저장해 놓은 것
외부 스타일 시트 파일 지정

h1 {
      padding: 10px; /* 안쪽 여백 */
      background-color: #222; /* 배경색 */
      color: #fff; /* 글자색 */
    }

HTML 파일에서 외부 스타일 파일 실행

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>

외부 스타일 실행 결과

3. CSS 기본 선택자

1) 전체 선택자 : 문서 전체 요소에 스타일 적용
기본형 - * { 속성: 값, ... }

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    * {
      margin: 0;
    }
  </style>
</head>
<body>
  <img src="images/cat.jpg">
</body>
</html>

2) 타입 선택자 : 특정 태그를 사용한 모든 요소에 스타일 적용
기본형 - 태그명 { 스타일 규칙 }

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    p{
      font-style: italic;
    }
  </style>
</head>
<body>
  <div>
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>

3) 클래스 선택자 : 특정 부분만 선택해서 스타일 적용
기본형 - .클래스명{ 스타일 규칙 }

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    p {
      font-style: italic;  /* 이탤릭체 */
    }
    .accent {
      border:1px solid #000;  /* 테두리 */
      padding:5px;  /* 테두리와 내용 사이의 여백 */
    }
    .bg {
      background-color:#ddd;    /* 배경색 */  
    }
  </style>
</head>
<body>
  <div>
    <h1 class="accent bg">레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>

4) id 선택자 : 특정 부분에 스타일을 한 번만 적용
기본형 - #아이디명{ 스타일 규칙 }

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    #container {
      width:500px;  /* 너비 */
      margin:10px auto;  /* 바깥 여백 */
      padding:10px;  /* 테두리와 내용 사이 여백 */ 
      border:1px solid #000;  /* 테두리 */
    }    
  </style>
</head>
<body>
  <div id="container">
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html> 

4. 글꼴 관련 스타일

• font-family : 글꼴 지정
  기본형 - { font-family: "글꼴 이름" }
• font-size : 글자 크기 지정
  기본형 - { font-size: 절대 크기 or 상대 크기 }
• font-style : 이탤릭체로 글자 표시
  기본형 - { font-style: normal or italic or dblique }
• font-weight : 글자 굵기 지정
  기본형 - { font-weight: normal or bold or bolder or lighter or 100 ... 900 }

5. 텍스트 관련 스타일

• color : 글자색 지정하는 속성
  기본형 - color: 색상

• text-align : 텍스트를 정렬하는 속성
  기본형 - text-align: 정렬 속성

• line-height : 줄 높이를 조절하는 속성

• text-decoration : 텍스트에 밑줄, 윗줄, 최소선을 표시하는 속성

• text-shadow : 텍스트에 그림자를 추가하는 속성

• text-transform : 텍스트 대소문자를 변환하는 속성

• letter/word-spacing : 글자 간격을 조절하는 속성

6. CSS 박스 모델

• 블록 레벨 : 태그를 사용해 요소를 삽입했을 때 혼자 한줄을 차지(너비 100%)

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>블록 레벨과 인라인 레벨</title>
		<style>
			body  * {  /* body 하위에 있는 모든 요소에 대해 */
				border:1px solid blue;
			}
			.accent {
				color:red;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
		<h1>시간이란...</h1>
		<div>내일 죽을 것처럼 <p class="accent">오늘</p>을 살고 </div>
		<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>	  
</body>
</html>

블록 레벨 실행 결과

• 인라인 레벨 : 한줄을 차지하지 않음
  인라인 레벨 요소는 텍스트만큼만 공간을 차지하고 바로 오른쪽에 다음 내용이 연결된다.

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>블록 레벨과 인라인 레벨</title>
		<style>
			body  * {  /* body 하위에 있는 모든 요소에 대해 */
				border:1px solid blue;
			}
			.accent {
				color:red;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
		<h1>시간이란...</h1>
		<div>내일 죽을 것처럼 <span class="accent">오늘</span>을 살고 </div>
		<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>	  
</body>
</html>

인라인 레벨 실행 결과

• 마진 vs 패딩 : 마진은 박스-박스 사이 여백, 패딩은 박스-콘텐츠영역 사이 여백
• 박스 모델 너비와 높이 지정하기
  너비는 width, 높이는 height 속성을 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>박스모델</title>
  <style>
    div {
      border: 1px solid black;
      margin-bottom: 20px; 
    }
    .box1 {
      width: 400px;
      height: 100px;
    }
    .box2 {
      width: 70%;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, dignissimos. Impedit perferendis fugiat facere molestiae!</div>
  <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur laboriosam ullam, excepturi vitae ratione quos.</div>
</body>
</html>

• 박스 모델에 그림자 효과 추가하기
  box-shadow 속성을 사용하면 버튼에 그림자 효과를 추가할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		button {
			font-size: 2em;
			background: #fff;
			padding: 15px 30px;
			margin:15px;				 
			border: 1px solid #222;	
			box-shadow: 2px 2px 2px #000;
		}	
	</style>
</head>
<body>
	<button>Do it!</button>
</body>
</html>

• 박스 모델 테두리 스타일 지정하기
  박스 모델 4개 방향: top → right → bottom → left
  border-style : 테두리 스타일 지정
  border-width : 테두리 두께 지정
  border-color : 테두리 색상 지정
  border : 테두리 스타일을 묶어 지정
  border-radius : 테두리 꼭짓점을 둥글게 만듦

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>박스 모델 - 테두리</title>
  <style>
    .box {
      width: 300px;
      height: 150px;
      /* 1. 테두리 스타일 지정 */
      border-style: solid dashed dotted double;
      /* 2. 테두리 두께 지정 */
      border-width: 3px 5px 7px 9px;
      /* 3. 테두리 색상 지정 */
      border-color: red blue green purple;
      /* 4. 테두리 꼭짓점을 둥글게 */
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="box">
    테두리 스타일 지정
  </div>
</body>
</html>

• 여백 조절하기
  margin : 요소 주변 여백 설정
  기본형 - margin : 크기 or 백분율 or auto
  margin 속성으로 여백 설정하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델 - 마진</title>
	<style>
    div {
      width:200px;
      height:100px;
      display:inline-block;
      border:1px solid #222;
    }
    #margin1 { margin: 20px; }	/* 상하좌우 모두 마진 20px */
    #margin2 { margin: 10px 20px; }	/* 위아래 마진 10px, 좌우 마진 20px */
    #margin3 { margin: 10px 20px 30px; }	/* 위 마진 10px, 좌우 마진 20px, 아래 마진 30px */
    #margin4 { margin: 10px 20px 30px 40px; }	/* 위 마진 10px, 오른쪽 마진 20px, 아래 마진 30px, 왼쪽 마진 40px */
    #margin5 { 	/* 위 마진 30px, 오른쪽 마진 20px, 아래 마진 10px, 왼쪽 마진 40px */
      margin-top: 30px;
      margin-right: 20px;
      margin-bottom: 10px;
      margin-left: 40px;
    }
	</style>
</head>
<body>
  <div id="margin1"></div>
  <div id="margin2"></div>
  <div id="margin3"></div>
  <div id="margin4"></div>
  <div id="margin5"></div>
</body>
</html>

padding : 콘텐츠와 테두리 사이 여백 설정, 테두리 안쪽 여백
기본형 - padding : 크기 or 백분율 or auto
패딩도 마진과 마찬가지로 다양하게 여백을 설정할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>박스 모델 - 패딩</title>
  <style>
		h1 {
			display:inline-block;
			border:1px solid #000;
		}
		#padding1 { padding: 10px; }
		#padding2 { padding: 20px 30px; }
		#padding3 { padding: 10px 20px 30px 40px; }
  </style>
</head>
<body>
    <h1>레드향</h1>
	<h1 id="padding1">레드향</h1>
	<h1 id="padding2">레드향</h1>
	<h1 id="padding3">레드향</h1>
</body>
</html>