23.6.7 TIL

강의 내용

• 웹카페 만들면서 배우는 CSS
  position
미디어쿼리
테이블과 폼

시멘틱 태그에서 하나로 묶을때 자주 사용하는 이름 - wrapper, group, container

🧷검색창 마크업

<!-- 보통 GET 방식으로 만들어야 하지만 연습용으로 POST -->
      <form action="https://formspree.io/f/xeqwwbwk" method="POST" class="searchForm">
        <fieldset>
          <legend>검색 폼</legend>
          <div class="searchForm__group">
            <!-- label과 input을 묶을 용도로 div 사용  -->
            <div class="formInput">
              <label for="search" class="a11yHidden formInput__label"></label>
              <!-- required 필수요소라고 알려줌 빈칸이면 값이 전송되지 않음 -->
              <input type="search"  id="search" name="search" required class="formInput__input" placeholder="검색어를 입력하세요."/>
            </div>
            <button type="submit" class="button button--primary button-fill">검색</button>
          </div>
        </fieldset>
      </form>

  border-radius: 8px 0 8px 0;

border-radius로 곡선처리를 할 수 있음

---

border-radius: 8px 0 8px 0/ 16px 0 16px 0;

.button {
  border: 0;
  border-radius: 0.25rem;
  height: 2rem;
  padding: 0.125rem 0.75rem;
  background: transparent;
}

.button--outlinePrimary {
  color: var(--primary-color);
  border: 1px solid currentColor;
}
.button--outlineSecondary {
  color: var(--secondary-color);
  border: 1px solid currentColor;
}

currentColor - color 값이 없다면 상속 받은 컬러 적용

.button {
  border: 0 solid currentColor;
  border-radius: 0.25rem;
  height: 2rem;
  padding: 0.125rem 0.75rem;
  background: transparent;
}

/* border가 상속되어 width값만 줘서 위와 같은 결과를 만들어낼 수 있음 */
.button--outlinePrimary {
  color: var(--primary-color);
  border-width: 1px;
}
.button--outlineSecondary {
  color: var(--secondary-color);
  border-width: 1px;
}

---

🧷미디어쿼리

웹 페이지의 뷰포트 크기나 장치의 특성에 따라 스타일을 동적으로 변경하거나 특정 스타일을 적용하는 데 사용

/* 모바일 디바이스 320px~767px까지*/
@media (min-width: 320px) and (max-width: 767px) {
  /* 모바일 헤더 */
  .appHeader{
    color: var(--white);
    background: var(--primary-color);
  }
}

 /* 데스크탑 디바이스 768px~*/
 @media (min-width: 768px) {

 }

🧷테이블과 폼(Table & Form)

/* 교육과정 정보 테이블 */
.lecture__table {
  width: 100%;
  background-color: #fff;  
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  /* border-collapse 속성이 separate로 설정되어 있을 때 적용 */
   
  /* border-spacing 속성은 
	테이블의 셀 사이에 공간을 추가하거나 감소시킬 수 있음 
	셀 간격은 가로 및 세로 방향으로 모두 동일하게 적용됨 */ 
  border-spacing: 0;
  
  /* 셀 사이의 빈공간을 없애주는 코드 */
  border-collapse: collapse;
  position: relative;
  top: -10px;
  left: -10px;
}
.lecture__table th {
  text-align: left;
}

border-spacing(CSS)과 cell-spacing(html)은 같은 결과를 나타냄

🧷position

static

• position의 기본값
• 일반적으로 다른 요소와의 상대적인 위치를 변경하는 데 사용되지 않고
  top, right, bottom, left와 같은 위치 속성이나 z-index와 같은 쌓임 순서 속성도 적용되지 않음
• 요소는 문서의 일반적인 흐름에 따라 자연스럽게 배치 다른 요소와 겹치지 않고 쌓이지 않음

relative

• 일반적인 요소의 흐름 순서에 따라 배치되지만, 본래 위치를 기준으로 offset 관련 속성으로 지정한 위치만큼 이동하여 배치

absolute

• 일반적인 흐름을 벗어나 레이어처럼 다른 요소 위에 겹쳐 배치되는 방식 이때 위치 지정은 relative와 동일하게 offset 관련 속성에서 지정한 만큼 이동

• 자신과 가장 가까운 컨테이닝 블록 중에서 포지션이 스테틱이 아닐걸 기준으로 삼음

fixed

• Viewport를 기준으로 offset 관련 속성에서 지정한 만큼 이동하여 배치

Sticky

• relative와 fixed의 배치를 섞어 놓은 것처럼 동작

.appHeader {
  position: relative;
  padding: var(--spacing-base) var(--spacing-lg);
}
/* 공통 로고 */
.logo {
  background-color: salmon;
  width: 12.75rem;
  height: 3.75rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

absolute-absolute 도 가능하지만 그렇게 하면 전체적인 레이아웃이 많이 망가지기 때문에 대체로 relative-absolute 사용