Ch 8. CSS 속성-2

🎯이번 챕터는

CSS를 구체적으로 배우는 과정이었다.

어떻게 작동시키며 어떤 부분을 수정해야 브라우저에 뜨는지 등을 확인하고

마지막으로 HTML과 CSS만을 이용해서 오버워치 캐릭터 선택 화면을 만들었는데

이 두가지만 가지고도 이렇게 만드는 것을 보면 정말 기초에 충실한것도 중요하다고 

생각이 든다.

---

⭕11. 투명도

📌강의 정리

• opacity는 요소의 투명도를 결정한다.
• 기본 1인 경우는 불투명을 의미한다.
• opacity가 0.07이면 매우 투명해진다.
• 0.7이면 많이 불투명해진다.
• 이것은 백분율로 1을 100으로 환산하여 계산한다.
• 코드펜에서 확인을 하면 부모 하나 자식 하나를 두고
• 자식을 클래스선택자로 선택하고 opacity를 조절하면 불투명도를 확인할 수 있다.
• 이때 소수점 앞의 0은 생략할 수 있다.
• opacity의 기본값은 1이다.

 

📌느낀점

투명도에 대해 배웠다.

미적으로나 다른용도로나 꽤 쓸만할 것 같다.

---

⭕12. 글꼴

📌강의 정리

• html에서 h1으로 헤딩태그를 만들어준다.
• 그리고 그 밑으로 p태그를 이용하여 특정 글을 써준다.
• css에서 태그선택자를 이용해서 h1과 p 를 선택해준다.
• 이제 css에서 브라우저의 기본 적용을 리셋해준다.
• h1을 p태그와 비교하기 위해 font-size를 24px로 해주고
• p태그는 기본으로 16px이다.
• font-weight를 700으로 해주면 좀 더 진해진다.
• font-style은 italic을 해주면 글자가 기울어진다.
• p태그는 패딩을 10px를 주고 박스사이징은 보더박스를 해준다.
• 이제 p태그부분에다 라인헤이트부분을 1.4로 해주면 한 줄에 대한 높이를 1.4로 해준것이다.
• font-style은 글자의 기울기를 지정하게 된다.
• 여기에 italic을 하면 글자가 기울어진다.
• oblique는 자주 안쓰이지만 이것 또한 기울어진다.
• font-weight는 글자의 두께를 정해준다.
• 기본값은 400으로 노멀이고 bold는 700이 두껍다.
• 100단위의 숫자9개, normal과 bold 이외 두께이다.
• font-size는 글자의 크기를 지정한다.
• 16px가 기본크기이며 px, em, rem등 단위로 지정한다.
• line-height는 한 줄의 높이, 행간과 유사한 개념이다.
• 기본값은 브라우저의 기본 정의를 사용한다.
• 숫자는 요소의 글꼴 크기의 배수로 지정한다.
• 단위로는 px,em,rem등의 단위로 지정한다.
• 예를 들어 1.4를 적었다면 기본의 16px의 1.4배가 된다.
• 또한 폰트사이즈가 16px, 라인하이트가 32px이면 한줄띄어쓰기가 되며 숫자로 2이면 32px와 같은 결과가 나온다.
• 또한 200%도 같은 결과가 나온다. 숫자로 배수를 지정하는 것을 추천한다.
• 줄 높이가 32px로 나온다고 하면 아래로만 32px가 아닌 32px의 가운데에 16px의 글자가 나오는 개념이다.
• 플렉스가 나오면서 이제 정렬은 정렬만 사용하게 된다.
• font-famaily는 글꼴(서체) 지정이다.
• 글꼴을 여러개 작성해 넣을 수 있다. 또한 필수적으로 글꼴계열을 적어야한다.
• 글꼴에 후보가 있는데 브라우저가 후보중 선착순으로 명시되어진 후보를 사용하기 위해 시도해보고 만약 여러 환경으로 글꼴을 적용못하면 두번째를 시도한다.
• 만약 마지막까지 시도가 실패한다면 마지막의 글꼴계열에서 하나를 랜덤으로 쓰게 된다.
• 어떤 폰트는 따옴표로 어떤 폰트는 따옴표가 없는데 그것은 띄어쓰기가 있으면 따옴표로 묶는것이다.
• 계열은 크게 5가지가 있다.
• serif 바탕체계열, sans-serif 고딕체 계열, monospace 고정너비(가로폭이 동등) 글꼴 계열, 모노스페이스는 코딩할때 좋다. cursive 필기체계열, fantasy 장식글꼴계열
• 글자 기울기를 지정할 때 사용하는 속성과 값은? font-style: italic;
• 글자를 두껍게 지정할 때 사용하는 속성과 값은? font-weight 700이면 두꺼운것
• sans-serif가 고딕체계열, line-height의 권장단위는 배수로 숫자만 적는 것이다.

 

