[TIL] 2주차 복습

ㅜㅜ·2022년 9월 4일

Today I learn

목록 보기

10/77

레이아웃 리셋의 필요성

레이아웃을 만들 때, 브라우저의 기본 스타일이 방해가 되는 경우가 있음.
브라우저마다 여백, 글꼴 등이 기본적으로 다르기도 함.

* {
  box-sizing: border-box;
}
/*박스 측정기준을 보더 박스로 설정하면 width, height가 여백 포함.*/

body {
  margin: 0;
  padding: 0;
}
/*body의 기본 마진, 패딩을 0으로 설정*/

flex-basis 보충

여기서 비교 가능 : https://codepen.io/gka/pen/pdKrxw

세 박스가 모두 flex-grow : 1 일 때,
flex-basis가 0이어야 세 박스가 1:1:1의 너비를 갖는다.
flex-basis가 auto이면 1:1:1의 비율의 너비를 가지지 않는데,
flex-basis는 해당 요소의 width 값(width 값이 없으면 콘텐츠 크기)을 기본값으로 사용한다.
영역을 원하는 비율로 분할하려면 basis 값을 0으로 설정해서 기본으로 가진 크기를 0으로 만들어야 함.
flex-grow 속성의 비율은 flex-basis의 값이 0일 때 가장 정확.

Grid

flexbox와 비슷하지만 더 정교하게 설정 가능.

flexbox처럼 부모 요소에 display : grid; 라고 선언해서 사용할 수 있다.

부모 요소에 gird-template-rows,grid-template-columns 를 사용해 각 요소의 크기값을 입력함.

.parents{
	display : grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px;
}
/*열이 3개이고, 행이 2개인 상자 총 6개가 만들어짐.*/
/* 각 열/행에 이름을 붙여줄 수도 있음 대괄호 이용*/

repeat() 를 통해 여러개를 입력할 때 번거로움을 줄일 수도 있음.

.parents{
	width : 700px;
    display: grid;
    grid-template-columns: repeat(7,100px);
}
/*100px만큼의 열을 7개 만들 수 있다.*/

비율로 자식 요소 크기를 지정하고 싶다면, % 나 fr 단위를 사용.

.parents{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
/*자식요소가 3분의 1만큼 열을 차지할 것임*/

grid-column/row-start/end (grid-line : 자식요소들을 자르고 있는 선을 말함) 을 활용해서 자식 요소들을 더 다양하게 배치할 수도 있음.
row-gap, column-gap 을 부모 요소에 지정하면 그리드 라인의 두께를 지정하여, 자식 그리드 요소들 사이에 간격을 지정해줄 수 있음.
justift-content, align-content도 부모 요소에 사용해 flexbox와 동일하게 사용 가능.
minmax() 는 column,row의 최소/최대 크기를 지정해서 해당 크기보다 작거나 커지지 않도록 함.
auto-fill 은 column,row 개수를 부모요소에 맞게 자동적으로 조절.

반응형 웹을 만들 때, 이런 속성들을 유용하게 사용할 수 있겠다!

InnerHTML, textContent의 차이

요소.innerhtml은 이름 그대로 html을 반환.
요소의 텍스트를 가져오거나 쓰는 경우에 HTML로 분석할 필요가 없으므로 textContent의 성능이 더 좋으며, textContent는 XSS공격(크로스 사이트 스크립팅 - 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해서 사용자의 세션 가로채거나 웹사이트 변조, 악의적 콘텐츠 삽입, 피싱 공격 등 하는 것)의 위험이 없음.

brew 명령어 정리

brew update : brew 자체 업데이트
brew outdated : 업데이트에 필요한 파일 조회
brew update 프로그램 이름 : 프로그램 업그레이드(업데이트)
brew search 검색어 : 프로그램 검색
brew info 프로그램 이름 : 프로그램 정보 확인
brew install 프로그램 이름 : 프로그램 설치
brew uninstall 프로그램 이름 : 프로그램 삭제
brew list : 설치된 프로그램 보기