웹 디자인 기능사

[CSS] flex layout에 대한 이해

이번에는 flex box에 대하여 알아보도록 하겠습니다. display: flex justify-content align-items align-content 복합적으로 사용하기 해당 포스트의 내용을 접하기 이전에 다음 flex froggy 게임을 플레이해주세요. flex에 대한 이해도가 굉장히 좋아집니다. 물론 해당 …

웹 디자인 기능사

[CSS] Float layout에 대한 이해

이번 포스트에서는 float layout에 대해 알아보도록 하겠습니다. 포스트의 순서는 다음과 같습니다. float의 기본 속성 float와 display:inline-block의 차이점 float과 inline-block을 같이 사용하기 float의 기본속성 float을 이용하면 다음과 같이 레이아웃을 가로로 나열할 …

html

CSS Attribute에 대한 이해

이번 포스트에서는 다양한 CSS의 속성과 사용방법에 대해 알아보도록 하겠습니다. 직관적인 속성들 다음 요소들은 단어만 봐도 이해할 수 있는 속성들입니다. width : 가로너비 height : 세로너비 background : 배경색(혹은 배경이미지) color …

html

CSS Selector

이번 포스트에서는 다양한 CSS Selector에 대해 알아보도록 하겠습니다. 기초 선택자 기초 선택자에는 다음과 같다. 태그(Tag) 선택 아이디(ID) 선택 클래스(Class) 선택 자식(child) 선택 자손(descendants) 선택 위의 소스코드와 결과물을 통해 알 수 …