📌느낀점

계속해서 css의 속성들을 알아보고 있다.

이번엔 글꼴인데 글꼴에도 이렇게 많은 속성이 있는지는 처음 알았다.

---

⭕13. 문자

📌강의 정리

• 우선 css를 리셋한다.
• a태그로 구글주소를 값으로 해주고 css에서 200px, 100px오렌지로해준다.
• 이때 a는 인라인이므로 css에서 display속성에 block값을 준다.
• 파란색 혹은 보라색은 a태그의 기본색상이다.
• a선택자에 color는 화이트로 텍스트 데코레이션은 논 텍스트 얼라인은 센터로 하면 가운데로 온다.
• 기존의 line-height는 100px를 하면 한줄의 글자를 수직 100px로 가운데에 오게 할 수 있다.
• color는 글자의 색상이다. 기본은 검정색이며 색상을 기타 지정 가능한 색상이다.
• text-align은 기본값이 왼쪽 정렬이다. right라 하면 오른쪽 정렬 center라 하면 가운데 정렬이다.
• text-decoration은 문자의 장식(선)을 꾸미며 기본값은 none이며 underline을 하면 밑줄이다.
• a태그는 기본이 밑줄이므로 없애려면 이 속성의 값을 none을 주면된다.line-through는 중앙선이다.
• text-indent 는 -50px하면 들여쓰기 내어쓰기 할 수 있다.
• text-indent는 문자 첫줄의 들여쓰기이고 음수를 사용하면 들여쓰기 반대는 내어쓰기이다.
• 문자를 수평정렬해주는 속성은 text-align이다.
• 문자를 들여쓰는 속성은 text-indent이다.
• text-decoration속성의 기본값은? none이다.

 

📌느낀점

문자에 대해 알아봤다.

정말 다양한 속성이 있었다.

들여쓰기는 처음 알았는데 html은 정말 마크업만 하고

나머지 꾸미는것은 다 css에서 해야한다는거을 느꼈다.

---

⭕14. 배경

📌강의 정리

