[TIL][01.22] CSS, BootStrap

CSS

box model

border : padding과 콘텐츠를 둘러싼 테두리

padding : 콘텐츠를 둘러싼 테두리

margin : border, padding, 콘텐츠를 둘러싼 테두리

width, hegiht는 콘텐츠의 너비와 높이가 설정됨

 

outline

border의 바깐쪽에 그려진 선

 

정렬

justify-content : 콘텐츠 수평 방향 정렬

vertical-align : 콘텐츠 수직 방향 정렬

 

Text

속성을 사용해 텍스트에 스타일을 적용 가능

 

Font

글꼴은 텍스트에 가치를 더함. 읽기 쉬운 글꼴을 사용하는 것이 중요

 

Link

링크는 스타일을 여러가지 지정 가능

 

List

리스트의 마커 변경 가능

리스트에는 기본 margin, padding이 적용되어 있음

 

Table

테이블 스타일 지정 가능 (정렬, 테두리, 크기, 스타일, 반응형)

 

display

레이아웃 제어하는 속성

 

position

요소에 사용되는 위치 지정 방법을 지정

static(기본값), relative, fixed, absolute, sticky

 

z-index

요소의 앞, 뒤 순서를 정해줌

 

overflow

컨텐츠가 지정된 영역보다 큰 경우 잘라낼지, 넘치게할지, 스크롤바를 보이게 할지 정함

 

class

클래스 : 요소에 스타일을 선택하기 위해 사용하는 선택자

가상 클래스 : 특정 상태나 조건에서만 스타일을 적용할 때 사용하는 선택자

가상 요소 : 해당하는 요소를 별도의 가상 태그로 만들어내어 스타일을 적용

 

Bootstrap

CSS를 더 쉽게 구현하기위한 프레임워크

부트스트랩에서 만들어진 스타일 외에 다른 스타일 적용시키려면 추가적인 클래스를 작성해야함