[항해99] 1주차 강의

1.1주차 강의

개요

• 설치
• 폴더 생성: sparta > frontend

파이참 프로그램

• 정렬: ctrl + alt + l

html

• h1은 페이지마다 하나씩 써주는 것이 좋다. 구글 검색 엔진에서 페이지 제목으로 인식하여 긁어가기 때문

CSS

• 배경 어둡게 하기

linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

• 배경 세트:

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("<https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg>");
background-position: center;
background-size: cover;

• 투명한 배경

background-color: transparent;

• 가운데정렬 영역잡기 세트

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

• 마우스 오버 시 스타일 지정

.mytitle > button:hover {
    border: 2px solid white;
}

Javascript

• 프로그래밍 언어는 //변수, 자료형, 함수, 조건문, 반복문만 알면 돼!
• 배열과 딕셔너리
  • 배열: 여러 개의 값을 저장할 수 있는 자료형
    • let a_list = [’수박’, ‘감’, ‘참외’, [’철수’, ‘영희’]]
    • 추가 시, a_list.push(’배추’)
    • 조회 시, a_list[3][1] ⇒ ‘영희’
  • 딕셔너리: 키와 밸류 쌍으로 이루어진 자료형
    • let a_dict = {'name':'bob', 'age':27}
    • 추가 시, a_dict['height'] = 180
    • 조회 시, a_dict[’name’] ⇒ ‘bob’
  • 배열 안에 딕셔너리가 있을 때는 순서로 잡을 수 없고, 키로 잡아야 하기 때문에 유의해야 한다
• 글자 자르기
  • let myemail = ‘sparta@gmail.com’
  • myemail.split('@')[1].split('.')[0] ⇒ gmail