• 배경과 관련된 요소이다.
• 우선 구별할 수 있게 div의 백그라운드컬러를 오렌지를 해준다.
• 이후 background-image를 해서 배경을 줄 수 있다.
• 이 속성의 값으로 url(”경로”); 를 주면 된다.
• 개발자도구로 셀렉터로 이미지를 클릭해주면 css styles에 url()로 상대경로가 적혀있다.
• 상대경로를 바로 사용할 수는 없기 때문에 우클릭 후 새탭으로 열어 그곳의 주소를 백그라운드이미지의 url에 붙여넣기 해준다.
• 이때 배경에 깔리는 이미지이므로 우리가 정한 200px 200px에서는 짤리게 된다.
• 이때 배경의 사이즈는 200px로 줄이려면 background-size를 바꾸면 된다.
• 이때 사이즈를 50px로 하면 바둑판식배열로 나오게 된다.
• 70이면 살짝 자르며 바둑판식으로 반복되며 나온다.
• 이때 바둑판식이 싫으면 백그라운드 리핏을 노 리핏으로 값을 주면 된다.
• 백그라운드 포지션을 센터로 주면 큰 크기에 배경으로 정 가운데에 위치하게 할 수 있다.
• background-color는 요소의 배경 색상이다.
• 기본값은 투명이며 색상을 값으로 줄 수 있다.
• background-image는 요소의 배경 이미지를 삽입한다.
• 기본은 none이며 url(”경로”)를 주면된다.
• 백그라운드 컬러로 오렌지를 주고 백그라운드 이미지로 url을 주면 배경색상을 이미지뒤에 나오게 배경을 만들 수 있다.
• background-repeat은 요소의 배경이미지를 반복한다.
• 기본값은 repeat으로 이미지를 수직 , 수평으로 반복하지만 no-repeat하면 반복안하게 할 수 있다.
• repreat-x를 하면 x축으로만 반복하게 할 수 있다.
• background-position은 요소의 배경 이미지 위치이다.
• 기본값은 0% 0%이다. 방향값으로 상하좌우를 줄 수 있다. 또한 center를 줄 수 도 있다.
• x축은 왼쪽에서 오른쪽으로 y축은 위에서 아래로 가는게 일반적이다.
• 단위는 px,em,rem등을 단위로 쓴다.
• 백그라운드포지션을 탑라이트를 해주면 위에 붙고 오른쪽에 붙어 우상향에 붙는다.
• center만 적는다면 정 가운데에 붙게 된다.
• 100px 30px이면 x축y축으로 정의 된다.
• background-size는 요소의 배경 이미지 크기 이다.
• 기본값은 auto로 이미지의 실제 크기이다.
• 단위는 px,em,rem이고 cover는 비율을 유지하며 더 넓은 너비에 맞춰진다.
• 가로너비와 세로너비를 봤을때 가로너비가 더 넓으면 배경의 세로가 짤린다.
• contain은 짧은너비에 맞추므로 세로너비에 맞추어 온전히 다 나오지만 조금 남는다.
• background-attachment은 요소의 배경 이미지 스크롤 특성이다.
• scroll 이미지가 요소를 따라서 같이 스크롤된다.
• fixed는 이미지가 뷰포트에 고정, 스크롤은 X이다.
• 어태치먼트가 기본값 스크롤이면 스크롤할때 잘리는 건 변화 없고 이미지 자체가 그냥 올라간다.
• 하지만 fixed이면 잘린 배경이미지가 고정이지만 보는 게 움직이므로 배경이미지가 다르게 짤린 부분들을 볼 수 있게 된다.
• size를 두 개의 값을 주면 x축y축 계속 신경 써야 하기 때문에 이미지를 삽입할때는 가로나 세로 하나만 입력하면 알아서 잘 출력되게 된다.
• background-size가 cover이면 더 넓은쪽으로 맞춘다.
• 어태치먼트를 스크롤로 하면 스크롤 올릴때 요소가 같이 올라간다.
• fixed면 요소는 올라가지만 배경이미지는 가만히 있어서 다른 곳 볼 수 있다.
• 이런 어태치먼트는 나중에 실습에서 해당섹션에서 배경은 움직이지 않고 다른 이미지만 움직이는 것을 할 수 있다.
• 요소 배경에 이미지를 삽입하는 속성은? 백그라운드 이미지이다.
• 요소배경에 이미지를 삽입할때 사용하는 함수는? url(”이미지경로”)
• 배경 이미지를 반복하지 않는 속성 값은? no-repeat이다.
• 요소가 스크롤 될 때 배경 이미지는 뷰포트에 고정되는 속성값은? fixed

 

📌느낀점

많은 것을 배웠다.

제일 인상깊은 것은 스타벅스예제와 같이본 어태치먼트 속성이었다.

나중에 응용한다면 멋진 웹어플리케이션을 만들 수 있을 것 같다.

---

⭕15. 배치 (1)

📌강의 정리

