Front-End/Html | CSS4 css로 돌아가 업데이트(:is(),:has(),컴포넌트 반응형) css 지속적인 업데이트최근에는 Tailwind를 주로 사용하고 있지만 css기능들이 점점 업데이트 되면서 scss보다 css를 사용할지 고민이 되네요.새롭게 추 가된 기능을 소개해드릴께요. :is () 선택자 /* :is()를 사용한 예시 */:is(h1, h2, h3) { color: red;} 이렇게 하면 h1, h2, h3 태그에 모두 color: red 스타일이 적용됩니다. :is()는 선택자가 길어질 때 가독성을 높이고, 반복되는 스타일을 더 간단하게 작성할 수 있게 해줍니다. :has() 선택자:has()는 부모 요소가 특정 자식 요소를 포함할 때 스타일을 적용하는 선택자입니다. 예를 들어, 자식 요소가 있을 때 부모 요소에 스타일을 적용할 수 있습니다. 이는 "부모 요소가 자식 요소를 .. 2025. 2. 8. CSS button hover/active 웹 페이지 버튼 페이지 개발 할때 특정 이벤트 발생 시킬 때 많이 사용하는것이 button 이다. button의 onclick 기능으로 button을 click 했을 때 특정 작업이 일어나도록 할 수 있는데 이런 button을 조작 할 때 같이 사용 되는 것이 hover 및 active 이다. hover button을사용자가 click하는 것 처롬 보이게 하는 효과를 넣기 위해서 주로 사용 하는데 button 위에 mouse를 올려 두면 hover 효과가 나타난다 .button { background-color : white - 처음 기본 색깔이 흰색이지만 &:hover { background-color : red - 마우스를 올려두면 빨강색으로 변함 } } active button을 사용자가 눌렀을 때.. 2024. 4. 8. HTML 기본 - 프론트 엔드 HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 그래서 HTML은 무엇일까요? HTML은 콘텐츠의 구조를 정의하는 마크업 언어 입니다. HTML은 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소 로 이루어져 있습니다. 태그로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 예를 들어) My cat is very grumpy -> My cat is very grumpy 이런 식으로 문단 태그를 둘러싸서 하나의 문단임을 명시 할 수 있다. HTML 요소 분석 My ca.. 2023. 5. 12. display | position 차이 display : block - 한줄에 하나만 가능 display : inline-block - 한줄에 여러개 가능 position static - 기본값, 위치 이동 불가(HTML 순서에 의해서 위치 선정) relative - 원래 위치에서 top,left,right,bottom속성으로 위치 이동 가능 absolute - 요소가 속해있는 바로 위의 상자를 기준으로 이동 2023. 5. 5. 이전 1 다음
