[첫번째 프로젝트] 팀원 소개 페이지 만들기4

굉장히 많은 일이 있었고.. 머릿속에 남는것은.. 챗지피티는 위대하다.. 우리 팀원들은 모르는게 없다...

 

우선 조구만 나의 뇌속에 들어온 새롭게 알게된 것을 정리해보자면 

 

처음 접해보는 몇몇 CSS 속성

flex-shrink: 0;
// 고정 폭 사용

resize: none;
// 사용자가 요소의 크기를 조정할 수 없게 만든다.

z-index: 999
// 화면이 앞으로 나오는 값. x축은 가로, y축은 세로, z축은 화면 앞에 있는 유저를 향하는 방향

flex-wrap: nowrap;
// flexbox는 공간이 부족하면 요소들을 다음 줄로 넘기지만, 
nowrap을 사용하면 한 줄에 모두 배치되고 넘치더라도 줄을 바꾸지 않는다

height: calc(100vh - 104px);
// calc() 함수를 사용해 100vh화면 전체 높이에서 - 104px만큼 뺀 값

float: right;
// 해당 요소를 부모 컨테이너 내에서 오른쪽으로 배치하는 역할. 
다른 인라인 요소나 텍스트가 그 왼쪽에 배치될 수 있다.

 

 

날 너무나 어렵게 했던 말풍선 모양 만들기!!!!!

#menu1::after{
  content: ""; // ::after와 같은 가상 요소(pseudo-element)와 함께 사용됨. 
  어떤 요소의 앞이나 뒤에 콘텐츠를 추가할 때 사용. -> 빈 문자열을 의미, 실제로 눈에 보이지 않지만
  가상 요소를 추가하여 스타일링 할 수 있다. 
  
  position: absolute;
  top: -19px; /* 삼각형 위치 조정 */
  right: 21px; /* 위치 조정 */
  
  border-width: 10px; // 테두리의 두께가 10px /* 삼각형 크기 */ 
  
  border-style: solid; // 테두리 스타일을 실선으로 함
  
  border-color: transparent transparent white transparent; /* 아래로 향하는 흰색 삼각형 */
  //이 부분이 윗쪽에 보이는 삼각형에 해당함
  
  display: block;
}

#menu1::before {
  content: "";
  position: absolute;
  top: -21px; /* 회색 테두리 삼각형이 약간 더 위로 */
  right: 20px; /* 위치를 흰색 삼각형과 맞춤 */
  border-width: 11px; // 아래로 들어갈 회색 삼각형의 크기가 더 커야 앞쪽 삼각형이 보임
  /* 회색 테두리 크기를 조금 더 크게 */
  
  border-style: solid;
  border-color: transparent transparent #ddd transparent; /* 아래로 향하는 회색 삼각형 */
  //이 부분은 아래쪽에 깔리는 삼각형 테두리 부분에 해당함
  
  display: block;
}

원래는 네모난 팝업 버튼이 말풍선 모양이 되었다!!! 꺄아아아ㅏㅏㅏ 

역시 우리 팀원들 짱👍👍👍👍

 

배운건 넘넘 많지만... 내 머릿속에 들어온것부터 차근차근 해 나가자...