[CSS] flex, selector, state, variable

1.  CSS
   • inline / inline-block
   • flex (justify-content, align-itmes)
   • position
   • selector (pseudo selector, attribute selector)
   • state
   • pseudo element
   • variable
2. Git / Github

---

inline / inline-block

inline은 높이와 너비가 없음

그래서 위, 아래에 margin을 가질 수 없음

padding은 사방에 다 가질 수 있는데 margin은 좌우로만 가질 수 있음

그래서 위, 아래에 margin을 적용하고 싶다면 inline 요소들을 block으로 바꿔야 함

 

디스플레이 속성 중 inline-block은 block으로 인식하게 함

높이도 가질 수 있고 사방에 margin도 가질 수 있음

그리고 바로 옆에 다른 요소가 올 수도 있음

 

하지만 inline-block은 많은 문제가 있음

요소 사이에 빈 공간이 있음

정해진 형식도 없음

inline-block은 Responsive Design(반응형 디자인)을 지원하지 않음

창 크기가 달라지면 영향을 받음

 

flex

flexbox는 박스들을 어떤 곳이든 둘 수 있음

2차원 레이아웃(2d)에서 아주 잘 작동함

 

flexbox를 사용할 때 지켜야하는 중요한 룰 3개

 

1. 자식에게 명시하지 않고 부모에게 명시한다

자식 엘리먼트에는 어떤 것도 적지 말아야 함

부모 엘리먼트에만 명시해야 함

자식들을 움직이게 하고 싶다면 부모엘리먼트에게 말해야 함

박스들을 원하는 아무 곳에 움직이게 하려면 부모 엘리먼트를 flex container로 만들어야 함

display: flex;

 

그러고 나면 이제 다른 많은 속성들을 수정할 수 있음

justify-content: space-between/space-around/center/flex-end 등

 

space-between과 space-around의 차이

space-between: 아이템들의 사이(between)에 균일한 간격을 만들어 줌

space-around: 아이템들의 둘레(around)에 균일한 간격을 만들어 줌

 

출처: 나도 코딩

얼마나 빈 공간을 줄지 이런 것들을 자동으로 계산

그래서 화면 크기가 작아지면 빈 공간 크기도 작게 만들어줌

justify-content는 수평으로만 작용하는 것이 아님

 

2. 주축(main axis) - 수평

3. 교차축(cross axis) - 수직

justify-content는 주축에 적용 됨

align-items라고 불리는 다른 프로퍼티는 교차축에 적용

기본적으로 교차축은 수직 (기본적이라고 하는 이유는 나중에 이 속성을 바꿀 수 있기 때문)

 

주축은 수평으로 디폴트가 설정되어있고 교차축은 수직으로 설정되어있음

하지만 이건 바뀔 수 있음

 

flex-container가 height를 가지고 있지 않으면 align-items를 사용하더라도 위치가 바뀌지 않음

이미 맨 위아래를 차지하고 중심에 있기 때문

 

height: 100vh;

vh는 viewport height를 의미

viewport는 screen이라는 말로 생각

100 screen height는 화면 높이의 100%를 말함

vh는 아이폰, 맥 또는 그것보다 큰 화면에서 모두 다름

 

주축과 교차축의 디폴트인 수평과 수직을 바꾸기 위해서 flex-direction을 수정하면 됨

flex-direction에는 두 가지 옵션이 있음

column과 row

 

display를 flex로 했을 때 디폴트는 row(수평)

justify-content: 수평, align-items: 수직

 

그런데 flex-direction을 column으로 하면 주축은 수직이 되고 교차축은 수평이 됨

justify-content: 수직, align-items: 수평

 

flex-wrap: wrap / nowrap

nowrap: 모든 요소들을 한 줄에 정렬

wrap: 요소들을 여러 줄에 걸쳐 정렬

wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

 

flex-direction: column-reverse
flex-direction: row-reverse
flex-wrap: wrap-reverse

 

column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀜

flex-start, flex-end도 바꿔서 사용해야 함

 

flex-flow: column wrap

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에 flex-flow가 이를 대신함

이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받음

 

flexbox익숙해질 수 있는 게임 사이트

Flexbox Froggy

 

position

position은 레이아웃 보다는 위치를 아주 조금 옮기고 싶을 때 사용하는 속성

 

postion: fixed;

요소가 기존과 다른 new layer에 위치하게 됨 

이때 만들어진 layer의 position default value는 이전에 작성된 content의 위치에 고정

 

