본문 바로가기

728x90
반응형

CSS

(10)
[CSS] Grid layout - 1. 용어 정리( grid line, grid cell, grid track, grid area 등) Grid layout css grid layout 은 수직, 수평 양방향을 모두 사용하여 요소를 배치하는 2차원 레이아웃 시스템이다. 수평, 수직 중 하나의 방향만 사용하는 1차원 레이아웃인 flexbox 와 제일 큰 차이점이다. flexbox 도 float, position, inline-block 에 비해 매우 뛰어난 레이아웃 시스템이고 많이 사용되고 있지만, 보다 더 복잡한 레이아웃을 정교하게 구현할 때는 grid를 사용한다. Grid의 개념을 공부하기 전에 용어를 이해하는 것이 중요하다. 1. Grid Container display: grid; 가 정의 된 element 를 말한다. 모든 grid item들의 직계 부모요소가 된다. 2. Grid Item grid container 의 직계 자식..
[CSS] Position의 속성(static, relative, absolute, fixed, sticky) position html 문서에서 각 요소를 배치하는 방법을 설정하는 속성 어떤 방식으로 배치할 것이지를 결정하고, top, right, vottom, left 의 값으로 위치를 설정한다. default 값은 static position: static | relative | absolute | fixed | sticky ; 1. position: static; html 문서 상에서 html 이 작성된 순서 그대로 원래 있어야 할 자기 자리에 위치한다. 그래서 top, right, bottom, left, z-index 의 값을 주어도 무시된다. 2. position: relative; 원래 있던 자기 자리에서 그 자리를 기준으로 top, right, bottom, left의 값에 따라 배치된다. 다른 요..
[CSS] display 속성 정리(block, inline, inline-block 등) display 웹사이트를 만들 때 중요한 것 중 하나가 박스 또는 콘텐츠를 원하는 사이즈로, 원하는 자리에 잘 배치하는 것이다. 그러기 위해서는 display, position에 대해 정확히 이해하고 있어야 한다. 우선 display 속성에 대해 알아보자. display는 요소를 block level 과 inline level 중 어떤 성격으로 배치할지를 설정하는 속성이다. display: none | inline | block | inline-block; 1. display: inline; content 만큼의 크기를 갖는다. 요소가 줄 바꿈 없이 다른 요소와 같은 줄에 배치된다. width 와 hekght, margin-top, margin-bottom, float 설정을 할 수 없다. 2. disp..
[CSS] flexbox의 모든 것을 알아보자 Flexbox flexbox는 공간을 최대한 효과적으로 사용할 수 있도록 콘텐츠 사이의 공간을 배분하고 정렬하는 강력한 기능을 제공한다. float과 position으로 구현하기 어려운 형태의 레이아웃도 손쉽게 구현할 수 있게 해준다. flexbox는 수평, 수직 중 하나의 방향으로만 레이아웃을 다룰 수 있는 1차원 레이아웃이다. 수평, 수직을 동시에 다룰 수 있는 2차원 레이아웃 Grid Layout과의 제일 큰 차이점이다. Flexbox의 구성 flexbox는 container (parent element) 와 item (children element) 으로 구성된다. 하나의 요소에 display: flex; 를 적용하면 display: flex; 가 설정된 부모 요소를 Flex container 라..
[CSS] CSS layout 레이아웃 종류와 기본설명 CSS layout CSS layout 기술은 웹페이지에 포함된 block level element들을 모아 원하는 위치에 배치할 수 있게 해준다. Normal flow Display 속성(flexbox, Grid Layout) Floats Positioning Multi-column layout Table layout normal flow normal flow는 페이지 레이아웃에 특정한 css 설정을 적용하지 않을 경우 브라우저가 기본값으로 html페이지를 배치하는 방법이다. 여기서 기본값이란 block level element는 부모요소의 너비 100%, content의 최대 높이가 되고, 항상 새로운 줄에서 시작한다. inline level element는 content의 최대 너비와 높이가 되고,..
[CSS] border 속성 정리(border-width, border-style, border-color) border 관련 CSS 속성 border는 아래의 하위 속성을 포함한다. - border-width - border-style - border-color border-width border-width 속성은 border의 두께를 설정 default 값은 medium /* 키워드 값 */ border-width: thin | medium | thick; /* 값 */ border-width: 1px; /* top and bottom | left and right */ border-width: 1px 5px; /* top | left and right | bottom */ border-width: 1px 3px 5px; /* top | right | bottom | left */ border-width: ..
[CSS] Box Model (CSS 박스 모델) Box Model document의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 CSS Box Model을 참고로 한다. 모든 HTML요소는 box로 이루어져 있으며, CSS에서 이것으로 요소의 크기와 위치 등을 결정할 수 있다. 이것을 CSS Box Model(CSS 박스 모델)이라고 한다. 박스 모델(box madel)은 요소와 요소 간의 레이아웃을 짜거나 크기와 위치 등을 정할 때 중요하게 작용하며, content, padding, border, margin으로 이루어져 있다. content 텍스트나 이미지 등의 실질적인 콘텐츠가 표시되는 영역이다. box-sizing 속성의 값이 기본값인 content-box이며 요소가 블록 레벨 요소인 경우 크기를 width와 height와 같은 속성을 사용하..
[CSS] background 속성 정리(color, image, position, repeat 등) background 관련 CSS 속성 background는 아래의 하위 속성을 포함한다. - background-color - background-image - background-repeat - background-position - background-size - background-origin - background-clip - background-attachment background-color background-color 속성은 요소의 배경 색을 지정할 때 사용 default 값은 transparent background-color: color name | HEX value | rgb() | rgba(); background-color: indigo; /* indigo*/ background-..

728x90
반응형