프론트 엔드 (HTML, CSS, Javascript 등 맛보기)

-프론트 관련-

 

*간격, 여백*

margin (외부 간격)

padding (내부 간격)

 

*주석 (임시 생략)*

컨트롤+/

 

*style 세트들*

스타일 백그라운드 이미지

background-image: url("https://w.namu.la/s/385693ee286b4bac439fa5c333d820817d0ad49a150f43f1c4f6aaac1d22a77b7c64865c856ce1ee54b483f8599b252d0dc452041a444108ec1268d1e1efb2794edb7605a195e12d417fa3aba8e038792ea650dc547e98a66e2c76d045fa9734");
background-position: center;
background-size: cover;

스타일 글씨

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

 

.mypost > button {

이렇게하면 button에 따로 class지정 안 해줘도 됨.

 

index, homework 자료 작성 (코드 참조)

 

background-color: transparent; (투명색)

 

 

-자바스크립트-

 

*리스트(자료형 - 숫자가 중요)*

> let a_list = ['수박', '참외', '배']
> a_list[1]
< '참외'

> a_list.push('감')
< 4

> a_list
< (4) ['수박', '참외', '배', '감']

 

*딕셔너리(자료형 - 키, 값으로 이루어짐)*

let a_dict ={'name':'bob','age':27}
※키(key) = name, age  /  값(value) = bob, 27

 

*반복문 패턴 (40이하 불러오기, 출력)*

let mise_list = [...];

for (let i = 0; i < mise_list.length; i++) {
  if (mise_list[i]['미세먼지'] < 40) {
    console.log(mise_list[i]['구 이름'])
  }
}

 

 

 

-기타-

 

부트스트랩 (css 모음집)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

 

줄맞추기 = 컨트롤+알트+L
왼쪽으로 = 쉬프트+탭