메뉴 보이기

그리드

flex 개념 알기

2018.08.25 조회 54 댓글 0 추천 0

(번역) CSS flex box 3분만에 배우기

https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/

> flex 의 기본 개념에 대해서 가장 간단하게 설명한 글입니다.


CSS Flexbox

https://www.w3schools.com/css/css3_flexbox.asp

> w3schools.com의 글은 일반적으로 아주 자세하거나 아주 완벽하지는 않아도 예제와 기본 설명은 쉽게 설명하기 때문에 이해하기 쉬운 편입니다.

다양한 예제와 다양한 옵션의 미리보기를 확인할 수 있습니다. 


CSS Flex 속성

http://webdir.tistory.com/349

> 한글로 좀 자세히 적어준 블로그입니다.

잘 이해가 가질 않는다면 아래 생활코딩 동영상 강의를 참조해봅시다.


생활코딩 - flex 편

https://opentutorials.org/course/2418/13526


flex

https://css-tricks.com/almanac/properties/f/flex/


A Complete Guide to Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/


html/css flex, flexbox 반응형 웹을 위한 css 레이아웃 속성 정리

http://thrillfighter.tistory.com/489

> 고맙게도 한글 블로그. 좀더 설명이 쉽게 되어있습니다.


TEST CSS FLEXBOX RULES

http://flexbox.help

생각보다 꽤 많은 flex 옵션을 버튼 하나로 그 차이점을 확인할 수 있습니다.



http://naradesign.net/wp/2017/05/02/2467/

http://naradesign.net/wp/2017/04/24/2440/

> 정찬명님의 flex 설명


그리드 레이아웃과 다른 레이아웃 방법과의 관계

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계


1 - Flexbox 이해: 당신이 알아야 할 모든 것 (Understanding Flexbox: Everything you need to know)

https://www.vobour.com/1-flexbox-이해-당신이-알아야-할-모든-것-understa


생활코딩 flex

https://opentutorials.org/course/2418/13526


수직 중앙 정렬

https://hyunseob.github.io/solved-by-flexbox-kr/demos/vertical-centering/


이 글이 마음에 드셨나요?지인과 공유해보세요.

이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

댓글0
[css] 안드로이드 모바일 링크 클릭 선택시 하이라이트 파란색배경음영 지우기
.noSelect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 참참조 : https://stackoverflow.com/ques...
8 일 전 조회 3 댓글 0 추천 0
flex 설명한 글 모음.
https://www.vobour.com/2-flexbox-이해-당신이-알아야-할-모든-것-understa https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 https://developer.mozilla.org/ko/docs/W...
2019.09.09 조회 13 댓글 0 추천 0
[SVG] svg 파일을 id값으로 클래스화해서 사용하기
svg 파일을 id값으로 클래스화해서 사용하기 <svg><symbol id="ID명"></symbol></svg> 이렇게 심볼로 만든 다음에 <svg><usr xlink:href="#ID명"></use></svg> 이런 식으로 사용 가능하네요. <svg class="클래스명">...
2019.01.07 조회 29 댓글 0 추천 0 출처 https://codepen.io/marcobiedermann/pen/kjwzC
[SCSS] [SCSS] SCSS문법 정리 네스팅 변수 @import @mixin @include @for @each @while
SCSS = SASS + CSS SASS 컴파일러로 SCSS파일이 CSS파일이 됨 - SCSS는 CSS를 보다 효율적으로 보다 편리하게 사용하기 위해 만들어진 언어다. SASS와 CSS의 중간쯤이라고 볼 수 있지만 SASS를 몰라도 SCSS는 할 수 ...
2018.09.01 조회 107 댓글 0 추천 0 출처 https://blog.naver.com/kira4195/221262057145
[그리드] flex 개념 알기
(번역) CSS flex box 3분만에 배우기 https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/ > flex 의 기본 개념에 대해서 가장 간단하게 설명한 글입니다. CSS Flexbox https://www.w3scho...
2018.08.25 조회 54 댓글 0 추천 0
[css] parallax only css
css <style> .parallax { /* The image used */ /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-...
2018.08.14 조회 28 댓글 0 추천 0 출처 https://www.w3schools.com/howto/howto_css_parallax.asp
[css] 마진 상쇄 현상 해결팁
마진 상쇄 현상을 해결하는 방법으로 여러 가지 방법이 있겠습니다만, 개인적으로는 display:inline-block;width:100%; 를 이용합니다.
2018.07.30 조회 92 댓글 0 추천 0
[SVG] CSS HEXAGON
https://codepen.io/eond/pen/xWQgGB ">
2018.04.19 조회 21 댓글 0 추천 0
[css] CSS animation infinite
@keyframesBefore applying animations to HTML elements, you need to write animations using keyframes. Basically, keyframes are each intermediate step in an animation. They are defined using percentages:...
2018.04.13 조회 12 댓글 0 추천 0 출처 https://marksheet.io/css-animations.html
[css] CSS로 Center 정렬
/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; ju...
2018.01.13 조회 19 댓글 0 추천 0
[css] css 선택자 | CSS [attribute*=value] Selector
CSS [attribute*=value] Selectorhttps://www.w3schools.com/cssref/sel_attr_contain.asp example https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain div[class*="test"] { background: #f...
2018.01.02 조회 16 댓글 0 추천 0
[CSS아이콘] social Icon with XE icon
See the Pen socialIcon with XEicon by eond (@eond) on CodePen.
2017.12.22 조회 61 댓글 0 추천 0 출처 https://codepen.io/eond/pen/GyjWBz
[css] ul 컬럼 다단
ul > li 로 꾸몄는데 1 2 3 4 5 6 7 8 9 이렇게 나오는 스타일을 1 4 7 2 5 8 3 6 9 이런 형식으로 나오게 하는 방법입니다. #col { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
2017.12.20 조회 64 댓글 0 추천 0 출처 https://developer.mozilla.org/ko/docs/CSS3_Columns
[input] input 속성 중 placeholder 의 색 바꾸기
::-webkit-input-placeholder { color: #CCC; } /* Firefox 4-18 */ :-moz-placeholder { color: #CCC; } /* Firefox 19+ */ ::-moz-placeholder { color: #CCC; } /* IE10+ */ :-ms-input-placeholder { color: #CCC...
2017.09.25 조회 54 댓글 0 추천 0 출처 https://nizbridge.github.io/all/html-css...older.html
[CSS아이콘] Animated dots icon
[js] $(document).ready(function(){ $('#menu-trigger').click(function(){ $(this).toggleClass('active'); }); }); 출처 : http://codepen.io/elliottmangham/pen/RoVwRm
2017.03.30 조회 49 댓글 0 추천 0 출처 http://codepen.io/elliottmangham/pen/RoVwRm
[css] [CSS] 배경 이미지에만 흐림효과(Blur) 적용하기 :: Life is an egg.
참조 http://codepen.io/akademy/pen/FlkzB http://nubiz.tistory.com/443
2017.03.27 조회 816 댓글 0 추천 0 출처 http://codepen.io/akademy/pen/FlkzB