웹개발 종합반 1주차

2022. 6. 13. 00:59

'스파르타코딩클럽'은

비전공자인 내가 코딩을 공부하기 위해 선택한 곳이며,

 

이 블로그는

 

1) 수업을 들으며 배운 내용과

2) 직접 코딩을 하며 발생한 오류를

 

기록하는 용도로 사용하려고 한다.

 

 

수업을 듣기 전 나의 진도를 확인할 수 있다.

 

HTML

- 뼈대

 

CSS

- 꾸미기

 

Javascript

- HTML과 CSS를 움직이게 하는것

 

HTML, CSS, Javascript = frontend

 


margin

- 바깥여백

margin: 20px 30px 10px 40px;

margin 적용하는 순서는 ↑부터 시계방향

↑ 20px 만큼 바깥에 여백을 준다.

→ 30px 만큼...

↓ 10px 만큼...

← 40px 만큼...

 

 

padding

- 안쪽여백

 

이미지로 만들어보니 확실하게 이해가 된다.

 


 

모든 태그에다가 Jua 글씨체를 적용하겠다.

* {

}

 

주석 처리

Ctrl /

 

원하는 범위까지 드래그해서

Ctrl + alt + L 누르면 코드 정렬됨


부트스트랩 사이트

https://getbootstrap.com/docs/5.0/components/buttons/

 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

 

 

코딩에서 사용할 수 있는 이모티콘 사이트

https://kr.piliapp.com/facebook-symbols/

 

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원

kr.piliapp.com

 

모바일 버전으로 볼 수 있음.

 

max-width

최대 크기를 제한해줘!!

 

width: 300px;

어디서나 300px 으로 맞춰줘

 

max-width: 500px;
width: 95%;

 

어디서나 500px으로 맞춰줘.

 

대신 화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘.

 

 


Javascript 맛보기

자바스크립트란?

- 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.

 

// 변수, 자료형, 함수, 조건문, 반복문

 

데이터를 한번에 모아서 정렬하는 방법이 필요

리스트 변수 선언

let a_list = []

 

리스트에 추가하기

a_list.push('감')

빼먹지 말고 '작은따옴표' 잘 넣어주기

 

 

 

 

 

 

 

 

 

 

 

438번째 줄에서 에러가 발생

 

scores가 아니라 mis_list로 변경해야됨

 

'스파르타코딩' 카테고리의 다른 글

3주차  (0) 2022.06.29
웹개발 종합반 2주차  (0) 2022.06.19
웹개발 종합반 1주차 homework  (0) 2022.06.19
[JavaScript] 연산자  (0) 2022.06.15
자바스크립트 문법 뽀개기 JavaScript 기초 문법  (0) 2022.06.13

BELATED ARTICLES

more