(1주차 목표)
HTML, CSS basic
Javascript basic
1. Frontend 구성
HTML- 뼈대
CSS- 꾸미기 (bootstrap은 예쁜 css 꾸러미)
뭔가를 꾸민다는 것 = 가리킬 수 있어야 한다
① 이름표를 붙인다 class="mytitle"
② 이름표를 어떻게 하라고 명령한다 .mytitle {어떻게 하라고}
Javascript- 움직이게 해주는 것 (브라우저가 알아들을 수 있는 언어)2. HTML/CSS
background-color
background-image
background-size
width/max-width
height
font-size
font-weight
font-family
color
margin(바깥 여백)
padding(안쪽 여백)
border(귀퉁이)
border-radius(귀퉁이 둥글게)
가운데로 맞출땐
background-image : url("");
background-size : cover;
background-position : center;
안에 있는 내용물들을 정리할 땐
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
요소 하나씩 접근할 땐
.mytitle > .button {}
어둡게 만들 땐
background-image : linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("");
모바일 처리 (웹에서 검사로 확인 가능)
max-width : 500px;
width : 95%;3. CSS 파일 분리
새 스타일 시트에 (예, mystyle.ss)
스타일 안에 부분 복사한 후 붙여넣기
그리고 이 자리를 대신해서
<link rel ="stylesheet" type="text/css" href="(css파일 이름).css">4. Javascript
<style></style> 아래 <script></script>로, console에서 똑같이 적용된다.
let a=1
let b=2
let c=안녕
a+b = 3, b+c = 2안녕
let a_list = ['수박','참외','배']
a_list[1] = '참외'
a_list.push('감') = ['수박','참외','배','감'] # list 추가하는 법
let b_list = ['철수','영희']
a_list.push(b_list)
a_list = ['수박','참외','배','감',Array(2)]
let a_dict = {'name':'bob','age':27}
a_dict['name'] = 'bob'
a_dict['height'] = 180 # dictionary 추가하는 법
let myemail = 'sparta@gmail.com'
myemail.split('@') = ['sparta','gmail.com']
myemail.split('@')[1] = 'gmail.com'
myemail.split('@')[1].split('.') = ['gmail','com']
myemail.split('@')[1].split('.')[0] = 'gmail'
alert
console.log
옍