본문 바로가기

HTML, CSS

(30)
(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을 한꺼번에 같이 사용할 ..
(CSS) overflow가 작동하지 않을때 해결방법 overflow란? 부모 아래에 있는 자식이 부모를 넘어서게 하고 싶다고 했을 때 overflow를 사용하면 된다. overflow는 말 그대로 넘치는 콘텐츠에 대한 처리 방법이다.  이때 수평방향은 overflow-x, 수직방향은 overflow-y를 사용하면 된다.  overflow는 크게  4가지 속성값을 가진다. x와 y는 방향만 다를 뿐 속성은 같다. visible(기본값) : 경계를 벗어나는 컨텐츠를 자르지 않고 넘치게 둔다.hidden : 경계를 벗어나는 컨텐츠를 자른다.scroll : 스크롤바를 추가해 사용자가 스크롤할 수 있게 한다.auto : 스크롤바가 필요하면 스크롤바를 추가, 그렇지 않으면 추가하지 않는다.  overflow가 작동하지 않을 때 그런데 overflow-x와 overf..
(CSS) @keyframe과 animation 사용 방법 정리 이전에 transition 사용 방법에 대해서 포스팅을 했다. 하지만 transition만으로는 복잡한 애니메이션을 만들기 어렵다.  이때 animation과 @keyframes을 사용하면 더 다양하고 복잡한 애니메이션을 만들 수 있다.  (CSS) transition 사용 방법 정리css를 적용하다 보면 특정 요소가 변화하게 만들어야 할 때가 있다. 근데 그냥 변화시키면 상당히 부자연스럽다. 한 상태에서 다른 상태로 바로 한 번에 변화해 버리기 때문이다. 이때 변화를 자lemu-devblog.tistory.com  transition , animation, @keyframe 차이설명하기 앞서 transition,  animation, @keyframe의 차이를 확실하게 정리하고자 한다. (꽤나 헷갈리기..
(CSS) 단위 정리, px, em, rem, vh, vw, % css에는 크기를 지정하는 다양한 단위가 있다.  각각의 단위는 어떤 특징을 가지고 있는지, 또 특정 상황에서 어떤 단위를 사용하면 좋을지 정리하고자 한다.      단위 분류 1. px 먼저 단위를 상대적인지 절대적인지 나누어 생각해 볼 수 있다. px은 절대적인 단위다. 크기가 고정되어 있다는 뜻이다.  주로 정확한 크기나 위치를 나타내야 할 때 사용된다.  단점으로는 고정되어 있으므로, 반응형 웹을 만들기 어렵다는 것이다.  상대적인 단위들은 고정되어 있지 않고, 유동적으로 변화하기에 반응형 웹을 만들기 용이하다.     2. %%는 부모 요소를 기준으로 백분율로 크기를 나타낸다. 만약 부모 높이가 200px이라면, 유저가 높이를  50%로 주면 높이가 100px로 적용된다.    3.  vh, v..
(CSS) position : absolute로 요소 정중앙에 위치 시키기 특정 요소를 absolute로 위치시킬 때, 부모 요소 기준으로 정중앙에 위치시키고 싶을 때가 있다.  이때 top과 left를 각각 50%를 주면 정중앙에 올 것이라고 생각하기 쉽다.  하지만 실제 적용시켜 보면 정 중앙에 오지 않는다.   See the Pen position : absolute로 요소 정중앙에 위치 시키기(before) by 김다영 (@xnpzlttb-the-solid) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   이는 top과 left 등이 요소 왼쪽 상단 모서리를 기준으로 하기 때문이다.  따라서 위처럼  top과 left를 각각 50%를 주면 왼쪽 상단 모서리가 정중앙에 위치하..