# grow

developerpyk

학습 목표 레이아웃을 위한 HTML을 만들 수 있다. > o display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다. > o > display: flex(속성명:속성값)를 설정하는 이유는 원하고자 하는 영역을 화면상에서 고정이 아니라 > 유연하게 정렬하거나 조절하기 위함이다. 즉, 고정되어 있는 위치를 유연하게 움직이기 위해서 사용한다. > flex의 속성 중 부모 요소에 적용해야 하는 속성이 있고, 자식 요소에 적용해야 하는 속성이 있다. > 이때, display: flex, flex-wrap, flex-direction, justify-content, align-items는 > 부모 요소에 적용해야 자식 요소에 작동한다. 따라서 주고 싶은 태그가 자식이 없는 경우에는 임의로 그 태그를 덮는 부모 태그를 만들어 그 부모 태그에 flex 속성을 적용한다. > 이때, flex-wrap, flex-direction, justif

nspro0318

안녕하세요 서울 꺼벙 천사입니다 이번에 소개할 사이트는 [ grow ] [ 그로우 ]라는 사이트입니다 https://www.grow.co.kr [ grow ]는 [ 자라다 ] [ 성장하다 ] [ 점점 더해지다 ]라는 뜻을 가지고 있는 단어로 그로우에서는 [ 성장이 시작되는 곳 ]이라는 것으로 홍보를 하고 있지만 서울 꺼벙 천사의 생각은 그로우를 통해 강의를 듣다 보면 실력이 [ 점점 더해지게 ] 될 수 있다고 생각됩니다 요즘 대부분의 온라인 강의 사이트들이 PC와 https://www.grow.co.kr 모바일에서 동시에 수강이 가능하도록 지원하고 있습니다 구글 플레이 스토어에서 [ 그로우 ]를 검색하고 https://play.google.com/store/apps/details?id=kr.co.grow.

yrats

🎉 flex CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. 아래 영상에서는 flex가 도입된 배경을 설명합니다. !youtube[BS9T0ZMqT58] flex의 기본 flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다. !youtube[SbqanXWXvmU] flex1basic.html grow & shrink 아

jackma914

flexbox란? flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식입니다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있습니다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. flexbox의 구성 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성됩니다. flexbox에서 사용하는 속성은 부모 요소인 flex container에 정의하는 속성과 자식 요소인 flex

cptkuk91

HTML 구성하기 대부분 좌에서 우, 위에서 아래로 진행합니다. CSS 화면 구분 시 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다. 수직분할 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다. 수평분할 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치합니다. Flexbox로 레이아웃 잡기 display:flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치됩니다. Flex 요소에 방향 지정하기 (flex-direction) flex-direction 또한 부모 박스 요소에 적용합니다. 자식 박스에 특별한 요소를 주지 않아도 부모 요소에 의해 자식 요소가 영향을 받습니다. row, column 이 존재합니다. 주의사항 display 속성에 flex는 부모 요소에 적용합니다.