2024 HTML 변경사항
html
작성일 : 2024.06.29
이미 6월 말이 되어버렸지만 문뜩 2024년 HTML과 CSS 변경사항이 궁금해져 글을 작성해 보려 합니다.
2024년 HTML 변경 사항
user-valid
및 user-invalid
가상 클래스
새로운 :user-valid
와 :user-invalid
를 이용해 사용자가 입력한 값에 따라 스타일링이 가능해졌습니다.
<input type="text" id="username" pattern="[A-Za-z0-9]+" required />
input:valid {
border: 2px solid green; /* 값이 유효하다면 초록색 */
}
input:invalid {
border: 2px solid red; /* 값이 유효하지 않는다면 빨간색 */
}
user-invalid 관련 링크
user-valid 관련 링크
select
요소 내에서 hr
사용
select
요소 내에서 hr
태그를 이용해 옵션 그룹을 시각적으로 나눌 수 있습니다.
<select>
<option>사과</option>
<hr>
<option>바나나</option>
</select>
field-sizing: content
속성
field-sizing: content
을 사용하면 콘텐츠를 기반으로 크기 조절을 할 수 있습니다.
textarea {
field-sizing: content;
}
@property
규칙 도입
이제 @property
는 CSS에서 타입, 유형 검사, 기본값, 대체 값도 사용 설정합니다.
@property --custom-property-name {
syntax: <value>; /* 변수에 허용되는 값의 형태 */
inherits: <boolean>; /* 변수의 상속 여부 */
initial-value: <value>; /* 변수의 기본 값 */
}
@property
를 이용해 다음과 같이 사용할 수 있습니다.
@property --main-color {
syntax: "<color>";
inherits: true;
initial-value: #4caf50; /* 녹색을 기본값으로 설정 */
}
body {
color: var(--main-color);
}
애니메이션에도 적용할 수 있습니다.
@property --progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
.progress-bar {
width: var(--progress);
height: 20px;
background-color: #4caf50;
animation: progress 3s infinite;
}
@keyframes progress {
0% {
--progress: 0;
}
100% {
--progress: 100;
}
}
마치며
늦게나마 2024년도 HTML, CSS변경 사항에 대해 찾아보았는데 이 부분 말고도 더 많은 것들이 변했고 이런 변경 사항들을 잘 참고해 프로젝트에 어떻게 활용할 수 있을지 고민할 수 있는 시간이 되었습니다.
이 글은 해당 문서를 보며 작성 되었습니다.
https://developer.chrome.com/blog/new-in-web-ui-io-2024