👥 조별 과제

⚡ 개념 정리하기 !

🏄‍♂️1,2태경 🏄‍♂️3,4신비 🏄‍♂️5,6지혜 🏄‍♂️7강록

1. 스타일시트 CSS : HTML 태그에 스타일을 지정할 때 사용하는 언어 내부 스타일 시트 : HTML 문서 내부에 CSS 직접 작성 <style> 외부 스타일 시트 : 별도의 파일을 만들고 HTML 연결 <link href="경로" rel="stylesheet"> 인라인 스타일 시트 : 태그의 스타일 속성으로 CSS 작성

2. 선택자 정리 선택자{속성:속성값;} 스타일하고 싶은 HTML 태그를 선택하는 영역 1.유형 선택자 2.전체 선택자 : {} 전체에 스타일 적용 3.아이디 선택자 : CSS에서는 #id_name{} HTML에서는 <div id="id_name"></div> 4.클래스 선택자 : CSS에서는 .class_name{} HTML에서는 <div class="class_name"></div> 5.자식 선택자 : element > element 6.자손 선택자 : element 공백 element 7.인접 선택자 : element + element 8.일반 선택자 : element ~ element 9.속성 선택자 element[attr="value"]{} 정확하게 "value"과 일치하는 요소 element[attr^="value"]{} "value"으로 시작하는 요소 element[attr$="value"]{} "value"으로 끝나는 요소 element[attr="value"]{} "value"이 포함되는 요소

   구조적 가상 요소 선택자 첫번째 요소,클래스 first-child 마지막 요소,클래스 last-child n번째 요소,클래스 nth-child

3. 선언부 선택자{속성:속성값;}에서 {속성:속성값;} 부분을 선언부라고 함. :(선택자 영역에 선택된 태그에,) 스타일링하고 싶은 속성과 값을 작성하는 영역. -> 속성과 속성값이 한 쌍 or 여러 쌍이 모여, 선택자로 선택된 태그에 일괄적으로 적용됨.

4. 색 표현 방법 Step1) 선택자 영역에 태그를 지정한다. Step2) color 속성 이용. Step3) 속성값 부분에, 3-1) 키워드 방법: 색상의 영문이름을 값의 키워드로 사용하는 방법 ex. blue, green, red... 3-2) rgb(R,G,B)방법: R, G, B에 해당하는 값을 0~255 사이의 숫자로 적기. 0에 가까울수록 정도가 낮음을 의미, 255에 가까울수록 정도가 큼을 의미. ex. rgb(255, 0, 0) => 빨간색에 해당하는 R값이 최고치이므로, 이는 빨간색을 나타냄!

   • rgba(R, G, B, A)처럼, a(알파값)을 추가로 작성하여 투명도를 조절할 수 있음! a(alpha)값은, 0~1사이의 값을 소수점 단위로 적을 수 있음. 0에 가까울수록 투명. 3-3) HEX값 이용하여 색상을 16진수로 작성: 기본문법형태는, #RRGGBB. f: 제일 큰 수치, 0: 제일 작은 수치. ex. #00ff00: 초록색, #ff0000: 빨간색.
     • 연속된(반복) 16진수: 한 번만 적어도 됨.-> #ff0000 = #f00

5. font-size 속성

   1. px: 기본단위
   2. rem: HTML태그에 적용되어져 있는 폰트 사이즈의 배수에 해당하는 크기 설정, html의 폰트크기만 변경해도 rem단위를 사용하는 태그의 크기가 유동적으로 변화한다
   3. em: 부모태그의 폰트크기 배수로 폰트사이즈 나타남
   4. vw : viewpoint width의 약자로 웹브라우저의 화면 크기 중 가로를 나타낸다. 1vw는 화면 가로 크기의 1/100
   5. vh : viewpoint height의 약자로 웹브라우저의 화면 크기 중 세로를 나타낸다.

6. 텍스트 관련 CSS 속성

   1. font-size : 크기 단위 값;
   2. color: 색상 표현 값;
   3. font-family: [글꼴],[글꼴유형]; 글꼴유형에는 serif,sans-serif, cursive, fantasy, monospace 등이 존재
   4. font-weight : 굵기 단위; (100~900 사이의 숫자 또는 normal,bold,bolder,lighter로 나타냄), 주의할 점은 폰트자체에서 지원되는 굵기인지 확인하고 숫자를 설정할 것.
   5. line-weight : 크기 단위 or 배수; *항상 폰트사이즈보다 크게 설정해야 가독성이 좋음

7. Flexbox

Part1. 들어가기에 앞서 1️⃣Flexbox의 두 축 main axis와 cross axis가 있다 가로선과 세로선이라는 용어는 혼동을 유발할 수 있으므로 이는 최대한 배제한다. flexbox의 명령어들을 main axis에서 작동하는 것과 cross axis 에서 작동하는 것으로 구분지으면 편하다. 이를테면 justify-content는 main axis에서 작동한다. 만약 flex-direction: row-reverse등으로 axis 방향이 바뀌면 이에 상대적으로 cross axis도 바뀐다.*

main axis가 굵은 것, cross axis가 얇은 것. flow-direction으로 main axis의 방향을 바꿀 수 있다. 가장 왼쪽을 기준으로 어떻게 바뀌는지 살펴보자.

여기선 wrap-reverse로, cross axis의 방향까지 뒤집어졌다.

2️⃣기본적 구조 HTML문서 상에서 div를 통해 container를 만들고, 각 container 안에는 item들이 담긴다. item은 <p>나 <img>등 어떤 것이든 될 수 있다. flexbox의 명령어들을 container에 적용되는 것과 container내의 개별 item에 적용되는 것으로 구분지을 수도 있다.

Part2. 명령어들을 알아보자

1. justify-content (main axis에서 작동) flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다.
2. align-items (cross axis에서 작동) flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 상의 cross axis상의 가운데로 정렬합니다. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다. stretch: 요소들을 컨테이너에 맞도록 늘립니다.
3. flex-direction row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. column: 요소들을 위에서 아래로 정렬합니다. column-reverse: 요소들을 아래에서 위로 정렬합니다.
4. order (무게를 부여한다고 생각하자**) row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. column: 요소들을 위에서 아래로 정렬합니다. column-reverse: 요소들을 아래에서 위로 정렬합니다.
5. align-self align-items를 override한다. 인자는 align-items와 같다.