이번 주 공부를 하면서 내가 몰랐거나 놓쳤던 부분들을 정리하는 형태로 적어보려고 한다. 중요하다고 판단 되는 개념은 따로 포스팅을 하여 좀 더 깊게 파고들 생각이다. 과제를 진행하면서 기초가 너무나도 부족하다는걸 뼈저리게 느낀다...반복과 복습만이 살길.
Flex
css 레이아웃을 할 때 Flex, Grid 이 두가지가 가장 많이 사용되는데 그 중 하나인 Flex, 아래와 같이 html이 작성되었을 때
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>
부모인 div속성을 플렉스 컨테이너라고 부르고, 자식 요소인 div들을 플렉스 아이템이라고 부른다.
Flex속성은 container, item에 적용하는 속성 2가지로 나뉜다. justify는 메인축 align은 수직축 방향의 정렬을 뜻한다.
- flex-direction : 배치 방향 설정(메인 축의 방향 설정)
- flex-wrap : 아이템 줄 바꿈을 결정
- flex-flow : direction, wrap 을 한꺼번에 설정
- justify-content : 메인축 방향으로 아이템 정렬
- align-items : 수직축 방향으로 아이템 정렬
- align-content : 아이템들의 행이 2줄 이상 되었을 때 수직축 방향 정렬
- flex-basis : 아이템의 기본 크기 설정
- flex-grow : 여백의 비로 박스 크기 설정
- flex-shrink : 아이템이 flex-basis의 값보다 작아질수 있는지 결정
- align-slef : 해당 아이템의 수직축 방향 정렬
- order : 배치의 시각적 나열 순서 결정
Grid
Grid 또한 Flex와 마찬가지고 컨테이너와 아이템에 적용하는 속성 두가지로 나뉜다.
- grid-template-rows : 그리드 행의 배치
- gird-template-columns: 그리드 열의 배치
- grid-template-areas : 각 영역에 이름을 붙이고 배치하는 방법
- repeat 함수 : 반복되는 값을 자동으로 처리하는 함수 repeat(5 1fr)은 1fr 1fr 1fr 1fr 1fr 과 같음
- minmax 함수 : 최소값과 최대값을 지정할수 있는 함수 minmax(100px auto)는 최소한 100px, 최대한 자동으로 늘어라게 라는 뜻
- row-gap, column-gap, gap : 그리드 셀 사이의 간격 설정
- align-items : 아이템들을 새로축 방향으로 정렬
- justify-items : 아이템들을 가로축 방향으로 정렬
- align-content : 아이템들 높이의 합이 커네이너 높이보다 작을 때 통째로 정렬
- justify-content : 아이템들의 너비의 합이 컨테니어보다 작을 때 통째로 정렬
- grid-column-start,end / grid-row-start,end : 각 셀의 영역 지정
- align-self : 해당 아이템을 세로 방향으로 정렬
- justify-self : 해당 아이템을 가로 방향으로 정렬
event.target과 event.currentTarget
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="pratice.css">
</head>
<body>
<div class="parent">
<button class="button">Click!</button>
</div>
<script src="practice.js"></script>
</body>
</html>const parent = document.querySelector(".parent");
const btn = document.querySelector(".button");
parent.addEventListener("click", function(ev){
console.log(ev.target);
console.log(ev.currentTarget);
});
이런 코드가 존재할 때 콘솔창에 나오는 결과물을 보면
즉 event.target은 이벤트가 실제로 발생한 요소를 말하고 event.currentTarget은 이벤트가 장착된 요소를 말한다.
innerHTML, innertext, textcontent
innerHTML은 요소 내부의 태그들도 변경이 가능하지만 textcontent, innertext는 요소 내부의 컨텐트만 변경한다
innertext와 textcontent도 호환성이나 여백을 가져올 때의 차이점들이 있지만 textcontent가 더 선호됨
스코프(scope)
스코프란 어떤 변수들에 접근할수 있는지를 결정한다. 전역변수(global scope)와 지역변수(local scope)가 있다
변수의 스코프는 자신이 속한 함수를 기준으로 스코프가 형성된다.
하위 스코프에서 상위 스코프로 참조는 가능하지만 반대로 상위 스코프에서 하위 스코프로의 접근은 불가능하다.
호이스팅(Hoisting)
함수 안에 있는 선언문들을 끌어올려서 스코프 최상단에 선언하게 하는 것을 호이스팅이라고 한다.
let이나 const로 호이스팅을 실험해봤을 때 undefined이 나타나지 않아 호이스팅이 되지 않는가 라고 생각했지만
호이스팅은 일어났지만 let은 초기값이 할당이 되있어야 사용될수 있기 때문에 호이스팅이 일어나지 않은것은 아니다 !
느낀점
모르는 부분들이 너무 방대하고 양도 많아서 글로 정리하기엔 아직 한계가 있는것 같다 개념들은 자료들 계속 참조하면서
내 것으로 만들려 해보고 중요한 내용들은 따로 포스팅 해두어 머리속에 잘 각인 시킬수 있도록 해봐야겠다.
블로그 글 적는것도 이제 저번보다는 익숙해진것 같다. 오래 걸리더라도 스스로 사고하고 코드를 작성하는 힘이 중요한것 같다.
당장은 효율성보다는 정확도와 정밀성을 더 따져가면서 내 페이스대로 해봐야겠다. 다음주차도 파이팅..!
'바닐라코딩' 카테고리의 다른 글
| 바닐라코딩 부트캠프 수강 후기 (1) | 2021.05.26 |
|---|---|
| 바닐라코딩 프렙 수강 후기 (5) | 2020.12.05 |
| 바닐라코딩 프렙 4주차 (0) | 2020.11.01 |
| 바닐라코딩 프렙 3주차 (0) | 2020.10.25 |
| 바닐라코딩 프렙 1주차 (0) | 2020.10.08 |
