항해99 사전공부: 웹개발 종합반 5기 1주차 강의

항해99 사전 강의인 웹개발 종합반 5기 1주차를 마무리 하였다.

자주 사용하지 않아서 잊혀진 기능과 코드들을 상기시켜줬다.

 

중요한 내용들을 상기해보자

 

1. margin: auto; // 중앙정렬하기, inline 속성일 때는 안되고 box 속성일 때 가능하다.

margin: auto;   /*중앙정렬 하기, inline 속성일 떄는 안되고 box속성일때 가능하다*/

참고로

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.

대표적인 inline 엘리먼트로 <span>, <a>, <em>, <button> 태그 등이 있다.

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. 대표적인 block 엘리먼트로 <div>, <p>, <h1> 태그 등이 있다.

 

 

2. ★★ display: block ★★

이 기능은 매우 중요하다

html은 글 속성(inline)과 박스속성(block)이 있는데

박스는 가로세로라는 개념이 존재하고 글은 존재하지 않는다.

그러므로 글 속성(inline)을 박스(block)로 강제로 바꿔준다음에 옮겨줘야하는데

그걸 하게 해주는 것이 바로 display: block 이다.

.mybtn{
    width: 100px;
    margin: auto;   /*중앙정렬 하기, inline 속성일 떄는 안되고 box속성일때 가능하다*/
    /*margin: 20px 0px 0px 80px; 상 우 하 좌 (시계방향)*/
    display: block;
}

 

 

3. javascript 에서 list와 dictionary

 

list

let a_list = []  // 리스트를 선언
let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('안녕')
b_list // [1, 2, "hey", 3, "안녕"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

dictionary

let a_dict = {}  // 딕셔너리 선언.
let b_dict = {'name':'Bob','age':21} // 로 선언 가능

b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

list와 dictionary의 조합

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'