75

Flexbox

heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog flex에 대해 매우 자세히 나와있는 곳이다. 우선 container에는 display, flex-flow, justify-content 속성을 사용할 수 있다. 또한 그 container 안의 박스들에는 order, flex, align-self 속성을 사용할 수 있다. container display container..

길/CSS 2021.01.24

line-height

기본적으로 부모 값을 상속한다. line-height은 px을 이용하여 고정할 수도 있고 rem/em을 이용하여 상속 받아 사용할 수 있다. 혹은 그냥 숫자만 입력할 수 있다. 숫자를 입력하면 폰트 사이즈를 기준으로 입력된 숫자를 배율로 적용하여 행간이 정해지는 것으로 보인다. 따라서 숫자를 이용하여 정하는 것이 다양한 폰트 사이즈에 따른 상대적인 행간을 적용하기 좋은 것으로 보인다. rem이나 em을 사용한다면 루트나 부모에서의 행간 수치에 대해 배수로 적용되기 때문에, 원하는 태그 안에 있는 폰트가 해당 수치보다 크면 글자가 겹쳐지게 된다.

길/CSS 2021.01.24

box model

block vs. inline, inline-block block inline-block inline 줄바꿈 여부 줄바꿈 가능 줄바꿈 불가 줄바꿈 불가 기본적인 너비 100% 글자가 차지하는 만큼 글자가 차지하는 만큼 width, height 부여 가능 여부 가능 가능 불가능 과 같은 inline 엘리먼트에 display : inline-block 속성을 주면, 이 차지하는 고유의 크기를 지정할 수 있게 된다. border border는 border에 특성을 부여한다. border는 단축 속성으로서 아래의 하위 속성을 갖는다. border-color border-style border-width developer.mozilla.org/ko/docs/Web/CSS/border border - CSS: Ca..

길/CSS 2021.01.21

background 속성

background 속성은 기본적으로 배경 스타일을 지정하는 것이다. background는 하위 속성을 갖고있다. 속성은 다음과 같다. background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size 따라서 background에 어떤 속성을 지정해주면 알맞은 하위 속성에 대응되는 것으로 보인다. (순서가 상관 있는지는 추후 사용하면서 확인해보기) 하위 속성을 개별적으로 선언 할 수 있다.

길/CSS 2021.01.21