04.TIL (의사클래스 ,FLEXBOX, GRID)

무척 오랜만에 적는 TIL이다.
드디어 기다리고 기다리던- 위코드 입과가 한달 앞으로 다가왔고,
사전 스터디가 시작됐다.
html,css는 그래도 조금 안다고 생각했는데, 역시나..
공부를 하면 할수록 새로운 개념들이 계속 등장했다.
계속 공부하고 찾아보며 실력을 키워야겠다고 다짐-

자기소개 웹페이지를 제작하는 것이 이번주 사전스터디 과제였는데,
홈페이지를 머릿속으로 구상하는 것 까진 쉬웠지만 그 내용을 코드로
원하는 모양을 구현해내야 하는 것이 감이 오지 않았다.

많이 헤메고 있었는데, 조원분들의 추천으로 '조제의 세계'라는 분의
유튜브 강의를 알게되었다! 😇
정말 감사했다. 나도 도움을 줄 수 있는 조원이 되어야지...

강의를 처음부터 들으며 헷갈렸던 개념을 잡아갔고,
페이지의 틀도 만들어나갔다.

오늘은 '조제의 세계' 강의를 바탕으로
css 개념에 대한 TIL을 작성해보고자 한다!

1. CSS 파일 따로 만들고 링크로 연결하기

<link rel=”stylesheet” type=”text/css” href=”css/style.css”/>

2. 의사클래스 pseudo-class
   : 선택하고자 하는 HTML 요소의 특별한 상태를 명시할 때 사용

• 문법 : 선택자:의사클래스이름 {속성: 속성값;}
  class, id 사용 가능. 선택자.클래스이름:의사클래스이름: {속성: 속성값;}
  
  
• link : 기본 상태
• visit : 한 번이라도 링크를 통해 방문한 상태를 모두 선택
• Hover : 커서를 올리면 변함

  a:hover {
   color: white;
   transition: 0.3s;
  } ```

• Active : 클릭하면 변함
• focus : 초점이 맞춰진 input 요소를 모두 선택함
• target : 활성화된 target 요소를 모두 선택함

3. 기본 개념들

• Letter-spacing : 자간 조절
• text-align:center 글자 정렬
• text-transform: uppercase,lowercase (대/소문자)
• Line-height : 줄간격 조절
• webhit-text-stroke : 외곽선 넣기
• Transform : 모양을 변형하기, 도형 rotate, scale,
• Transition : 변화하는 것.
  Ex) hover를 활용해 커서를 올리면 천천히 색이 바뀌도록 할 수 있음
• Transition-property : color;
• Transitiion-duration: 0.3s;
• Fillter : 사진 효과를 주는 것 처럼 여러 효과를 줄 수 있음
  (blur, brightness 등 조절 가능)

[1분코딩 링크 참고]

4. Flexbox : 1차원적으로 정렬을 함
컨테이너와 아이템에 들어갈 수 있는 것이 각각 다름

div.container>div.item.item${item$}*10

입력 후 tab을 누르면 Div 클래스는
컨테이너. 아이템의 숫자 넘버링이 된 코드 10개가 입력됨!

4-1. container

• display; (정렬 방식 변경)
• flex-direction; (메인 진행 방향)
• flex-wrap; (컨텐츠 가로 배열. 자리가 없으면 줄바꿈)
• flex-flow; (디렉션과 플로우를 합쳐서 사용함)
• justify-contents; (center – 아이템 가로로 배치)
• align-items; (수직배열)
• align-contents; (상하정렬)

4-2. items

• order; (순서지정.0이 기본값)
• flex-basis; (아이템의 기본 크기를 결정함)
• flex-grow; (아이템이 basis의 값보다 커질 수 있는지 결정하는 속성)
• flex-shrink; (값을 유연하게 줄일 수 있는 속성)
• flex; (그로우,쉬링크,베이스를 한번에 쓸 수 있는 축약형 속성)
• align-self; (수직축 정렬)

5. Grid: 2차원 정렬

.container {	
	dispaly: grid;
    } 

5-1. container

• 트랙의 크기를 지정해주는 속성들
  grid-template-columns (열배치-세로)
  grid-template-rows (행배치-가로)
• gap: row와 column의 간격 설정 가능

.container {
	row.gap: 10px;
    /* row 간격 10으로 변경*/
    columns 20px;
    /* columns 간격 20으로 변경 */
    grid-gap : 20px;
    }

• justify-items: 가로방향 정렬
• align-items: 세로방향 정렬 (stretch,start,center,end)
• Items :
• align-self : 개별 아이템 세로 정렬
• justify-self : 개별 아이템 가로 정렬
• place-self : align-self, justify-self를 같이 쓸 수 있는 속성
  align-self jusify-self의 순서로 작성하고 하나만 쓰면 두 속성 모두에 적용됨

.container {
	place-self : start center;
    }

• order : 아이템 배치 순서 결정
• Repeat 함수 : 반복되는 값을 자동으로 처리할 수 있는 함수. repeat(반복횟수,반복값)