Roadmap CSS

🎈 CSS(Cascading Style Sheet)란? 웹 콘텐츠의 스타일을 지정하는 코드 프로그래밍 언어 X, 마크 업 언어 X, 스타일 시트 언어 O HTML 요소의 스타일을 선택적으로 지정하는 데 사용 CSS 예 h1태그 내용에 빨간색 글꼴을

정의한 박스들을 원하는 위치에, 원하는 사이즈로 배치하는 것이 중요하다. 다양한 디스플레이 설정을 위해 박스 스타일 지정과 레이아웃 요소들을 자세히 알아보자. FloatsPositioningDisplayBox ModelCSS GridFlex Box

🎈 Float? float는 '뜨다'라는 의미이며 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다. 원래 웹페이지에서 이미지를

🎈 Display? display CSS 속성은 블록과 인라인 요소 중 어느 쪽으로 처리할지, flow, grid, flex와 같이 자식 요소를 배치할 때 사용할 레이아웃을 설정한다. 먼저 인라인 엘리먼트와 블럭레벨 엘리먼트의 차이점부터 알아보면서 display를 설명해보자. 🟦 inline VS block level h1태그는 화면 전체를 쓰는...

🎈 Box Model? 각각의 태그들이 웹페이지에 표현될 때 그 태그의 여백, 위치, 크기 등 부피감을 결정한다. 박스라는 표현을 사용하는 이유는 각각의 태그들의 바깥쪽에 사각형의 박스와 같은 모양으로 둘러쌓이기 때문이다. 🟥 Box 구성 하나의 박스는 4가지

html의 태그들, 엘리먼트가 화면상의 어디에 위치할 것인가라는 것을 결정한다. 엘리먼트의 위치를 지정하는 5가지 방법을 자세히 알아보자.staticrelativeabsolutefixedstickyCSS 위치 기본값이 static으로 설정되어 있다. 박스, 컨텐츠들이

📕 CSS Grid?

🎈 Flexbox? flexbox는 지금까지 레이아웃과 관련된 다양한 속성(float, display, position 등) 보다 행 또는 열로 자유자재로 요소들을 배치시킬 수 있다. 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구이며 CSS의 꽃이라고 불린다🌷 🔴 Flex 기타 속성들 flexbox는 container 박스에 적용하는 속성들이 있...

🎈 Media Query? media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능이다. 데스크탑으로만 화면을 보지 않고 최근에는 모바일, 테플릿PC 여러가지 미디어 개체들을 사용한다. 미디어쿼리는 반응형 디자인의 핵심 기술이다.