CSS 정리

chaaerim·2022년 1월 23일

CSS

오늘은 CSS에 대해서 간단히 정리해보겠다 !

CSS의 의미와 정의

css는 cascading sytyle sheet의 약자
위에서 아래로 연속해서 떨어지는 느낌. 즉 css는 스타일링을 작성하는 문서
스타일링을 작성하지 않아도 기본적으로 보여지는 ui가 있음 브라우저에서 작성된 기본적인 스타일 sheet이 있기 때문
cascading 이란 정의된 세부적인 정의가 있다면 그것을 쓰고 정의된 것이 없다면 다음 기본으로 지정된 아이로 넘어가는 것을 말함

웹스타일링 3가지

author style >> user style >>browser
우리가 정의한 author style 이 제일 우선 순위를 가짐, 우리가 지정한 style이 없다면 사용자가 지정한 user style 로 넘어감
사용자가 지정한 스타일이 없다면 브라우저에서 기본으로 지정한 스타일로 넘어가는 것이 cascading의 의미
우리가 지정한 것, 브라우저에서 지정한 것을 끊어내는 아이가 important!. important! 은 보통의 경우 사용하지 않는
것이 좋음

선택자

구체적으로 조금 더 태그 가까이에 설정한 선택자의 우선순위가 높아짐

선택자 사용 방법
universal일 경우 *
id일 경우 #
class일 경우 .
+선택자 name {
property: value;
}
#button_icons{
	list_style: none;
}

속성값에 따라서도 css를 달리 할 수 있음. 예를 들어 a[href] 링크가 걸려져 있는 태그들만 선택하는 것이 가능
태그들도 묶어서 사용 가능

padding & margin

padding 은 content 내부에 들어가는 spacing을 말함
margin 은 content 외부에 들어가는 spacing을 말함

CSS-display & position

span의 display를 inline >> block으로 바꾸면 요소를 한 줄에 하나만 넣을 수 있음. div도 display를 inline으로 바꿔줄 수 있음
inline은 content 자체만을 꾸며주는 것. 내부에 들어있는 물건의 크기에 맞춰서 바뀜

position

position은 기본 값으로 static을 가지고 있음. static은 html에 정의된 순서대로 브라우저상에 자연스럽게 보이는 걸 의미
position의 값을 relative 로 바꿔주면 원래 있던 자리로부터 left와 top을 조절 가능
absolute 는 내 아이템이 담긴 가장 가까운 박스 안에서 위치 변경이 일어남
fixed 는 상자 안에서 벗어나서 그냥 window안에서 움직이는 것을 말함
sticky 는 원래 있던 자리에 있는데 스크롤링을 하면 없어지지 않고 원래 있던 자리에 그대로 붙어있는 것을 말함

flexbox

flexbox 를 이용하면 box와 item을 행, 열로 자유자재로 배치 시켜줄 수 있음
flexbox만 잘 이해해도 layout을 잘 구성할 수 있음

flexbox 의 컨테이너 박스에 적용되는 속성값들이 존재, 각각의 item에 적용할 수 잇는 속성값이 존재

flexbox에는 중심축 과 반대축 이 있음(수평축, 수직축). 중심축을 수평, 수직에 두느냐에 따라 반대축이 바뀜

% : 컨테이너가 들어있는 부모의 높이의 몇 %를 채우겠다는 의미

vh : veiw port height 을 다 쓰겠다는 것을 100vh로 표현

container에게 flexbox를 이용하겠다고 말하는 것은 display: flex;라고 적으면 됨

flex-direction: row; -중심축이 수평, flex-direction: column; -중심축이 수직

fex-wrap: wrap; 아이템이 꽉 차면 다음라인으로 아이템이 넘어감

justify-content는 중심축에서 아이템을 어떻게 배치할 것인지를 결정해줌

속성 flex-end 는 시작을 시작점에서부터 하는 것이 아니라 끝나는 점에 맞추어 시작을 하게 함

속성 space-around 는 item 주변을 감싸는 space를 만들어줌

flex-grow 는 컨테이너를 꽉 채우는 역할. 만약 어떤 item이 flex-grow: 2, flex-grow: 1 이면 2가 1의 2배로 커짐.

flex-shrink 컨테이너가 점점 작아졌을 때 어떻게 행동해야하는지를 지정

flex-basis 아이템들이 공간을 얼마나 차지해야하는지 더 세부적으로 명시할 수 있도록 함

align-self 아이템 별로 아이템을 정렬 가능