오늘은 2일차 CSS의 box 특징 margin, border, padding 중
border 와 padding에 대해 공부해 보았다.
padding)
border의 안쪽 공간 = box의 경계 안쪽
padding: 20px;
-> padding을 20px 해라
border)
margin 과 padding의 경계선 = box의 경계
border: 2px solid black;
-> border을 2px의 검은색 실선으로 해라
FLEX )
-> flex는 레이아웃 배치 전용 기능으로 고안되었다.
기존 방식의 inline-block보다 훨씬 편하고 강력하다!!
<body>
<div>1</div>
<div id="sec">2</div>
<div>3</div>
</body>
이런 코드가 있다고 할 때,
flex선언은 부모 요소인 body에 하고, body는 flex container라고 한다.
자식 요소인 div는 flex item이라고 부르며.
"컨테이너가 flex영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것"
으로 정리할 수 있다.
flex 속성)
크게 두 가지로
- 컨테이너에 적용하는 속성
- 아이템에 적용하는 속성
으로 나뉜다.
컨테이너에 적용하는 속성)
display:flex;
-> 부모 요소에 이 코드를 적용해야 flex기능을 사용할 수 있다.
이 코드를 적용하면
flex 아이템들은 가로 방향으로 배치되고, 내용물의 width 만큼만 차지한다. 마치 inline 요소처럼 된다.
반면에 height는 컨테이너의 높이 만큼 늘어나게 된다.
flex-direction)
아이템들이 배치되는 축의 방향을 결정하는 속성이다.
기본 디폴트 값은 row로 설정되어 있기 때문에
justify-content: 속성값; -main axis
align-items: 속성값; -cross axis
이렇게 적용된다.
위와 같이 축이 적용이 돼서 아이템들의 배치를 바꿔준다.
이런식으로 보여지게 된다.
그렇다면 속성 값들을 알아보자.
flex-start)
-> 아이템들을 시작점으로 정렬한다.
flex-end)
-> 아이템들을 끝점으로 정렬한다.
center)
-> 아이템들을 가운데로 정렬한다.
space-between)
-> 아이템들의 between(사이)에 균일한 간격을 만들어 준다.
space-around)
-> 아이템들의 around(둘레)에 균일한 간격을 만들어 준다.
space-evenly)
-> 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.
flex기능에는 이것 외에도 뭐가 굉장히 많다....
HTML 속성과 마찬가지로 CSS의 flex속성도 굳이 외울필요 없이
필요하면 추가적으로 찾아서 익히자!!!
오늘은 이렇게 padding 과 border 그리고 flex까지 공부해 봤다...
솔직히 말하자면 아직 헷갈리는게 사실...
하지만! 계속 적용해가다 보면 분명히 잘 익힐 수 있을 것이다!!!
꺄하핳!! 화이티이잉~~
이미지 출처: https://studiomeal.com/archives/197
'웹 스터디 > CSS' 카테고리의 다른 글
| [CSS] 웹 프로젝트 9일차! (animation) (1) | 2021.07.14 |
|---|---|
| [CSS] 웹 프로그래밍 8일차! (position & pseuco selector) (0) | 2021.07.12 |
| [CSS] 웹 프로젝트 7일차! (flexbox froggy) (0) | 2021.07.12 |
| [CSS] 웹 프로젝트 5일차! (CSS의 기본 문법 & margin) (0) | 2021.07.10 |