• 코드펜에서 해보다.
• html에서는 div컨테이너와 그 자식으로 아이템을 3개 만들어준다.
• css로 넘어가서 컨테이너는 300px와 로얄블루이다.
• 모든 아이템은 보더 4px 대쉬 레드이다.
• 3개의 아이템들이 각각 가로 세로 길이들이 다르다.
• postion: absolute이면 한글의 앞으로 가져오기 같은 기능을 사용하게 된다.
• 부모의 postion: relative;라고 하면 전체에서 자식요소들을 부모요소를 전체로 잡게 할 수 있다.
• postion은 요소의 위치 지정 기준이다.
• static은 기준이 없다.
• relative는 요소 자신을 기준으로 한다.
• absolute는 위치 상 부모 요소를 기준으로 한다. 이때 위치 상 부모 요소를 꼭 확인해야 한다.
• 우리가 무언가를 배치 할때는 기준을 잡고 배치해야한다.
• 이 기준을 잡는것이 postion속성이다.
• fixed는 뷰포트(브라우저)를 기준으로 한다.
• postion은 모두 음수를 사용할 수 있다.
• 속성 탑바텀레프트라이트, 그리고 z-index를 같이 속성으로 사용할 수 있다.
• top, bottom, left, right는 요소의 각 방향별 거리를 지정한다.
• 단위를 입력할 수 있다.
• postion속성의 relative는 요소 자신을 기준으로 배치한다.
• 2번째 요소를 기준으로 잡는다 하면 배치전 자리는 비어있게 되고 그 배치전 자리를 기준으로 top으로 30px left로 30px 기준으로 움직이게된다.
• 코드펜에서 2번째 아이템의 postion값을 relative해주면 변화가 없지만 top:30px left:200px를 해주면 배치 전 자기 자리 기준으로 배치되게 되고 배치 전 자리는 비어있게 된다.
• 이 비어있어보이는 것은 비정상적인 레이아웃으로 해석된다.
• 그래서 이 postion relative는 거의 없다고 봐도 무방하다.
• 즉 비어있는 위치에 있는 것이고 허상이 다른곳으로 배치된다는 개념으로 해석해야 한다.
• postion absolute는 배치에서 제일 많이 사용된다.
• 위치 상 부모 요소를 기준으로 배치한다.
• 세개가 주르륵 수직으로 배치되어있을때 앱솔르트를 하면 이제 1번과 3번과는 상호작용을 안하므로 1,3이 붙게 되고 2번은 붕 뜨면서 요소가 겹치게 된다.
• 앱솔르트를 쓰면 위치 상 부모요소가 뷰포트가 된다.
• 근데 top30px right30px하면 엉뚱하게 배치된다.
• 그러므로 부모 요소에 postion relative를 주고 해야 우리가 의도한대로 정상적으로 배치되게 된다.
• 이 위치 상 이라는 개념이 중요하다.
• 그렇다면 부모와 부모의부모가 있다면 어떻게 될까?
• 부모와 조상 둘다 relative를 하면 부모 기준으로 가게 되고
• 부모는 static을 하면 아이템은 조상을 기준으로 배치하게 된다.
• 즉 위치 상의 부모요소를 찾기위해 상위로 하나씩 움직인다.
• 만약 기준을 부모,조상까지 안되면 body까지가고 거기도 안되면 html, 그 이후에는 뷰포트를 기준으로 하게 된다.

📌느낀점

css에서 처음 맞이하는 어려운 내용이었다.

차근차근 들으면 이해가 되는 내용이었는데

강의를 들을때는 이해가 되지만 실제로 할때 쓸 수 있어야 한다.

잘 응용할 수 있도록 새겨들어야겠다.

---

⭕16. 배치 (2)

📌강의 정리

