CSS

CSS (Cascading Style Sheets)

-CSS에 대하여
-CSS 문법 구성
-CSS 파일 연결
-id 와 class
-텍스트 꾸미기
-박스 모델
-박스 크기 설정 기준

-CSS에 대하여

css는 html과 같은 마크업 언어가 표현되는 방법을 결정합니다.
HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당합니다.
같은 HTML 구조를 가지고 있는 문서에, 각기 다른 CSS파일을 적용하면 전혀 다른 웹사이트처럼 보이게 할 수도 있습니다.
CSS는 스타일링 도구이므로, 독립적으로 기능하지 않습니다. 반드시 HTML이 있어야만 동작할 수 있습니다.

-CSS 문법구성

body { 
      	color : red;
      	font-size : 30px;
     }

셀렉터(Selector) - 셀렉터는 태그이름이나 id, 또는 클래스를 선택합니다.

{} - 중괄호 안에는 이 요소에 적용할 내용을 작성합니다.

'color : red'; : 이를 선언(Declaration)이라 합니다. 선언에서 나누어 보겠습니다.

'color' 컬러는 속성명(Property)이고 , 'red' 레드는 속성값(Value)입니다.

;(세미콜론) 선언구분자 : 세비콜론을 붙여 속성끼리 구분해주어야 합니다.
하나의 속성만 존재할 때에는 세미콜론을 붙이지 않아도 무방하지만, 속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋습니다.

-CSS 파일 연결

html과 css 파일을 작성했다면, 작성한 내용을 HTML 파일에 적용하는 방법입니다.
CSS 파일을 HTML 파일에 연결할 떄에는, link 태그 안에서 href 속성을 통해 파일을 연결합니다.

ex)
<link rel="stylesheet" href="index.css" /> 

link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용하며, rel은 연결하고자하는 파일의 역할이나 특징을 나타냅니다.
css는 style sheet이므로 rel속성에 style sheet를 추가합니다.

href속성에는 파일의 위치를 추가해야 합니다.
작성한 두 파일은 한 폴더 내에 있으므로 파일이름만 입력합니다.
다른 폴더에 파일이 존재하는 경우, 절대경로 또는 상대경로를 입력해 원하는 파일을 찾아 연결할 수 있습니다.

CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가하는 방법도 있습니다. 그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않습니다.
관심사 분리를 여기에 적용하면 HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하는 걸 말합니다.

CSS구성 스타일
내부 스타일: CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성합니다.
외부 스타일 : link를 이용하여 연결합니다.

ex)
<nav style="background: #eee; color: blue">...</nav>

위 예시처럼 같은 줄에서 스타일을 적용하는법을 인라인 스타일이라고 합니다.

-id 와 class

html문서에는 < h1 > 나< p > 등 여러 요소가 존재합니다.
하나의 < h1 >에만 요소에만 색을 바꾸려면 < h1 >요소는 하나의 태그이기 때문에 태그를 선택해 색상을 변경할 수 있습니다.

h1 {
      color : red;
   }

이처럼 코드를 작성할 시 모든 < h1 >의 요소에 색상이 적용됩니다. 요소를 정확하게 선택하기 위해서는 id,class와 같은 셀렉터(Selector)가 있습니다.

• id
  id가 있는 요소를 선택할 때에는 #기호를 이용합니다.
  id는 하나의 문서에서 한 요소에만 사용해야 합니다.

 html
 <h1 id='hi'>hello</h1>
 
 css
 #hi { 
 		color : red;
     }

• class
  class가 있는 요소를 선택할 때에는 .기호를 이용합니다.
  class는 하나의 문서에서 하나이상의 요소에도 사용이 가능합니다.

html
<h1 class='hi'>hello</h1>

css
.hi { 
	  color : red;
    }

아래의 코드는 잘못된 id의 사용입니다.

<ul>
  <li id="menu-item">Home</li>
  <li id="menu-item">Mac</li>
  <li id="menu-item">iPhone</li>
  <li id="menu-item">iPad</li>
</ul>

여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용합니다.

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

여러 개의 class를 하나의 요소에 적용할 수도 있습니다.
여러 class를 하나의 요소에 적용하기 위해서는, 공백으로 적용하려는 class의 이름을 분리합니다.

ex)
li요소에 menu-item과 selected 두 개의 class가 들어가 있습니다. 
<li class="menu-item selected">Home</li>

-텍스트 꾸미기

• 색상
  -hex (16진수로 RGB red,green,blue) '#ffffff' , '#ff0000'
  -주요 색상 이름 ('white' , 'red')

body {
     	color : red; // 글자 색상
     	background-color : blue; // 배경 색상
     	border-color : green; // 테두리 색상
    }

• 글꼴(font-family)
  글꼴의 속성은 font-family 입니다.
  구글폰트에서 다양한 폰트를 사용할 수 있습니다.

