반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발하는 동그리

[HTML/CSS] HTML , CSS 는 무엇인가!? (3편) - flexbox! 본문

IT 정보/기타 정보

[HTML/CSS] HTML , CSS 는 무엇인가!? (3편) - flexbox!

개발하는 동그리 2022. 4. 28. 11:43
반응형

Container (사용할 수 있는 속성 값)

  • display : flex;
  • flex-direction : (default)row, row-reverse, column, column-reverse
  • frex-wrap : (default)nowrap, wrap (reverse 사용가능) ---> 화면에 꽉 차면 다음줄로 넘기는 여부
  • flex-flow : column wrap;
  • justify-content : flex-start, flex-end, flex-center, space-around, space-evenly, space-between

 

Item (지정할 수 있는 속성 값)

  • order : 1;  --> item의 순서 변경 가능
  • flex-grow : (default) 0; 
  • flex-shrink : (default) 0;
  • flex-basis : (defalt) auto; , 할당 % 사용가능
  • flex : (grow) (shrink) (basis); --> 3가지를 한번에 입력할 수 있음

Frontend, CSS, Flex 관련 참고 영상 첨부 (매우 이해가 잘 됨)

https://youtu.be/7neASrWEFEM

 

1편이 궁금하시다면 ~

https://choonsik-lab.tistory.com/entry/HTML-HighperText-Markup-language

 

HTML , CSS 는 무엇인가!? (1편) - HTML

html 기본 구조 <!DOCTYPE html> 메인 제목 내용 HTML CSS Javascript 주요 기능 web site 뼈대 구성 (Structure) html 스타일 구성  기능 구현 (상호 작용) HTML은 위에 보이는 코드처럼 Structure를 구성하는..

choonsik-lab.tistory.com

 

 

2편이 궁금하시다면 ~

https://choonsik-lab.tistory.com/entry/HTML-CSS-%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-2%ED%8E%B8?category=935771

 

HTML , CSS 는 무엇인가!? (2편) - CSS

CSS 는 무엇인가? CSS (Cascading Style Sheets)의 약자로 문서에 디자인을 입힐 때 사용하는 스타일 시트 언어다. CSS 가 필요한 이유? HTML에서 디자인을 입히는 것보다 CSS를 따로 구현해서 관리한다는 점

choonsik-lab.tistory.com

 

반응형
저작자표시 비영리 변경금지

'IT 정보 > 기타 정보' 카테고리의 다른 글

리눅스 [Linux]  (0) 2022.05.02
[HTML/CSS] 레이아웃 : 화면을 나누는 방법 ( HTML구성하기 )  (6) 2022.04.28
[HTML/CSS] HTML , CSS 는 무엇인가!? (2편) - CSS  (4) 2022.04.27
[HTML/CSS] HTML , CSS 는 무엇인가!? (1편) - HTML  (11) 2022.04.27
Plugins 설치하는 방법  (4) 2022.04.26
'IT 정보/기타 정보' Related Articles more