• 다시 완전 초기상태로 만들어주고 두번째 자식 아이템을 position: absolute; 해준다.
• 이러면 붕뜨는데 이때 bottom: 30px; right: 60px;를 해주면 이상하게 배치된다. 뷰포트기준.
• 이제 부모요소는 기본으로 포지션값이 스태틱으로 없다 생각하기 때문에 구조상의 포지션을 잡아주려면
• postion: relative를 해주면 된다.
• 이러면 2번째자식 아이템이 부모요소를 기준으로 배치되게 된다.
• 이제 이 컨테이너의 부모요소로 wrap을 만들어 준다.
• 이제 이 랩을 css에서 할때는 조상요소이므로 맨 위에 적어주고 postion은 relative를 해주고 컨테이너의 포지션을 지워주면 2번째 아이템은 조상을 기준으로 잡아주게된다.
• 이렇게 될때 정리하면 구조상의 부모요소에 위치상의 부모요소로 만들어주는 것이 좋고 이때 릴레이티브로 만들어주는 것이 좋다.
• fixed라는 요소를 사용하면 처음부터 2번째 아이템이 뷰포트(브라우저)를 기준으로 배치하게 된다.
• 이때 부모, 조상이 위치상으로 relative라도 fixed이므로 위치상의 부모기준이 있어도 다 무시하고 뷰포트 기준으로 배치하게 된다.
• 이렇게 하면 body태그를 선택자로 선택하고 height를 3000px하면 스크롤할때 쭉 내려도 뷰포트기준으로 고정되므로 웹페이지를 만들때 스크롤할때 계속해서 고정 시킬 수 있다.
• 요소 쌓임 순서(stack order)는 어떤 요소가 사용자와 더 가깝게 있는지 (위에 쌓이는지) 결정한다.

1. 요소에 postion 속성의 값이 있는 경우 위에 쌓임.(기본값 static제외)
2. 1번의 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에쌓인다.

• 코드펜으로 돌아와 보자. 릴레티브는 배치로는 쓰지않고 구조상의 부모가 위치상의 부모가 될때 쓴다.
• 이제 아이템들을 클래스선택자로 다 지정해주고
• 첫번째 자식은 릴레이티브로 두번째 자식은 앱솔로트로한다.
• 그러면 두번째 자식은 부모기준으로 왼쪽 50 오른쪽50 떨어져 배치된다.
• 우리의 눈에는 이제 1번과 2번이 겹치는 데 우리는 2번이 우리에게 가까워 보이게 된다.
• 왜냐면 2번은 앱솔르트라는 포지션을 가지므로 아무것도없는 3번보다 위에 쌓인다.
• 1번과 2번은 첫번째 조건은 같고 두번째 조건도 z-index가 없으므로 같다.
• 3번째 조건으로 보면 html상으로 2번째 조건이 더 나중에 쓰였으므로 2번째가 더 위에 쌓인다.
• 이때 첫번째에 z-index를 1로 해주면 첫번째가 2보다 더 위에 쌓인다.
• 이제 세번째에 z-index를 2로 주어도 세번째는 계속 밑에 있다. 왜냐면 첫번째 조건에서 이미 밀리기때문에 더이상 비교할 수 없는 상태이기 때문이다.
• 이때 세번째에 포지션값을 fixed로 주고 z-index가 1이면 세번째 조건으로 세번째가 더 위에 쌓일 수 있게 된다.
• 요소 쌓임은 항상 세가지조건을 순서대로 비교해야 한다.

 

📌느낀점

요소 쌓임에 대해 배웠다.

또한 전시간에 계속했던 배치에 관한것도 했는데

특히 구조상의 부모가 위치상의 부모가 될 수 있게

기준을 잡아준다는 개념이 나중에 조금 헷갈릴수 있겠구나 싶었다.

배치는 나중에 웹을 만들때 스크롤을 내려도 유지되는 메뉴들을 만들때 도움될 것 같다.

---

⭕17. 배치 (3)

📌강의 정리

