- 웹카페 만들면서 배우는 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) {
}
/* 교육과정 정보 테이블 */
.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)은 같은 결과를 나타냄
static
relative
absolute
일반적인 흐름을 벗어나 레이어처럼 다른 요소 위에 겹쳐 배치되는 방식 이때 위치 지정은 relative
와 동일하게 offset 관련 속성에서 지정한 만큼 이동
자신과 가장 가까운 컨테이닝 블록 중에서 포지션이 스테틱이 아닐걸 기준으로 삼음
fixed
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
사용