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 아이템 별로 아이템을 정렬 가능

마무리

item의 순서도 html에 적은 순서에서 변경 가능. order의 속성을 사용하면 됨!!!