그런데 top, bottom, left, right을 사용하면 고정한 요소를 원하는 곳으로 이동시켜 그곳에 고정할 수 있게 됨 

 

postion: static; (default)

레이아웃이 박스를 처음 위치하는 곳에 두는 것

 

position: relative;

position을 relative로 하면 top, bottom, left, right 속성을 사용할 수 있음

element가 처음 위치한 곳을 기준으로 수정하는 것

 

position: absolute;

 top, bottom, left, right을 쓰고 싶을 때 사용하는데 특이한 점이 있음

absolute는 가장 가까운 relative 부모를 기준으로 이동시켜줌

body는 바깥쪽에 있는 가장 relative한 부모가 될 수 있음

 

pseudo selector

좀 더 세부적으로 엘리먼트를 선택해주는 것

여러 div 중 마지막 div만 고를 때 → div:last-child 

이외에도 first-child, nth-child(4), nth-child(even), nth-child(2n + 1) 등

 

selector

<div>
  <span>aaaa</span>
  <p>bbbb<span>!</span></p>
</div>

이런식의 구조가 있다고 할 때 

div span { text-decoration: underline; }을 하면 두 span 모두 underline이 적용됨

 

div 바로 밑의 span에만 underline을 적용하고 싶다면 

div > span { text-decoration: underline; }

이렇게 쓰면 div 바로 밑의 자식 span을 가리킴

 

p + span { ~ }

'+' selector을 이용하여 p의 바로 다음 형제인 span을 가리킴

 

p ~ span { ~ }

span이 p의 형제인데 바로 뒤에 오지 않을 경우 쓸 수 있는 selector '~'

 

attribute selector

attribute를 통해 어떤 것이든 선택할 수 있게 해줌

 

input [type="password"]

input [placeholder="username"]

 

"name"이라는 단어를 포함한 모든 input의 배경색을 pink로 만들기

input [placeholder~="name"]

~= : "name"을 포함하고 있음

 

*=와 ~=의 차이

*="hello"인 경우 ㄱㄴㄷㄹhelloㄱㄴㄷㄹ라고 있어도 선택 됨

~="hello"인 경우 앞 뒤에 공백이 있는 상태에서의 hello만 선택 됨

 

selector에 익숙해질 수 있는 게임 사이트

CSS Diner

 

state

active, focus, hover, focus, visited, focus-within

 

active는 버튼을 누르고 있을 때 

button:active { color: tomato; }

 

hover는 마우스가 대상 위에 있을 때

 

focus는 키보드로 선택되었을 때 

 

visited는 링크에만 적용 

방문한 상태

 

focus-within은 부모에 적용

focused인 자식을 가진 부모 엘리먼트의 상태를 의미

 

form:focus-within { ~ }

<form>
  <input />
  <input />
  <input />
</form>

input들 중 하나가 focused가 되면 form의 모습을 바꾼다는 것

 

 state를 다른 엘리먼트와 연계해서 사용할 수도 있음

form:hover input { ~ }

form:hover input:foucs { ~ }

 

pseudo element

실제로 존재하는 element는 아니지만 스타일링을 할 수 있게 함

콜론이 2개인 것이 특징

 

::placeholder

placeholder를 스타일할 수 있게 해줌

 

::selection

텍스트를 긁었을 때의(select) 스타일할 수 있음

 

::first-letter, ::first-line

첫 번째 문자, 라인 스타일할 수 있음

 

변수 (custom property)

:root라 불리는 엘리먼트에 변수를 추가

:root는 기본적으로 모든 document의 뿌리가 됨

 

:root { --main-color: #000000; }

--main-color를 document의 root에 저장하는 것

p { background-color: var(--main-color); }

a { color: var(--main-color); }

 

변수 이름: dash 2개 변수 이름 (빈공간은 dash로 채워줌)

변수 사용: var(변수 이름)

 

다음과 같이도 사용 가능

:root {

  --main-color: #000000; 

  --default-border: 1px solid var(--main-color);

}

 

---

git의 필요성

• 파일의 히스토리 알기 (변경 내용 추적)
• 텍스트 파일 뿐 아니라 excel, image, song 등 다른 파일 형식에서도 사용 가능 (git 시스템은 파일을 binary format으로 인식하기 때문)

git은 파일을 계속 추적(Tracking)하는 것

github는 파일들과 파일 변경 내역들을 올리는 공간

 

repository

코드의 변경 내역과 그 히스토리를 가지고 있는 폴더

commit

시점 (체크 포인트)