body {
      	font-family : "SF Pro KR", "MalgunGothic", "Verdana";
     }

• 크기(font-size)
  글자 크기를 변경하기 위해서는 font-size속성을 사용합니다.

.title {
          font-size : 24px;
       }

• 여기서 알아야 할 단위
  -절대단위 : px , pt 등
  기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 단위이기 때문에 사용자 접근이 불리하며 절대적인 크기로 정하는 경우 픽셀을 사용합니다.
  px은 글꼴의 크기를 고정하는 단위이기 때문에 개발자가 제목(heading)을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정했으나 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과를 초래할 수 있습니다.

  -상대단위 : %, em, rem, ch, vw, vh 등
  일반적인 경우 상대단위 rem을 추천합니다.
  em은 root크기 즉,브라우저의 기본 글자 크기가 1em이라면 2배로 크게 하고싶다면 1em을, 작게 하고 싶다면 0.6em등으로 조절해서 사용가능하며 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다.
  (em은 부모 요소에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다.
  이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.)

  -화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
  이 때에는 vw(viewport width), vh(viewport height) 를 사용하세요.
  웹사이트의 보여지는 영역을 Viewport라고 합니다.
  화면을 가득 채우며 딱 떨어지게 스크롤 되는 웹페이지에서 100vw, 100vh를 사용해 구현한 것 입니다.

• 기타 스타일
  추가적으로 텍스트를 꾸밀 때 자주 사용하는 속성입니다.
  -굵기 : font-weight
  -밑줄,가로줄 : text-decoration
  -행간 : line-height
  -자간 : letter-spacing

• 정렬
  -가로로 정렬할 경우
  vetical-align 속성을 사용하며
  유요한 값으로는 right, left, center, justify(양쪽정렬)가 있습니다.

  -세로로 정렬할 경우는 조금 복잡합니다.
  vertical-align 속성을 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 합니다.
  

-박스 모델

모든 콘텐츠는 고유한 영역이 있습니다.

줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)

• block : 줄바꿈이 일어납니다. 기본적으로 갖는 너비가 100% 입니다.
  width,height사용이 가능합니다.
  ex) h1, div, p 태그등

• inline : 줄바꿈이 일어나지 않습니다. 글자가 차지하는 만큼이 기본적인 너비입니다. width,height사용이 불가능합니다.
  ex) span

• inline - block : 줄줄바꿈이 일어나지 않습니다. 글자가 차지하는 만큼이 기본적인 너비입니다. width,height사용이 가능합니다.
  (block, inline 두 가지 박스 종류의 특징이 섞임)

박스 구성요소
border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있습니다.

• border(테두리) : 테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미있게 사용합니다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듭니다.

 p { 
 	  border : 1px solid red
   }
   
   //border-width border-style border-color

• margin(바깥 여백) : margin은 border를 기준으로 박스 외부의 여백을 지정합니다.
  각각의 값은 top, right, bottom, left로 시계방향입니다.

  재미있게도 margin에는 음수값을 지정할 수 있습니다. 음수 값을 지정하면 다른 요소와의 간격이 줄어듭니다.
  극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 요소와 겹치게 만들 수도 있습니다.

p {
   	margin : 10px 20px 30px 40px  // top right bottom left
  }
 
 p {
   	margin : 10px 20px 30px  // top(10px) right left(20px) bottom(30px)
  }
 
 p {
   	margin : 10px 20px   // top bottom(10px) right left(20px)
  }
 
 p {
   	margin : 10px   // top right bottom left 각각 10px
  }

• padding(안쪽 여백) : padding은 border를 기준으로 박스 내부의 여백을 지정합니다.
  값의 순서에 따른 방향은 margin과 동일합니다.

• overflow : 박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나올 경우의 처리 방법입니다.

 p { 
 	   overflow : auto // 콘텐츠가 넘치는 경우 스크롤을 생성합니다.
       overflow : hidden // 넘치는 콘텐츠의 내용을 보여주고 싶지 않을때 사용합니다.
   }

-박스 크기 설정 기준

박스 크기를 측정하는 기준은 매우 중요합니다.
레이아웃 디자인을 할 때 박스에 적용할 여백을 고려하지 않고 박스의 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다.

#container {
  	width: 300px;
  	padding: 10px;
  	background-color: yellow;
  	border: 2px solid red;
  }
  // 위의 예시처럼 width속성에 300px을 지정했습니다.
     그러나 개발자도구를 통해 보면 컨테이너의 width값은 324px입니다.
     
   300px (콘텐츠 영역)
   + 10px (padding-left)
   + 10px (padding-right)
   + 2px (border-left)
   + 2px (border-right)

레이아웃 디자인을 조금 더 쉽게하는 방법이 있습니다. 여백과 테두리 두께를 포함한 박스 계산 법입니다.
*은 모든 요소를 선택하는 셀렉터입니다. 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가합니다.
이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다.