본문 바로가기

분류 전체보기13

매개변수를 사용하는 이유 1 함수 매개변수 사용하는 이유 아래 두 예제는 같은 결과를 도출합니다. 매개변수를 사용X 매개변수 사용 2 함수 매개변수 적용하기 기본 형태 변수 사용 변수 값은 다시 넣을 수 있다. 같은 변수명은 사용 할 수 없다. let no = 1; let no = 2; no라는 변수에 값이 1,2가 들어가는 것이 아니다. 결론적으로 no라는 변수는 2라는 값만 가진다. 변수 값은 다시 넣을 수 있다. 같은 변수명은 사용 할 수 없다. let no_1 = 1; let no_2 = 2; 변수명을 다르게 선언 해야한다. 결론은 함수 매개변수를 사용하지 않을 경우 숫자만 다르고, 같은 코드가 반복된다해도, 반복되는 코드를 생략할 수 없다. 매개변수 적용 인자 갯수 = 매개변수 갯수 인자가 매개변수와 연동된다. 변수와 .. 2022. 11. 6.
웹2 flex-grow 1 flex-grow란? 남는공간을 전부 가져가는 속성 중요한것은 **남는공간 예제1 flex-grow 기본 예제 풀이 flex-item에 width를 적용하지 않았다. 대신 flex-grow라는 속성을 사용했는데 각 아이템 4개가 flex-container 400px을 정확하게 4등분 후 나눠 가졌다. flex-item 넓이 → (width 98px + border : 2px) 총 100px flex-container 넓이 → 400px 이미지 속 flex-item 개당 수치 → 98px(**border 제외) 예제 예제2 flex-grow margin 예제 풀이 margin, pdding 같은 여백 수치 제외 후 나눠 가진다. 예제 예제3 flex-grow 다른 요소로 인한 여백 예제 풀이 margi.. 2022. 11. 5.
웹2 flex-direction 1 flex-direction이란? flex-item을 가로로 정렬할 것인지, 세로로 정렬할 것이지 결정하는 속성이다. 기본 값 flex-direction: row; 2 flex-direction 종류 종류 flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; 새로운 개념 row(가로)를 colume(세로)로 바꾸면 가로 정렬할때 align-items을 사용해야한다. row(가로)를 colume(세로)로 바꾸면 세로 정렬할때 justify-content를 사용해야한다. column-reverse로 바꾸면 start가 end 역할을 하고, end가 strat 역할을 한다... 2022. 11. 5.
햇갈리는 줄바꿈 최종정리 1 부모 엘리먼트가 고정px 일때 자식들은 어떻게 될까? inline-block ------ px ------ % flex ------ px ------ % 2 부모 엘리먼트가 % 일때 자식들은 어떻게 될까? inline-block ------ px ------ % flex ------ px ------ % 3 정리 부모 엘리먼트가 고정px 일때 전부 잘린다. 부모 엘리먼트가 % 일때 inline-block px → 줄바꿈 % → 찌그러짐 flex px → 찌그러짐 % → 찌그러짐 2022. 11. 5.