본문 바로가기

Front-end/CSS

Flexbox를 이용한 레이아웃 방법을 알아보자(2)
2022. 6. 12. 지난번에 이어 이번에는 Flexbox의 속성 중 내부아이템 속성을 알아보자 item에 적용되는 속성값은 grow, shrink, basis, align-self, order가 있다. flex-grow는 아이템들이 컨테이너의 전체 크기에 맞게 스스로의 사이즈를 늘리려는 성질이다. flex-grow의 기본값은 0이며 위 문서를 보면 원래의 크기보다 남은 공간이 더 넓어지자 해당 공간을 item1과 item2가 각각 2:1의 비율로 나눠 가져 사이즈가 커진것을 알 수 있다. flex-shrink는 grow의 반대이다. 원래의 아이템 사이즈보다 컨테이너가 줄어들었을때 설정한 비율만큼 더 줄어 드는 것이다. flex-shrink의 설정값이 클 수록 더 많은 비율의 사이즈가 줄어드는 것을 볼 수 있다. flex-b..
Flexbox를 이용한 레이아웃 방법을 알아보자
2022. 6. 12. Flexbox가 나오기 전까지만 하더라도 우리들의 레이아웃은 position과 float, table 등이 담당하였다. 그중에서도 요소와 요소의 배치를 할 때 float를 많이 사용하였는데, 사실 float는 요소와 요소가 아닌 이미지와 글을 함께 배치하기 위하여 만들어졌다. Flexbox가 나오면서 float는 온전히 자신의 역할을 수행 할 수 있게 되었다. 그렇다면 Flexbox가 어떻게 생겼는지 살펴보자. Flexbox는 컨테이너에 적용되는 속성과 아이템에 적용되는 속성이 있는데, 먼저 컨테이너 관련 속성을 살펴보면, display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content 가 있다. 사용법은 ..
CSS 레이아웃을 알아보자
2022. 6. 11. HTML을 작성하고 CSS로 스타일을 입힐때 가장 중요한것은 뭐라고 생각하는가?? 폰트나 색상, 배경 이러한 요소들도 물론 중요하지만, 내가 작성한 요소들이 내가 원하는 위치에 있도록 하는것이 제일 중요하다. 이러한 요소들을 원하는 위치로 이동시키기 위해서는 CSS 속성중 display 와 position 두가지 속성이 중요하다. 두가지 속성을 간단하게 이야기하자면, display는 요소의 성질을 정해준다. 즉, div와 같은 block의 성질을 지닌 요소들을 inline이나 inline-block등으로 성질변환을 시킬 수 있다. 반대로 inline성질을 가진 요소들도 다른 성질로 변환 시킬 수 있다. 해당 자료를 보면 display 속성을 이용하여 block요소인 div 와 inline요소인 span의..
CSS패딩과 마진
2022. 6. 11. HTML과 CSS를 작성하다 보면 요소 주변에 여분의 자리가 있음에도 다른 요소들과 일정 간격이 벌어진 것을 볼 수 있다. 이는 HTML의 블록요소로 인하여 생긴 공백일 수도 있고, 그렇지 않다면 CSS의 패딩과 마진이 바로 이 간격의 원인이다. 그럼 패딩과 마진은 무엇일까?? 우선 HTML과 CSS를 통해 작성된 요소의 구조는 제일 안쪽부터 콘텐츠 영역 > 패딩 영역 > 볼더 영역 > 마진 영역으로 이루어져 있으며 아래 사진과 같다. 즉, 패딩은 콘텐츠 영역과 볼더라인 사이에 있는 여백을 의미한다. 아래 작성한 두 문서를 비교해보면 쉽게 알수있다. 볼더 라인과 div내부 텍스트를 기준으로 사이에 간격이 벌어지는 것을 볼 수 있다. 내가 좋아하는 MDN사이트(https://developer.mozilla..
CSS기초 이론과 CSS선택자
2022. 6. 11. CSS(Cascading Style Sheets)는 무엇일까? 이름 그대로 해석하면 계단식의 스타일 시트, 스타일시트는 알겠는데 그럼 계단식은 무엇을 의미하는가?? 쉽게 이야기해보면 계단 위쪽에서 아래쪽으로 스타일 시트라는 폭포를 뿌리는 것이다 예를 들어 HTML 태그를 작성하면 브라우저의 기본 스타일이 적용된다. 해당 부분이 계단식의 젤 상위에 위치한다고 보면 된다. 우리가 별도로 지정한 스타일시트가 없다면 브라우저의 스타일은 계단을 타고 내려와 그대로 보이게 된다. 중간에 CSS로 지정한 스타일이 있다면 계단을 내려오면서 우리가 지정한 스타일을 보이게 되는 것이다. 이후 브라우저에서 사용자가 새롭게 조작한 스타일이 있다면 스타일은 사용자가 조작한 스타일로 보일 것이다. 즉, Cascading Styl..

티스토리툴바