제인초의 개발 일기 제인초의 개발 일기

CSS

• aside를 포함한 wrapper 작업 시

  CSS 2022. 11. 29. 10:23

  왼쪽 aside 화면 밑으로 100% 내리려면 float: left 말고, position: absolute; 사용하기 .left-container{ Position:absolute; Width: 354px; Height: 100%; Min-height: 100vh; Background-color: #fff; } .right-container{ Width: 1086px; Margin-left: 354px; }

  Read More
• 100vh 계산법

  CSS 2022. 11. 29. 10:20

  .wrapper { min-height:100vh; background-color:#f4f5f6; .contents {min-height:calc(100vh - 238px);} } — header 사이즈랑 footer 사이즈 더한 값을 100vh 에서 뺀 값을 컨텐츠로 잡기

  Read More
• 버튼 기본 , active 활성화 했을 때 상태

  CSS 2022. 11. 29. 10:18

  a.accordion-btn { position:relative; display:block; &:after { content:''; position:absolute; display:block; width:24px; height:24px; top:50%; right:20px; transform: translateY(-50%) rotate(0deg); -webkit-transition: all 0.5s ease; transition: all 0.2s ease; background:url(../../assets/images/arrow-down.svg) no-repeat center; } &.active { &:after { transform: translateY(-50%) rotate(-180deg); -we..

  Read More
• focus-within

  CSS 2022. 11. 28. 18:35

  .project-description:focus-within { border: 1px solid #ffffff; }

  Read More
• 테이블 각 행에 색을 따로 넣을 때

  CSS 2022. 11. 28. 17:12

  active라는 클래스를 가진 tr 안에 td들의 행에 색 입힌다. tr.active td { background-color: #f9f5f5; color: #ea5d5d; } 2020.03.06 16:32 2020.03.06 16:32 자동보정 실행 ‘LINUX NGS7(내부) (172.16.10.11)’ 외 7개 장비, 8개의 자동보정 실행중 3/5

  Read More
• 행의 배경색을 번갈아 넣기

  CSS 2022. 11. 28. 17:12

  tr:nth-child(2n+1) td { background-color: #f9f9f9; } tr:nth-child(2n) td { background-color: #fff; }

  Read More
• 반응형 폰트

  CSS 2022. 11. 28. 17:09

  반응형 만들 때 body에 font-size=“100%” font-wieght은 normal -webkit-text-size-adjust:100%; text-size-adjust -> 브라우저의 텍스트 크기 조절(핸드폰 화면크기에 따라서 알아서 조절) 출처: https://demun.tistory.com/2402 [demun(대문블로그)]

  Read More
• flex 기능 해지 - flex-direction: column;

  CSS 2022. 11. 28. 17:05

  .flex-col{ flex-direction: column; }

  Read More