top: 50%;left: 50%;transform: translate(-50%, -50%); 흔히 가운데 정렬을 할 때 많이 사용한다.뭔가 가운데 정렬이라 하면 뭔가 저 top: 50% left: 50%만으로 될 것 같아 보였다.(잘 모르는 나의 기준으로 봤을 때)그런데 왜 가운데 정렬을 하고자 할때 매번 translate -50%, -50%가 쓰였다.이 부분이 이해가 바로 되지 않아서 정리한 글 left: 50%를 적용하면 부모의 크기를 기준으로 적용된다.부모 크기의 50%지점으로 사각형이 이동한 것을 볼 수 있다. transform: translate(-50%, 0);을 적용하면-50% : 왼쪽으로 본인의 크기의 50%만큼 이동- 50%이 아니라 50%였다면 오른쪽으로 이동위 사진과 비교했을 때 ..

1. Unsplash https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 무료 이미지 사이트 2. fontawesome https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 3. Bootstrap https://getb..

1. Margin 마진을 한번에 입력할 때 순서 margin: top right bottom left; margin: top-bottom right-left; 2. 상대경로 입력 . 현재 파일이 위치한 경로 (현재 파일은 ./생략가능) .. 이전경로 or 상위경로 3. float (clear: both;) 가려져서 안보일땐 clear: both;를 입력하자 왜 써야하는가? float는 속성이 상속되어 다음 요소에게 영향을 준다. 다음 요소가 이전 요소를 밀고 올라오는데 그때 clear: both; 를 쓰면 이러한 현상을 막을 수 있다. 4. html로 할 수 있는 간단한 유효성 검사 대부분의 유효성 검사는 js로 진행하지만 html에서 간단하게 처리할 수도 있다. required 빈칸 체크, minlen..