[CSS] Property별 사용법

파란색으로 표시한 값이 디폴트(기본) 값이다. 애니메이션, 레이아웃과 관련된 프로퍼티는 이후에 다른 포스트에서 다룰 예정이다. display (표시) 해당 태그가 얼마만큼의 공간을 차지할 것인가를 결정한다. none: 영역을 차지하지 않음 block: 가로 영역을 모두 채움(기본: width:100%) div, p, h, li 등의 기본 값에 해당 block은 width, height 속성을 지정할 수 있다. inline: 딱 자기 공간만큼 채움 (줄바꿈 없음) span, b, i, a 등의 기본 값에 해당 inline을 사용할시 width, height 지정 불가능 inline-block: 줄바꿈은 없으나 너비, 높이를 지정할 수 있음. 레이아웃 배치에 사용 fiex: 컨테이너를 flex contain..

• format_list_bulleted Web FrontEnd
• · 2020. 9. 10.
• textsms

[CSS] 자주 사용하는 배치 방법

CSS의 구조 css는 다음과 같은 구조로 이루어져 있으며, 각 selector를 node라고 부른다. selector { property : value; } 이 글에서는 구조에 명시된 순서대로 css에 대하여 알아보기로 한다. selector의 종류 html의 태그의 종류, 태그에 부여된 id와 class의 이름, html 간 계층적 구조에 의해 하나의 html 태그라도 이를 나타내는 다양한 selector 표현이 존재할 수 있다. 여기에서는 주로 사용하는 selector 표현에 대해서만 정리해 보기로 한다. 태그 이름: tagName { } 클래스: .className { } 아이디: #idName { } 자식 (바로 한 계층 아래만): parent > child 자손 (하위 계층을 모두 포함): a..

• format_list_bulleted Web FrontEnd
• · 2020. 9. 9.
• textsms