오늘은 HTML/CSS 세션을 수강하고 나머지 시간엔 자바스크립트를 했는데 인상적이었던 사용법이나 세션에서 추가 학습해야될 부분을 정리해보려 한다.🤨
HTML/CSS 세션 정리
실무에서 CSS 요소를 가운데 배치시키는 방법은 대표적으로 3가지가 있는데 Grid Flex Position 모두 많이 사용되니 숙지가 필요하다. Grid와 Flex의 추가 학습이 필요할 듯 하다.
Flex
Wecode 과제로 만들어본 Weegle 웹 페이지 인데 검색창 부분의 아이콘 배열을 나는 Position : Absolute 를 사용하여 각각 지정 픽셀만큼 이동시켜 제작하였는데, 세션에서는 멘토님이 Flex를 사용해서 제작하는 방법을 알려주셨다. 좋은 방법이었고 나중에라도 쓸일이 많을 것 같아 이번 기회에 Flex에 대해 좀더 공부했다.
해당 방법은 부모 태그에 flex를 선언해주고 배치해줄 요소 들에게 flex : (number) 를 설정해 유저의 해상도에 따라 동적으로 배치해주는 방법이었다. flex 에는 생략이 가능한 3가지 옵션이 있는데 방금 같이 flex 뒤에 단일 숫자를 입력할 때는 flex-grow를 지정하게된다. flex-grow 옵션은 요소 내부에서 할당 가능한 공간의 비율 정도를 의미한다. 그러한 특징을 사용하면 유연한 웹페이지를 구성하는데 많은 도움이 될 것 같다.
flex-option
flex-grow: 요소 내부에서 할당 가능한 공간의 비율 정도를 지정 (생략 가능 기본값은 0)flex-shrink: 요소 내부에서 해상도 같은 사이즈가 변경될 때 축소되는 비율을 결정 (생략 가능 기본값은 1)flex-basis: flex 아이템의 초기 크기를 지정하는 옵션 (생략 가능 기본값은 auto)
등이 있다. flex 뒤에 옵션으로 넣어주는 인자의 타입 갯수에 따라 옵션이 지정되는 방법이 달라지는데 값이 한 개일땐 number 타입이 오면 flex-grow 옵션으로 자동지정되기 때문에 가장 쓸일이 많은 grow 옵션 사용시엔 인자 하나로 사용하면 된다.
MDN Flex 페이지
네이버 테크 블로그 Flex 부분
Flex 학습시에 참고하기 아주 좋아보이는 페이지 두개를 링크해두었는데 한 번씩 참고하며 학습해봐야겠다.🧐
JavaScript
조건문 Tips
function meetAt(year, month, date) {
if (year && !month && !date) {
return year+'년'
}
if (year && month && date) {
return year+'/'+month+'/'+date
}
if (year && month && !date) {
return year+'년 '+month+'월'
}
}위코드 Repl.it 과제 풀이시에 봤던 구문인데 3가지의 인자를 받는데 입력이 되지 않았을 때에는 undefined가 되니 각 변수마다 ! (not) 옵션을 부여해서 true 로 변환되어 조건이 완성되는 방법인데 깔끔하고 좋은 방법이라 남겨둔다.
구조 분해 할당
자바스크립트에서 상당히 많이 쓰이는 문법 중에 구조 분해 할당도 그 중 하나라 할 수 있다.
구조 분해 할당 문법은 배열 혹은 객체 에서 각각 값이나 프로퍼티를 분해하여 다른 변수에 담을 수 있도록 해줍니다.
위코드 과제를 해결하다 Math.min() 사용하는데 인자에 여러 숫자 데이터를 나눠 넣어줘야 했는데, 해당 변수가 배열의 형태였다. 그래서 배열의 각각 숫자 데이터를 구조 분해 할당 문법을 사용하여 나누어 주어지니까 손쉽게 해결이 되었다.
Math.min(...variable)과 같은 방식으로 사용할 수 있다.
let variable = [1, 2, 3]; 이라면
Math.min(1, 2, 3) 과 같다.
주의할 점은 ES2016 이상 에서만 적용 가능하다 한다.
ParseInt && Number 차이
ParseInt와 Number는 둘다 문자열에서 숫자형식으로 변환해주는 특성을 갖고 있는데, ParseInt는 이름대로 파싱을 통해 Integer 정수형만을 출력해주고 Number형은 소수자리 까지 모두 숫자로 변환해준다는 차이가 있었다. 흥미로운 부분이라 실습화면으로 기록으로 남겨둔다.