• z-index는 요소의 쌓임 정도를 지정한다.
• 기본은 auto로 부모요소와 동일한 쌓임 정도이며 숫자가 높을 수록 위에 쌓인다.
• 이 지인덱스는 세번째기준으로 항상 쌓임법칙의 첫번째, 두번째 규칙을 비교하고 들어가야한다.
• 일반적인 요소보다 뒤에 쌓이게 하려면 음수를 쓰면 된다.
• 요소 쌓임에서 position: static;이면 요소쌓임에서는 키인덱스가 아무리 높아도 포지션없는걸로 취급되어 의미가 없다.
• 두번째 요소가 앱솔이고 지인덱스1이면 제일 위로 보인다.
• 3은 앱솔이고 지인덱스가 2이면 3번째 자식이 2보다 위에 쌓인다.
• 이 상황에서 첫번째가 포지션이 스태틱에서 릴레티브가 되면 지인덱스가 999이면 제일 위로 올라간다.
• 실제 프로젝트에서는 999같은 큰 숫자는 쓰지 않는 것이 좋다.
• 요소의 display가 변경된다. position 속성의 값으로 앱솔과 픽스드가 지정된 요소는, display속성이 block으로 자동으로 변경된다.
• 예를 들어 html에서 span으로 123이 적혀있다면 이는 인라인 요소이지만 position을 absolute나 fixed를 하면 자동으로 display에 block속성을 가지게 된다.
• 이걸 알게되면 포지션을 가지게 되면 굳이 디스플레이값이 블럭으로 바뀜을 알 수 있다.
• posotion속성의 기본값은 static이다. 없는것과 동일
• 위치상 부모요소를 기준으로 배치하는 position속성의 값은? absolute는 위치상의 부모를 잡겠다는뜻
• 뷰포트를 기준으로 배치하는 position속성의 값은? fixed
• display속성이 block값으로 바뀌지 않는 position속성의 값은? relative이다.

 

📌느낀점

배치에 대해 마지막 시간이었다.

쌓임규칙과 앱솔이나 픽스드가 지정되면 display값으로 block을 안줘도 block값이 된다는 것을 알게 되었다.

---

⭕18. 플렉스(정렬) Container (1)

📌강의 정리

• 플렉스(정렬)은 1차원 레이아웃인데 우리는 수직으로 쌓는데
• 우리가 레이아웃을 쌓을때는 x축, y축이 차원이다.
• div로 부모 컨테이너와 아이템이 자식으로 3개 있다.
• div로 대표되는 블럭요소들은 수직으로 쌓이는 성질을 가지고 있다.
• 이때 수평으로 정렬하고 싶다면 컨테이너요소에 display값을 flex값을 주면 된다.
• 디스플레이값을 flex로 주면 flex container와 flex item이라는 개념을 생각해 봐야 한다.
• flex를 주면 flex container가 되고 이 자식들은 플렉스 아이템이 된다.
• 이 개념이 필요한 이유는 플렉스 컨테이너에 주는 속성과 플렉스 아이템에 주는 속성이 다르기 때문이다.
• display는 flex container의 화면 출력(보여짐)특성이다.
• flex는 블록요소와 같이 flex container를 정의한다.
• inline-flex 인라인 요소와 같이 플렉스 컨테이너를 정의한다.
• 파란색 박스들이 플렉스 컨테이너들이다.
• 플렉스컨테이너들이 수직으로 쌓이면 그게 블럭요소이다.
• 하지만 디스플레이가 인라인플렉스이면 파란색박스들이 수평으로 쌓이게 된다.
• flex-direction은 주 축을 설정한다.
• 기본값은 row로 행 축(좌 ⇒ 우)이다.
• row-reverse는 행 축 (우 ⇒ 좌)로 할 수 있다.
• 간단히 얘기하면 수평정렬할것이냐 수직정렬을 할것이냐 차이이다.
• column은 수직개념이다.
• row,행 은 수평을 의미하는 개념이다.
• column,열 은 수직을 의미하는 개념이다.
• 디스플레이는 플렉스이고 플렉스 디렉션이 row이면 기본값으로 왼쪽에서 오른쪽 row-reverse이면 우에서 좌로 간다.
• row는 수평이 main-axis이고 y는 교차축으로 cross-axis라고 말한다.
• row는 주축의 왼쪽이 시작점 오른쪽이 끝점이다.
• 반대로 row-reverse는 오른쪽이 시작점 왼쪽이 끝점이다.
• 시작점은 start 끝점은 end이다.
• flex-direction이 column이면 위에서 아래로 온다. 이때 column-reverse이면 아래에서부터 위로 쌓이게 된다.
• column은 수평이 교차축이며 수직축이 주축이다.
• 윗면이 시작점 아랫면이 끝점이다.

 

