.item::before {content: "내용"; }
라는 코드가 있는데 이는 아이템 요소 앞에 내용이라는 글자를 모두 붙일 때 쓰인다 before가 아닌 애프터 등의 위치 코드를 입력해주면 원하는 위치에 내용을 모두 넣을 수 있다
마우스를 대는 부분이 좀 더 어두운 효과를 주기 위해서 아래의 코드를 참고해야한다 item 영역의 옵션들에게 동시적으로 주려면 프슈드 엘리먼트 효과를 줘야하는데
/* pseudo element */
.item::after {
content: ""; / content는 꼭 써줘야 하며 내용이 없어다도 ""는 꼭 넣어줘야함
width: 100%; 색상이 바뀌는 영역을 표시하는 것인데 보통은 영역의 100%로 설정함
height: 100%;
position: absolute; 포지션은 앱솔루트로
left: 0;
right: 0;
}
.item:hover::after{ 마우스를 올렸을 때 효과를 입력해줌
background-color: rgba(0, 0, 0, 0.5);
transition은 얼마나 부드럽게 자연스럽게 효과가 주어지냐를 조절 할 수 있는 코드!
hover은 마우스를 올렸을 때 active는 클릭 했을 때
.item:hover: / .item:active:
위에 검색 하는 박스를 그리기 위해선 intput이라는 태그를 입력해야한다
<input type="text">
인풋 박스에 글씨를 써주려면 인풋 코드 뒤에 플레이스 홀더 라는 코드를 써주고 ""사이에 내용을 입력하면됀다
<header class="search"><input placeholder="search" type="text" ></header>
인풋 박스 검색창에 검색을 하려고 클릭을 했을 시 밝기가 밝이지는 효과를 낼 수 있는 아래의 코드!
input:focus {
outline: transparent;
background-color: rgba(255, 255, 255, 0.12);
transition: 0.2s; 역시 자연스러운 효과는 트랜지션이 기본이다!
}
inline-block의 단점은 인라인 블록자체가 글 줄을 뜻해서 개체 사이의 간격이 자동으로 설정된다
폰트 사이즈를 0으로 만들고 인라인 블록을 해줘야 사이 간격이 사라진다
작업하다 보면 width 값보다 마진 + 사진의 크기가 커서 원하는 정렬이 안나올 수 있다
그럴땐 ex)5 50% - 16px 이렇게 입력해서 적용이되면 좋겠다면 그렇게 돼지 않으니 밑의 방법을 사용해 보자
width: calc(50% - 16px); 퍼센트에서 픽셀을 뺄 수 있는 코드입력 방법이다