스파르타코딩클럽에서 크리스마스 주간동안 무료로 짧은 코딩강의를 내놓았다. 짧은 기간으로 내놓은 만큼 정말 빠르면 30분정도 걸릴 만큼 얼마 안 되는 분량이길래 후다닥 수강신청을 하고 집으로 내려오는 기차에서 수강을 완료했다. 난이도는 입문 수준으로 코딩을 아예 처음 접하는 사람도 쉽게 따라올 수 있는 수준이다. (다시 반복하지만 나는 언제까지 기초만 할텐가..) 나는 코딩을 아예 처음 접하는 건 아니지만 그래도 오랜기간 쉬다가 다시 시작하는것이다 보니 가볍게 할 만 했다.

🔨무엇을 배웠나? (Contents)

0. 최종 결과물
1. HTML, CSS 기초
2. 소금 알갱이 한 알 정도의 Javascript
3. 모바일 버전 처리

---

0. 최종결과물

아래 이미지와 같이 봉투를 클릭하면 편지가 등장하는 간단한 사이트를 만들어 보았다.
클릭 전
클릭 후

---

1. HTML, CSS 기초

1-1. HTML 기초

• 웹페이지의 틀을 잡는 역할
• HTML은 크게 Head 와 Body로 구성된다.
• Head : 페이지의 속성 정보가 들어감.
  이와 같은 요소가 포함됨. meta script link title
• Body : 페이지의 내용이 들어감
  이와 같은 요소가 포함됨. p ul li h1 span img a button textarea

1-2. CSS 기초

• HTML로 잡은 구역을 꾸며주는 역할
• head 태그 안에 style 태그를 만들어 작성

✏️자주 쓰이는 CSS

배경 : background-color background-image background-size
크기 : width height
폰트 : font-size font-weight font-famliy color
간격 : margin padding

1-3. 웹폰트 적용

1. 웹폰트 지원 폰트서비스 접속
2. 원하는 글꼴을 찾아 선택하고
3. link의 link rel 과 link href 태그를 복사해
4. head 안에 붙여넣기
5. css의 font-family 태그를 복사해
6. style 안에 붙여넣기

---

2. (소금 알갱이 한 알 정도의) Javascript

2-1. 함수 (function)

✉️ 봉투에 클릭 함수 붙이기

1. 함수 만들기

function open() {  }

<div class="envelope" onclick = "open()"></div>

2. 열고 닫히게 만들기

function open_letter() {
	document.getElementsByClassName("letter-close")[0].style.display = 'none'
    	document.getElementsByclassName("letter-open")[0].style.display = 'block'
    }

📎 onclick Event

• 클릭 시 발생하는 이벤트
• 클릭 시 자바스크립트 수행

---

3. 모바일 버전 처리

@media screen and (max-width : 760px) { }

여기서 760px 은 BP값을 의미한다.