태그는 해당 문서에 대한 메타데이터를 정의할 때 사용한다. 요소 안에서 사용하며 viewport, description 등의 속성값을 제공한다. 종류 keyworld : 검색 엔진을 위한 keyworld 정의 description: 웹 페이지에 대한 설명 author : 문서의 저자 정의 viewport: 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트 설정 💡 HTML에서는 태그를 닫지 않지만, XHTML에서는 다음과 같이 반드시 태그를 닫아야만 한다. 출처: http://www.tcpschool.com/html-tags/meta 노션 : https://hilarious-guavaberry-f4d.notion.site/HTML-tag-meta-3e99628da8af43e3a88a5ac20468aede

이번에 새로 들어가는 프로젝트에서 Tailwind css를 사용하기로 하여 공부를 시작했다. Tailwind CSS 란? CSS 프레임워크 중 하나로 클래스명을 사용하여 스타일을 적용하는 방식으로 사용한다. Hello world! 이런 식으로 Style 태그를 사용하지 않고 class 속성에 스타일을 지정한다. 장점 별도의 css 파일을 생성하여 연결해주지 않아도 된다. 스타일을 지정하는 데 사용하는 코드의 길이가 짧아진다. ⭐클래스 이름을 고민할 필요가 없다. (이건 너무 큰 장점이라고 생각함) 반응형 스타일을 구현하기 쉬워진다. 단점 class 속성에 여려 스타일을 지정하면 HTML 코드가 지저분해진다. (개인적으로 이게 너무 거슬림) class 속성 속 여러 코드를 익히는데 시간이 걸린다. (css..

px 웹에서 사용되는 기본적인 크기 단위, 고정된 값이다. rem html 태그의 크기를 기준으로 배수에 해당하는 크기를 가지는 단위 em 부모 요소의 크기를 기준으로 배수에 해당하는 크기를 가지는 단위 em은 부모 요소에 10px의 폰트 사이즈가 적용되어 있다면 1em은 10px이다. 2em은 20px이 된다. rem은 html 태그의 크기에 영향을 받기 때문에 기본 16px로 적용되어 있다면 1 rem은 16px이 된다. 웹을 개발할 때 px보다 em/rem을 사용하는 이유 고정적인 px값은 사용자의 화면 해상도에 따라 다르게 표현될 수 있다. 따라서 사용자가 설정한 크기에 따라 요소가 적절하게 반응하기를 원한다면 px보다는 rem을 사용하는 것이 좋다. vw vw는 화면의 가로 크기와 관련 있다. ..

그동안의 프로젝트는 주로 hex 코드 위주로 작업을 해왔는데 이번 프로젝트는 유독 rgb 색상으로 작업을 해서 rgb와 rgba의 차이를 정리해보았다. 색상 표현 방식 Hex 코드 단위 : #000000 RGB 색상 : rgb(red, green, blue) RGBA 색상 : rgba(red, green, blue, alpha) rgb와 rgba의 차이 점 rgb는 빨간색, 녹색, 파란색의 약어이다. 이 rgb 값에 alpha(=투명도) 값을 추가한 것이 바로 rgba이다. 투명도는 음수가 아닌 0~1 까지의 값으로 0에 가까울수록 투명해진다. 투명도의 경우 opacity를 사용하여 적용 가능하나 이는 자식 요소까지도 영향을 준다. 때에 따라 적절히 사용하며 된다.

-webkit-autofill 브라우저마다 차이가 있지만 chrome의 경우 자동완성 시 배경의 색상이 변한다. 이 배경색을 원하는 색으로 지정하거나 없는경우 chrome input background color 변경 .option_wrap .option_label input:-webkit-autofill, .option_wrap .option_label input:-webkit-autofill:hover, .option_wrap .option_label input:-webkit-autofill:focus, .option_wrap .option_label input:-webkit-autofill:active{ -webkit-box-shadow: 0 0 0 30px white inset !important..

유효성 검증이란 사용자가 입력한 데이터가 올바른 형식인지 확인하는 것이다. 즉, 데이터가 서버 혹은 데이터 베이스에 저장되기 전 데이터를 검증하는 것이다. Form validation을 사용하는 이유 사용자가 적절한 형식의 데이터를 입력하였는지 확인하기 위해 사용자의 정보를 보호하기 위해 애플리케이션을 인증되지 않은 데이터로부터 보호하기 위해 클라이언트 측 유효성 검증 방식 기본 제공 유효성 검사 HTML5의 form 기능을 사용한다. required : 데이터가 꼭 필요한지 결정 minlength & maxlength : 텍스트의 최소, 최대 길이 지정 min & max : 숫자 입력 유형의 최소, 최대 지정 type : 데이터의 종류 지정 pattern : 정규 표현식을 지정 CSS 의사 클래스 (C..