1. HTML

HTML이란, tag들의 집합으로, 웹 페이지의 구조를 표현하는 마크업 언어

• 자주 쓰이는 태그

태그	설명
<div>	한 줄을 차지하는 공간 생성
<span>	컨텐츠만큼의 공간 생성
<img>	이미지 삽입
<a>	링크 삽입
<ul> & <li>	순서 없는 목록 & 목록 항목
<input>	사용자 입력(Text, Radio, Checkbox)
<textarea>	텍스트 공간 생성
<button>	버튼 생성

2. CSS

CSS란, 웹 페이지의 구조에 스타일과 레이아웃을 정의하는 스타일시트 언어

• CSS 사용 목적

  : CSS를 통해 UI(User Interface)를 개선함으로써 가독성을 높여 좋은 UX(User eXperience)를 이끌어내기 위함이다.
  
  

• CSS의 기본 문법 구성

body(=셀렉터){
	color(=속성명): red(=속성 값);
}

• 셀렉터의 사용법

  1. id를 붙여 스타일링

  : HTML 문서에 <div> 와 <p>, <span> 등의 태그가 여러개 존재할 때, 그 중 특정 요소만 스타일링을 하기 위해 사용하는 방법
  
  

  • HTML 문서의 태그에 id를 붙인다.

    <p id="main-paragraph">This is main paragraph.</p>

  • # 기호를 사용해 id가 있는 요소를 선택한다.

    #main-paragraph {
        color: red;
    }

  2. class를 지정해 스타일링

  : 여러 요소에 같은 id를 부여하지 못하기 때문에 여러 같은 요소를 스타일링 하기 위해 사용하는 방법
  
  

  • HTML 문서의 태그에 class를 지정한다.

  <ol>
   	<li class="fruit">Apple</li>
   	<li class="fruit">Banana</li>
  </ol>

  • . 기호를 사용해 class가 지정된 요소를 선택한다.

  .fruit {
      color: red;
  }

  3. 여러 class를 하나의 요소에 적용하기

  : 여러 class를 하나의 요소에 적용하기 위해 사용하는 방법
  
  

  • HTML 문서의 태그에 띄어쓰기로 다른 class를 지정한다.

  <ol>
   	<li class="fruit selected">Apple</li>
   	<li class="fruit">Banana</li>
  </ol>

  • . 기호를 사용해 class가 지정된 요소를 선택한다.

  .selected {
      color: red;
  }

  
  

• 텍스트 관련 속성

속성명	설명
color	텍스트 색상 변경
font-family	글꼴 변경
font-size	텍스트 크기 변경(단위는 rem추천)
font-weight	텍스트 굵기 변경
text-decoration	밑줄, 가로줄
letter-spacing	자간 변경
line-height	행간 변경
text-align	가로 정렬

• 박스 모델

  : 웹의 모든 컨텐츠가 가지는 직사각형 박스 형태의 영역

  • 줄 바꿈이 되는 박스: block (<h1> <p>)
  • 줄 바꿈없이 옆으로 붙는 박스: inline, inline-block (<span>)
    (inline은 width, height 속성을 사용 불가능, inline-block은 width, height 속성 사용 가능)
    
    

• 박스 구성 요소

  • margin: 바깥 여백
  • border: 박스 테두리
  • padding: 안쪽 여백
  • content: 박스 내 컨텐츠
    
    

• 박스보다 큰 컨텐츠 처리

  overflow: auto;를 사용하면 크기가 큰 컨텐츠를 스크롤을 통해 표시 가능
  
  

• 레이아웃 디자인을 더 쉽게 하는 방법

  box-sizing: border-box;를 HTML 문서 전체에 사용하면 모든 박스에서 여백과 테두리를 포함하는 박스 크기를 계산한다.