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
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%인데 잠은 다 잤다... 😂