HTML & CSS

HTML
웹페이지의 구조를 만든다

CSS
스타일을 디자인한다

JavaScript
기능을 구현한다

---

HTML

HTML 구조를 의미있게 잘 짜놓아야 이후 자바스크립트에서 원활하게 코드를 작성할 수 있다.

div와 span의 차이

• div는 한 줄을 차지한다
• span은 컨텐츠 크기 만큼 차지한다

링크 삽입 태그

<a href="링크" target="_blank"></a>

ul & li (부모-자식 관계)

<ul>
  <li> list 1 </li>
  <li> list 2 </li>
  <li> list 3 </li>
    <ul>
      <li> list 3-1 </li>
      <li> list 3-2 </li>
    </ul>
</ul>

입력폼

• 텍스트를 입력하는 폼

<input type="text" placeholder="여기에 입력하세요">

• 하나만 선택이 가능한 체크박스

<input type="radio" name="그룹이름">

• 복수 선택이 가능한 체크박스

<input type="checkbox">

• 텍스트 입력시 줄바꿈이 되는 입력폼

<textarea></textarea>

버튼

<button></button>

---

CSS

글자

font-family		// 글꼴
font-size		// 크기
font-weight		// 굵기
text-decoration		// 밑줄

간격 & 정렬

letter-spacing		// 자간
line-spacing		// 행간
text-align		// 텍스트 정렬

박스를 구성하는 요소

content -> padding -> border -> margin
: 내용 - 안쪽여백 - 테두리 - 바깥쪽여백

박스의 종류 (박스 모델)

display: block;			// 줄바꿈이 되는 박스	ex) <h1><p>
display: inline-block;		// 옆으로 붙는 박스	ex) <span>

박스 사이즈 (박스 측정 기준)

box-sizing: content-box; (기본)	// border, padding, margin을 포함하지 않음 
box-sizing: border-box;	(권장)	// border, padding, magin을 포함

레이아웃 리셋

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

border (테두리)

border: 1px solid color;	// 테두리 두께, 테두리 스타일, 테두리 색상
border-radius: 10px		// 테두리를 둥글게 만들어줌
box-shadow: 5px color;		// 박스에 그림자를 넣어줌

padding (안쪽 여백)

padding: 10px;		// 값을 하나만 넣을 경우, 모든 방향의 안쪽 여백에 적용
padding: 10px 20px;	// 값을 두개만 넣을 경우, top/bottom은 10px, left/right가 20px
padding: top right bottom left;	

margin (바깥쪽 여백)

margin: 10px;		// 값을 하나만 넣을 경우, 모든 방향의 바깥쪽 여백에 적용
margin: 10px 20px;	// 값을 두개만 넣을 경우, top/bottom은 10px, left/right가 20px
margin: top right bottom left;	

scroll

• 조금 더 공부가 필요

overflow: auto;		// 컨텐츠가 박스보다 클 경우, 스크롤 하여 컨텐츠를 볼 수 있게 만듬