📌느낀점

지금까지 간간이 나왔던 용어인 플렉스가 나왔다.

플렉스가 나옴으로써 css가 좀 더 편해졌다는데

수평으로 쌓는다는 것에서 분명 편리한 기능인 것 같다.

좀 더 잘 배워야겠다.

---

⭕19. 플렉스(정렬) Container (2)

📌강의 정리

• flex-wrap은 flex items 묶음(줄 바꿈)여부이다.
• 기본은 nowrap으로 묶음(줄바꿈)없음이고
• wrap이면 여러줄로 묶는다는 뜻이다.
• display가 flex이다. 이때 이후로 아무값없으면 nowrap이고 이는 요소들이 정사각형이 아닌 찌그러진 직사각형으로 나온다.
• 이때 flex-wrap: wrap;을 해주면 수평정렬하다 줄바꿈을 하게 해준다.
• 아이템을 5개 만들어주고 부모인 컨테이너의 가로너비를 줄이면 아이템들이 찌그러든다.
• 이때 flex-wrap을 wrap해주면 자동으로 줄바꿈이 된다.
• justify-content는 주 축의 정렬 방법이다.
• 기본값은 flex-start flex items를 시작점으로 정렬한다.
• flex-end flex items를 끝점으로 정렬한다.
• center는 가운데 정렬이다.
• 쉽게 설명하면 수평정렬이다.
• align-content는 교차 축의 여러 줄 정렬 방법이다.
• 기본값은 flex item을 시작점으로 정렬한다.
• 플레스 스타트는 플렉스 아이템을 시작점으로 정렬한다.
• 플렉스 엔드는 끝점으로 정렬한다.
• 센터는 가운데 정렬이다.
• 쉽게 설명하면 수직 정렬이다.
• 플렉스의 대표적인 특징으로 만약 아이템의 헤이트값을 주지 않는다면 최대한 늘어나려 한다.
• 하지만 높이값을 주면 위쪽으로 최대한 붙으려 한다.
• 이때 얼라인 컨텐트를 안주면 띄어져서 나오게 된다.
• 얼라인 컨텐트는 여러줄이 있어야 두줄이상이어야 동작을 한다.
• 또한 두줄이려면 플렉스렙이 렙이어야하고 여백또한 있어야 한다. 얼라인 컨텐트는 잘 안쓰인다.
• align-items는 교차축의 한줄 정렬 방법이다.
• 얼라인 컨텐트와 값들이 같다. 단지 한줄을 한다는 점이 다르다.
• 여러줄이라면 얼라인 컨텐츠가 좋고 한줄이면 얼라인 아이템이 좋다.
• 실제 코드펜에서 봐보자.
• 부모 요소에서 flex를 주어 수평요소로 만들어주고 가로500세로300
• 이때 주축의 정렬방식을 바꿔주려면 저스타파이 컨텐트의 값을 플렉스 엔드라는 값을 주면 된다.
• 저스티파이 컨텐츠를 센터로 주면 가운데 정렬이다.
• 얼라인 아이템스를 플렉스 스타트를 주면 달라지는 건 없지만 위로 정렬되게 된다. 이때 엔드로 바꾸면 수직 끝점으로 정렬된다.

 

📌느낀점

css에서 배치와 플렉스라는 속성이 매우 중요하다라는 것을 느끼고 있다.

이 두가지가 은근 복잡하면서도 어렵기때문에 가장 잘 이해해야하는 부분인 것 같다.

---

⭕20. 플렉스(정렬) Items

