개발일지/HTML11 CSS Flex 컨테이너 적용 총정리 Flex(플랙스) Flex(플렉스)는 Flexible Box, Flexbox라고 부르기도 한다 Flex는 레이아웃 배치 전용 기능으로 고안되었습니다. 그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다 Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같다 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 된다. Flex 속성 Flex의.. 개발일지/HTML 2022. 11. 9. flex, nav, ul, article, footer 활용하기 Cities London Paris Korea London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. my company 개발일지/HTML 2022. 11. 9. flex활용한 색구분하기 개발일지/HTML 2022. 11. 9. 수직중앙 수평중앙 중첩하기 수직중앙 수평중앙 중첩하기 개발일지/HTML 2022. 11. 9. 줄바꿈 배치 flex-warp flex-wrap: nowrap flex-wrap: wrap flex-wrap: wrap-reverse 개발일지/HTML 2022. 11. 7. 정방향 세로배치, 역방향 세로배치 - flex-direction DOCTYPE html> Document /* 부모 속성에 사용하는 flexbox 속성 : flex-direction: column | column-reverse */ .parent { border: 5px solid green; height: 500px; display: flex; /* column : 정방향 배치 세로배치 */ flex-direction: column; /* column-reverse : 역방향 배치 세로배치 */ /* flex-direction: column-reverse; */ } .parent div { width: 300px; height: 200px; color: #ffffff; text-align: center; font-size: 30px; margin: 5px; /* b.. 개발일지/HTML 2022. 11. 7. 정방향 가로배치, 역방향 가로배치 - flex-direction DOCTYPE html> Document /* 부모 속성에 사용하는 flexbox 속성 : flex-direction: row | row-reverse */ .parent { border: 5px solid green; height: 500px; display: flex; flex-direction: row; /* row : 정방향 배치 가로배치 */ flex-direction: row-reverse; /* row-reverse : 역방향 배치 가로배치 */ } .parent div { width: 300px; height: 200px; color: #ffffff; text-align: center; font-size: 30px; margin: 5px; /* background-color: blue; *.. 개발일지/HTML 2022. 11. 7. justify-content 와 align-items 차이점 부모태그에 display : flex, justify-content parent에 높이를 300을 주었다. 하지만 자식 태그중에서 child2에는 높이를 주지 않았다 이럴경우에는 부모인 parent 높이를 따라간다 DOCTYPE html> Document .parent { border: 5px solid green; height: 300px; display: flex; justify-content: space-around; } .parent div { width: 300px; color: #ffffff; text-align: center; font-size: 30px; margin: 5px; background-color: aqua; } .child1 { height: 100px; } .child2 {}.. 개발일지/HTML 2022. 11. 7. flex란 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하면 된다. div 개발일지/HTML 2022. 11. 7. HTML - 1 * 브라우저의 목적 ? HTML 문서를 읽고 올바르게 표시하는 것 모든 HTML 문서는 문서 유형 선언으로 시작해야 한다 : 는 웹 페이지를 올바르게 표시하는데 도움을 준다. html5 버전 입니다. HTML 문서는 끝나며 HTML 문서에 보이는 부분은 사이 이다. 선언문은 한번만 나타나야 합니다. 선언문은 대소문자 구분하지 않는다 * HTML 5란 기존 텍스트와 하이퍼링크, 기본적인 태그만 표시하던 녀석을 멀티미디어 등 다양한 애플리케이션까지 표현, 제공 하도록 진화한 웹 프로그래밍 언어 특징 : 카메라, 동작센서 등의 H/W 기능을 웹에서 직접 제어 가능 Web Socket 가능이 있어서 양방향 통신이 가능하다. semantics - 웹 자료에 의미를 부여하여 사용자에게 의도에 맞는 맞춤형.. 개발일지/HTML 2022. 11. 2. HTML이란? * 학습목표 - 웹 사이트에 대한 이해 - 브라우저에 대한 이해 - HTML에 대한 이해 - CSS에 대한 이해 - 자바스크립트에 대한 이해 * 웹 사이트란 ? 기업 단체, 개인이 정보를 올릴 수 있는 홈페이지 (각 주제별) web page 의 모음 (집합체) 특징 1 ) 웹 사이트는 복잡해 보일 수 있지만, 전부 텍스트 ( 문자열 )와 이미지로 이루어져 있다. 2 ) HTML은 맞는 위치에 (장소에) 맞는 text를 사용한다면 직접 웹 사이트를 만들 수 있다. (프론트) 3 ) 브라우저가 html (문자열)을 분석해서 시각적으로 구현해 준다. : 결국 브라우저는 누군가에게 소스 코드를 받아서 구현이 된다. 4 ) 웹 사이트는 최소 2~3가지 이상 text로 구성되어있다. 이제 부터는 text 라는 말 .. 개발일지/HTML 2022. 11. 2. 이전 1 다음
