[항해99(7기)] 웹개발 종합반 1주차

 1주차 수업은 간단한 HTML, CSS, JavaScript 문법에 대해서 배웠다. 쉽다고 생각했던 HTML, CSS도 오랜만에 하니 까먹고 있었던 태그와 속성들이 차차 생각나기 시작했다. 

 

CSS

• CSS 속성 연습(1) - 배경 사진 중간 정렬하기

background-image: url("");
background-size: cover;
background-position: center;

 

• CSS 속성 연습(2) - 화면 비율에 따라 이미지 조절

width: 95%;
max-width: 500px;
margin: 1rem auto 1rem auto;

width 크기를 지정해주고 margin: auto를 사용하면 객체를 중간으로 정렬할 수 있다.

혼자 반응형 웹페이지 제작을 하면서 사용했던 @media가 있는데 이는

/* for large screen sm(640px) */
@media (min-width: 640px){
    .container{
        max-width: 640px;
    }
    
    .sm-text-xl{
        font-size: 3em;
    }
}

/* for large screen md(768px) */
@media (min-width: 768px){
    .container{
        max-width: 768px;
    }

    .md-text-left{
        text-align: left;
        padding-left: 3rem;
    }
}

/* for large screen lg(1024px) */
@media (min-width: 1024px){

    #nav .toggle-btn > button{
        display: none;
    }
    
    #nav{
        flex-direction: row !important;
    }

    #nav .collapse{
        max-height: initial !important;
    }

    #nav .collapse ul{
        flex-direction:row !important;
    }

    .active{
        max-height: 100% !important;
    }

    .lg-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

         
}

이런 식으로 width의 크기에 따라 속성을 다르게 주었다.

 

 

• CSS 속성 연습(3) - display: flex 속성

 

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

 div객체에 display: flex가 적용된 div안에 item들은 1)flex-direction 속성으로 item들의 수직/수평 방향 정렬을 설정할 수 있고 2)align-items을 사용해 text baseline 기준으로 어떻게 정렬할 것인지(수직축) 설정할 수 있고 3) justify-content 속성으로 메인축(main axis)을 기준으로 어떻게 정렬할 지 설정할 수 있다.

 참고로 align-items와 비슷해보이는 align-content 정렬은 flex 속성 + flex-wrap: wrap; 이 적용된 상태에서 행이 2줄 이상 되었을 때 수직축 방향 설정을 결정하는 속성이란다.

 

JavaScript

• 리스트(list)와 딕셔너리(dictionary)

let dict_1 = {'name':'minji', 'age':26};
let dict_2 = {'name':'jaewan', 'age':27};

names = [dict_1, dict_2];

//names[0]['age']의 값은 26
//names[1]['name']의 값은 'jaewan'

• 미세먼지가 index이하인 지역 출력하는 함수

function show_gus(mise_list, index) {
	for(let i = 0; i < mise_list.length; i++) {
    	if(mise_list[i]["IDEX_MVL"] < index){
        	let gu_name = mise_list[i]["MSRSTE_NM"];
            	let gu_mise = mise_list[i]["IDEX_MVL"];
            	console.log(mise_list[i]["MSRSTE_NM"], mise_list[i]["IDEX_MVL"]);
        }
    }
}