html ・ css

HTML CSS 8일 완성하기 : 5일차 CSS 예제 만들기

HYEMBURGER 2023. 2. 9. 21:05

 

 

 

 

 

 

 

 

 

신나는 5일 차! 강의는 여기

오늘은 정말 재미있었다 ... 역시 직접 만들어보는 게 제일 재미있다.

그동안 배웠던 것, 추가로 알려주는 것들을 활용해서 여러 가지 예제를 만들어보는 섹션이었다.

 

내일부터는 마지막 프로젝트 만들기 섹션만 남았다.

목표인 12일까지. 파이팅!

 

오늘 예제를 만들면서 새롭게 알게된 것들을 간단히 기록하겠다.

양이 많지는 않을 것 같다.

 

 

 

 

 

 

 

✨ 이건 기억하자! 모음집 ☝🏻

  • 컨테이너 안에 나란히 줄 서 있는 요소가 있다. 서로 붙어있는 부분에 여백을 주고 싶다면, margin 보다는 gap을 기억하자!
  • border-radius 팁. width와 height가 같은 값이라면 (정사각형!) 50%로 설정했을 때 원이 된다.
  • 정렬할 때 가장 큰 힘을 발휘하는 flexbox. 이리저리 활용해 보자.

 

  • absolute인 요소(1) 👉 top, bottom, left, right (부모 요소를 기준으로 이동한다)
  • absolute인 요소(2)  👉 transform: translate(x좌표, y좌표); (당사자(?) 요소 기준으로 이동한다)
  • absolute인 요소 가운데 정렬하기🧑‍💻 50%인 위치로 이동하라고 써도 가운데 정렬된 것처럼 보이지 않는다. 왜냐하면 가운데에 딱! 자리하는 게 아니라, 그 위치부터 요소가 시작된다는 의미로 받아들이기 때문이다. 이럴 때는 transform: translate()를 추가로 사용해 원하는 곳으로 이동해 준다.
  • 왜 flexbox가 아니라 굳이 absolute를 사용하는 걸까❓ 결론적으로, flex item이 되는 걸 원하지 않기 때문이다. 즉 flex box 안이 아니라 그 밖에 위치하길 원할 때 absolute를 사용해 위치를 이동시킨다.

 

  • table 요소 👉 레이아웃을 배치하는 데에는 flexbox, grid가 생기고 그쪽으로 변경되었다 생각하면 되지만 표를 이용해 나타내는 데이터셋의 경우에는 아직 가장 의미 있는 방법으로 쓰인다.
  • table 요소(2) 👉 
<thead> - 테이블 상단
<tr> - table row
<th> - table head		 <th> -table head <th> - table head
<tbody> - 테이블 하단
<tr> - table row
<th> - table head		 <td> - table data  <td> - table data 
<tr> - table row
<th> - table head		 <td> - table data  <td> - table data 
  • table 요소 팁(1) 👉 border-collapse : collapse (경계를 없애준다! 겹쳐지는 줄이 있다면 합쳐서 붕괴~)
  • table 요소 팁(2) 👉 짝수행, 홀수행 색상을 다르게 하고 싶다!? tr:nth-child(odd/even)을 활용해 보자 >_<

 

  • . 클래스이름:의사 클래스.(클래스이름 요소의 자식) 클래스이름 >. 클래스이름 요소가 의사 클래스 상태일 때, (클래스이름 요소 자식의) 클래스이름 요소에게 스타일을 적용한다.
  • 예를 들어, 버튼 요소 안에 들어있는 아이콘 요소. 버튼 요소 hover일 때 stroke 선을 바꾸고 싶다. 어떻게 해야 할까! 👉 button:hover (button의 자식) 요소 { 적용할 스타일 }
  • . 클래스이름. 클래스이름 (이름 사이에 공백 없음) 👉 두 클래스 이름이 모두 들어가 있는 요소에 스타일 적용

 

  • vh❓vh는 풀어서 말하면 viewport height. 즉, 100vh 일 경우 뷰포트 전체를 말한다. 
  • 백그라운드 이미지에 색상 필터(?)를 씌우고 싶다면 linear-gradient! 👉 background-image: linear-gradient(그러데이션색상 1, 그러데이션색상 2), url(이미지주소); ‼️앞쪽일수록 보다 위(앞)에 쌓인다. 

 

  • overflow: scroll;  👉 컨테이너 안의 요소가 지정한 컨테이너 너비나 높이를 벗어나면 스크롤을 만들어낸다. (hidden인 경우에는 벗어난 아이템은 그대로 잘리거나 해서 보이지 않게 된다!)
  • TIP ✨ flexbox인 경우 안의 flex item들은 박스에 맞춰 줄어든다. flex-shrink의 기본값이 1이기 때문이다. (요소의 너비나 높이에 맞춰서 줄어들어 맞춤) flex-shrink를 0으로 설정하면 줄어들지 않게 되어 원하는 스크롤 박스(?)를 얻을 수 있다!

 

  • html에서 <nav>는 전형적인 사이트 탐색용이다. 보통 링크를 포함하고 앱 안의 다른 장소를 가리킨다.
  • <menu>는 응용 프로그램에 있는 메뉴 버튼 같은 느낌으로 이해하자.

 

  • 인상 깊었던 부분을 가져왔다. 다섯 개의 버튼이 있다. 이 버튼을 위 이미지에 보이는 위치처럼 설정하고 싶다. 어떻게 해야 할까? 
  • 🧑‍💻 무조건 예제는 먼저 만들어보는데, 난 div로 네 개를 감싸는 형식으로 만들었었다. 물론 코드에 답은 없다지만(?) 강의자가 선택한 방법은 정말 인상 깊었다. 일단 div로 감싸지 않는다. 다섯 개의 버튼은 형제요소인 상태로 놔둔다. 버튼의 마지막 요소이기도 한 trash 버튼에 :last-child를 사용해 접근하고 색상을 바꾸고, margin-left:auto를 사용했다(!!) 
  • margin-left: auto;❓처음에는 이해가 안 됐었는데 MDN과 margin: 0 auto;로 중앙정렬을 하던 것이 생각나 이해할 수 있었다. 사용하지 않은 가로축 여백을 사용해 양 옆을 auto로 두면 반반씩 사용해서 중앙정렬을 한다고(?) 이해했는데 만약 양쪽이 아니라 한쪽만 사용한다면 반대쪽으로 쭉 붙어서 나머지 (여기서는) 왼쪽 여백을 모두 자신의 margin으로 사용하는 것이다!! 그래.. 나만 이해할 수 있으면 됐지... 갑자기 설명 능력에... 현타가 오지만...하여튼 그렇게 이해할 수 있었다 ^_ㅠ

 

 

 

 

 

 

 

5일 차 후기 🍔

확실히 그동안 중요한 것들은 이미 강의가 끝났고, 작은 팁들이나 새로운 속성을 알려주는 식이라 기록 양은 상당히 줄었다.

예전에는 만들고 싶은 게 있어도 이걸 어떻게 허접하지 않게 만들어내는가... 에 감이 전혀 잡히지 않았는데 꽤나 실용적인 예제들을 만들어보니까 기본적인 건 확실히 내 안에서 틀이 잡힌다는 느낌이 든다. 

위에서 말했었지만 이제 마지막 프로젝트를 만들어보는 것만 남았다. 얼른 만들고 싶다! 새삼 코드를 직접 짜보는 게 가장 재미있다는 걸 느꼈다. 내일도 신나게 할 수 있을 거 같다 >_< (막히면 짜증 나겠지만...) 

그럼 내일 다시 돌아오겠다 아듀~ 🤸🏻