본문 바로가기

분류 전체보기

 (64)
(CSS) grid 4탄 : grid-auto-rows, grid-auto-columns, grid-auto-flow 사용법, 동적 그리드 만들기 grid를 만들 때, 초기에 설정한 그리드 아이템 외에 추가로 아이템들을 동적으로 추가하고 싶을 수 있다. 이때 grid-auto-rows와 grid-auto-columns, grid-auto-flow를 사용하면 사전에 그리드 아이템으로 지정하지 않은 아이템들을 그리드에 배치할 수 있다.   사용 방법grid-auto-rows : 지정되지 않은 그리드 아이템의 그리드 열(column)의 크기 지정grid-auto-columns : 지정되지 않은 그리드 아이템의 그리드 행(row)의 크기 지정grid-auto-rows: 50px; /*세로(row) 크기 지정*/grid-auto-columns: 50px; /*가로(column) 크기 지정*/  grid-auto-flow : 지정되지 않은 그리드 아이템을 ..
(CSS) grid 3탄 : grid template 사용법 지난 포스팅에는 grid line, 그리고 grid 레이아웃을 변경시키는 방법에 대해 다루었다. 이번 포스팅에서는 grid template을 활용해 직관적으로 레이아웃을 만드는 방법에 대해 다루어보려고 한다.   grid-templete을 사용하는 이유 만약 아래와 같은 레이아웃을 만들고 싶다고 할 때, 2탄에서 설명한 grid-column, grid-row를 사용해 구성하려면 복잡하고 헷갈린다. 이때 grid templete을 사용하면 훨씬 더 직관적으로, 그리고 편리하게 레이아웃을 구성할 수 있다. 정리하자면 기존 grid에서 한 두 칸 정도 변형이 필요한 경우에는 grid-column, grid-row을 활용하고, 좀 더 복잡한 레이아웃에는 grid-templete을 사용하는 게 좋다.  gr..
(CSS) grid 2탄 : grid line, span, grid-column, grid-row 지난번 포스팅에서는 grid를 만드는 방법에 대해 다루었다. gird를 만들고 나서 특정 칸 두 개를 합치는 등, 레이아웃을 자유자재로 변화시키고 싶을 수 있다. 이럴 때 grid-column이나 grid-row를 사용하면 된다.    grid line 번호grid-column과 grid-row를 사용하기 전, grid line 번호에 대해 먼저 알아야 한다.  여기 5x5 grid가 있다고 하면, 그리드를 이루는 모든 라인들이 번호를 갖게 되는데, 왼쪽 상단부터 1번, 그다음 라인은 2번 이런 식으로 번호가 매겨진다. 음수도 사용 가능하며, 주로 -1번으로 가장 끝에 있는 라인을 부른다.    span grid item이 오직 하나의 트랙(column이나 row)을 사용한다면, span 속성을 사용할 ..
(CSS) grid 1탄 : grid 만들기, grid-template, gap css에서 가장 중요한 개념을 꼽으라고 하면 flex와 grid일 것이다. 이전에 flex에 대해 포스팅으로 다루었으므로 이번에는 grid를 다뤄보려고 한다. flex에는 main-axis, cross-axis 등등 헷갈리는 개념이 많고, 자유롭게 레이아웃을 설정하는 게 어렵지만, grid를 사용하면, 좀 더 쉽고 자유롭게 레이아웃을 설정할 수 있다.    grid 기본 사용법grid는 표와 비슷하게 columns(행), rows(열)로 구성된다. display : grid;해당 레이아웃을 grid로 설정한다. 레이아웃의 자식들은 grid-item이 된다.grid-template-columns: 200px 100px 100px; 해당 레이아웃의 열(column)이 몇 개이고 각각 크기가 얼마인지 설정한다..
(CSS) flexbox 3탄 : flex-grow, flex-shrink, flex-basis, flex 사용법 flex box 포스팅, 마지막 3탄이다. 이번 포스팅에서는 flex-grow, flex-shrink, flex-basis 사용법에 대해 다룬다. flexbox 관련 이전 포스팅 링크는 하단에 추가하였다.  (CSS) flexbox 1탄 : justify-content, align-items, flex-direction, flex-wrap 사용법css로 태그 크기를 이리저리 조정하다 보면 불편한 점을 금방 발견하게 된다. 컴퓨터를 기준으로 height와 weight를 설정해서 디자인하면, 모바일에서 볼 때 디자인이 이상해지는 경우가 있다.  따lemu-devblog.tistory.com (CSS) flexbox 2탄 : flex-flow, align-content, order 사용법이전에 flex box..
(CSS) flexbox 2탄 : flex-flow, align-content, order 사용법 이전에 flex box에 대해 다루었다.  물론 flex box를 사용할 때 가장 많이 사용되는 것이 justify-content와 align-item이지만, 이 이외에도 사용되는 것들을 추가로 설명하고자 한다.   (CSS) flexbox 1탄 : justify-content, align-items, flex-direction, flex-wrap 사용법css로 태그 크기를 이리저리 조정하다 보면 불편한 점을 금방 발견하게 된다. 컴퓨터를 기준으로 height와 weight를 설정해서 디자인하면, 모바일에서 볼 때 디자인이 이상해지는 경우가 있다.  따lemu-devblog.tistory.com   flex-flowflex-flow는 flex-direction과 flex-wrap을 한꺼번에 같이 사용할 ..
(Javascript) hoisting(호이스팅)이란? 발생 배경, 종류, TDZ 호이스팅의 발생 배경 자바스크립트는 인터프리터 언어이다.  컨파일러로 한 번에 기계어로 변환하는 컴파일 언어와 달리 한 줄씩 코드를 읽고 실행한다는 것이다. 하지만 자바스크립트가 인터프리터 언어라고 해서 아무 준비없이 코드를 바로 실행하는 건 아니다. 컴파일 언어가 컴파일 과정을 거치듯 인터프리터 언어도 인터프리테이션 단계를 거친다. 이 인터프리테이션 과정 중, 변수나 함수 선언을 찾아 메모리에 할당하는 과정이 있는데 이를 변수 & 함수 바인딩이라고 한다.   이렇게 코드가 실행되기 전에 변수나 함수 선언을 미리 할당하는 과정이 있기에  실제로 변수나 함수 선언이 되기 이전에 그 변수나 함수에 접근이 가능한데, 이때 변수와 함수 선언이 코드 가장 위로 끌어올려지는 것 같이 느껴지는 현상을 호이스팅(hoi..
(CSS) overflow가 작동하지 않을때 해결방법 overflow란? 부모 아래에 있는 자식이 부모를 넘어서게 하고 싶다고 했을 때 overflow를 사용하면 된다. overflow는 말 그대로 넘치는 콘텐츠에 대한 처리 방법이다.  이때 수평방향은 overflow-x, 수직방향은 overflow-y를 사용하면 된다.  overflow는 크게  4가지 속성값을 가진다. x와 y는 방향만 다를 뿐 속성은 같다. visible(기본값) : 경계를 벗어나는 컨텐츠를 자르지 않고 넘치게 둔다.hidden : 경계를 벗어나는 컨텐츠를 자른다.scroll : 스크롤바를 추가해 사용자가 스크롤할 수 있게 한다.auto : 스크롤바가 필요하면 스크롤바를 추가, 그렇지 않으면 추가하지 않는다.  overflow가 작동하지 않을 때 그런데 overflow-x와 overf..

티스토리툴바