1일차- 내일배움캠프 1기 TIL(Today I learned)_HTML/CSS/JS/부트스트랩

1. WEB 동작의 원리

 

 웹 동작의 원리?  Chrome 개발자 도구로, 화면을 조작할 수 있지만 새로고침하면 처음으로 돌아간다. 

이를 통해서 Web의 동작 원리를 생각해 볼 수 있다. 새로고침을 하면 클라이언트(화면)는 서버에게 Data나 file을 요청할 수 있다. 

요청된 Data는 브라우저가 해석해서 클라이언트에 그려준다. 

 

클라이언트 -> 요청 -> 서버(API)

서버 ->응답(HTML,CSS,JS,DB) -> 브라우저(해석)-> 클라이언트 

 

2.HTML

 

문서 형태를 기반으로 한 CODE, 문서의 뼈대를 담당.

특별히 어려운 점은 없었다. 

 

3.CSS

 

HTML을 꾸며주는 CODE

개인적으로는 <button>의 가운데 정렬이 마음처럼 되지 않았다. 

text를 정렬하려면 text-align, <tag> 전체를 정렬하기 위해서는 display: block; 해주고 margin: auto;로 블럭 행태로 정렬해야하는 것에서 시간이 많이 걸렸다.  

그리고, 그 동안 <img src="">만 활용했는데,

<div>에 배경을 넣어서 활용하는 방법을 배웠다. 자주 사용한다고 하는 아래 3가지는 외우도록 하자. 

backgound-img: url("");

background-size: cover;

background-position: center;

CSS는 항상 정렬이 어려운 것 같다. Fixed/relative와 Flexing 두가지를 내일 검색해서 꼭 알아보도록 해야했다. 

 

 

학습 시 구현한 간단한 로그인 UI

로그인 UI 구현 

4.Bootstrap

 

이전에 사용해본적이 있어서 특이사항은 없었다. 

중요하다고 생각하는 점은, Component 사용 이외에도 화면 사이즈 별로 반응하게 만드는 것이다. 

<container class="row">안에 "12"분할 기준 "md-3"부터가 휴대폰 화면이다. 

 

 

5.JS

자주 쓰는 형태의 반복문!

이전에 몽고 DB에 title, content에 값을 빼낼 때 쓰던 구조가 아래인지 새삼 새로웠다. 

물론, req.body로 모듈을 사용했긴 하지만, 꼭 머리에 넣어두고 싶다. 

 

for (let i = 0; array.length; i++){

     let array_obj1 = array[i][key];

     let array_obj2 = array[i][key];

     if (key값으로 꺼낸 value 값) {

         console.log(array_obj1, array_obj2)   

     }

} 

 

6. 과제 : 부트스트랩, HTML, CSS, JS 활용해서 쇼핑몰 상품 UI 구현하기

 

특별히 문제 없이 할 수 있었다. 

직접 구현한 과제 

 

7.소감 

 

진행율 40%인데 잠은 다 잤다... 😂