38일차 - [CSS] display, flex box, icon
안녕하세요. pitang입니다.
CSS의 display, flexbox를 알아보도록 하겠습니다.
display
display의 속성은 요소의 표시 여부/방법을 지정합니다.
주로 4가지 속성 값이 쓰이는데, 기본값이 아래와 같다.
none - 보이지 않음
block - 블록 박스 형태
inline - 인라인 박스 형태
inline-block - block과 inline의 중간 형태
ex1)
block 속성 사용
ex2)
inline-block 속성 사용
ex3)
flexbox
flexbox는 위의 display(inline-block)의 코드를 더 적은 코드로 유연하게 적는 방법이다.
구글에 css flexbox를 검색해 아래의 사이트에서 flexbox에 관해 더 알아보고 찾아볼 수 있다.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
ex1)
display의 속성을 flex로 가지면 가로로 나열해준다.
flex container
display 속성을 flex로 둔 요소는 flex container이다.
flex container의 자식 요소들은 flex item이고, flex itmes는 flex container의 main축 기준으로 배치된다.
(기본 main축은 가로이다. main축의 직각인 것은 cross축이다.)
justify-content 속성은 메인 축(기본 가로축)을 기준으로 아이템을 배치하는 방법을 정의한다.
align-items 속성은 메인 축(cross 축)을 기준으로 아이템을 배치하는 방법을 정의한다.
전부 다 기억할 필요 없이 필요할 때마다 검색하는 것이 가장 효율적인 방법이다.
ex1)
ex2) justyfy-content
ex3)
ex4) align-items
ex5)
display만을 사용하면 가운데 배치하는 것이 복잡해 배우지도 않았지만,
flexbox를 이용하면 간단하게 가운데 배치를 할 수 있다.
flex item
예제를 살펴보며 flex item 속성 값에 대해 알아보겠다.
ex1)
flex-grow - flex 아이템이 남은 공간을 얼마나 차지할 것인지 정의
ex2)
ex3)
flex-basis - flexitem들이 공간을 어떻게 차지해야 하는지 세부적인 설정 가능
ex4)
flex - flex-grow, flex-shrink, flex-basis의 결합된 속성을 정의한다.
icon
아이콘을 표기하는 방법은 fontawesome을 검색해 아래와 같은 사이트에 들어간다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
사이트의 메뉴에서 icon을 클릭해 들어가면 회색으로 되어있는 것은 pro로 유료 아이콘이고 진한 색은 무료로 사용할 수 있다.
사용하고 싶은 아이콘의 요소를 복사하고 예제와 같이 붙여 넣으면 그 아이콘의 모양이 사용되는 것을 볼 수 있다.
또한, start for free를 클릭해서 다운로드를 하고 압축을 푼 파일들을 icon파일을 만들어 붙여 넣어주어야 한다.
그다음, Download를 하러 들어가면 아래의 이런 텍스트가 보이는데 복사하여
/your-path-to-fontawesome../icon으로 변경해주고 사용할 수 있다.
ex1)
감사합니다.
*m1 맥북을 사용 중입니다.*