📌강의 정리

• 이 정렬요소가 컨테이너에 다 들어가있다.
• 이제는 플렉스 아이템들에 부여해주고자 한다.
• flex-grow는 얼마나 늘어나게 할지 비율을 적어줄수 있다.
• 자식들중 첫번째와 두번째는 플렉스 그로우를 1로 세번째는 2로 주면 첫번째와 두번째는 1이지만 세번째는 2로 갱신을 해서 세번째가 증가했음을 알 수 있다.
• 아이템에 부여해주는 플렉스 그로우나 아이시스 같은걸 배워보자.
• order는 flex item의 순서를 의미한다. 숫자가 작을수록 우선된다.
• 아이템들이 순서대로 쌓이지만 모든 order가 0인 상태에서 C가 오더값이 -1이면 c가 제일 먼저 앞으로 오게 된다.
• E는 오더값이 2이면 CADE가 된다. -1002 마지막 B는 17이면 제일 나중에 나오게 된다.
• 오더의 장점은 HTML을 바꾸지 않고도 순서를 변경해줄수 있다.
• flex-grow는 flex item의 증가 너비 비율을 바꿔줄 수 있다.
• 숫자로 증가의 비율을 바꿔준다.
• 첫번째에만 플렉스 그로우를 1을 주면 나머지는 기본값0이다. 이러면 비어있는 공간을 채울때 어떤비율로 채울까이다.
• A가 1이고 나머지는 0이므로 남은 공간은 A가 다 채운다.
• BC가 21이면 나머지 영역을 B와 C가 2:1로 차지한다.
• flex-shrink는 flex item의 감소 너비 비율이다.
• 3개의 아이템을 봐보자. 컨테이너가 수평축으로 조금 남는다. 이때 컨테이너 가로너비가 줄어들면 ABC가 점점 찌그러진다.
• 이때 플렉스 쉬링크값은 기본적으로 1이라 다같이 줄어드는데 만약 이 값을 0으로 해주면 컨테이너가 줄어들어도 아이템은 줄어들지 않는다.
• flex-basis는 flex item의 공간 배분 전 기본 너비이다.
• 기본값은 요소의 content너비이다.
• 단위로 px,em,rem으로 바꿀 수 있다.
• 플렉스 베이시스가 기본 auto이면 플렉스그로우가 1이면 컨텐츠 영역은 기본적으로 차지가 되고 남은 너비들을 플렉스 그로우의 비율로 1대1대2로 나눠주는 것이다.
• 이건 마냥 되지 않는데 컨텐츠의 값이 적용되기 떄문이다.
• 이때 컨텐츠 값에 영향 받지 않으려면 플렉스 베이시스를 0으로 해주면 기본컨텐츠내용에 영향받지 않고 너비를 나눌 수 있다.
• 첫번쨰와 두번째는 플렉스그로우가 1, 배이시스는 100px인데 이러면 가운데에 100px만큼의 공간들이 있고 나머지 공간을 1대1대2로 해주는것이다.
• 그래서 보통은 플렉스 베이시스는 0으로 해주는 경우가 많다.
• display: flex;에서 아이템이 자식요소이다.
• 플렉스 컨테이너의 투축을 지정하는 속성은 플렉스 디렉션이다.
• 플렉스 랩속성의 기본값은? nowrap이다.
• 교차축(cross-axis)의 한 줄 정렬을 위한 속성은 얼라인 아이템이다.
• 플렉스 아이템의 증가 너비를 지정하는 속성은 플렉스 글우이다.
• 플렉스 그로우 속성의 기본값은? 0이다.
• 플렉스 쉬린크 속성의 기본값은? 1이다. 즉 감소너비의 비율이 있는것이 기본값이다.

 

📌느낀점

플렉스를 마치는 데 항상 느끼지만 기본이 중요하다는 점과 그 기본을 바탕으로 개념을 이어간다는 생각이든다.

css의 수많은 속성들을 예제와 함께 잘 이해해야 겠다.