[CSS] Flexbox: display와 정렬 속성 기록 및 정리
·
프로그래밍 언어/퍼블리싱 ( HTML, CSS )
CSS로 레이아웃을 구성할 수 있는 방법은 다양합니다.예전에는 `float`, `clear`, `position` 등을 활용해 구조를 잡는 경우가 많았지만,최근에는 `display` 속성을 활용해서 레이아웃을 잡는 방식이 가장 보편적이고 간결하게 쓰이고 있다고 생각합니다. 저도 앞으로 이 방식을 사용할 예정이라, 잊지 않기 위해 블로그에 정리합니다.! display 속성으로 레이아웃 잡기1. `display: flex` 블록 요소 (block) 처럼 동작하는 플렉스 컨테이너를 정의.자식 요소들이 flex-item 이 되며, 수평 또는 수직 정렬을 자유롭게 설정할 수 있음 .container { display: flex; } 2. `display: inline-flex`인라인 요소처럼 동작하는 flex ..
[ CSS ] 레이아웃
·
프로그래밍 언어/퍼블리싱 ( HTML, CSS )
레이아웃이 뭡니까..? : block 레벨 요소들을 원하는 위치에 배열하는 것. layout에 사용되는 용어들Header & Navigation Barsection ( 콘텐츠 영역 ) & Aside (Footer반응형 레이아웃은 뭡니까? -> 우리는 사용자가 어떤 디바이스로 웹 사이트를 방문할 지 알 방법이 없습니다 . ex 데스크탑, 태블릿, 모바일 등등... 그래서 `viewport meta tag`일반적으로 `viewport meta tag`는 모바일 디바이스 에서만 적용됨. `@media` 반응형 웹디자인에 사용되는 핵심 기술 를 사용하여 미디어 별로 style 을 지정하는 것을 `Media Query` 라고 합니다.@media screen and (min-width: 600px) { body..
[HTML / CSS] 개념 다지기 1.
·
프로그래밍 언어/퍼블리싱 ( HTML, CSS )
세상에 존재하는 모든 웹 페이지는 HTML로 작성됩니다HTML = 웹사이트의 구조를 이루는 뼈대CSS = 웹사이트에 살을 붙이고 옷을 입히는 스타일링JS = 웹사이트가 사용자와 상호작용할 수 있도록 움직임을 더하는 관절HTML → Hypertext Markup Language 즉, 마크업 언어는 “자료의 구조(웹페이지)를 표현하기 위한 언어” 1. 마크업(Markup)마크업(Markup)은 문서의 구조를 정의하는 태그 기반 언어를 의미한다.대표적인 마크업 언어: HTML, XML예시 2. 마크다운(Markdown)마크다운(Markdown)은 더 쉽게 문서를 작성할 수 있도록 만든 경량 마크업 언어.HTML 같은 마크업 언어보다 간단하고 직관적이면서도, 웹에서 HTML로 변환이 가능하다.대표적인 사용처: ..