無제

👇🏻  HTML 👆🏻  13/results/badge.html #html #fontawsome #flex #justify-content #position #relative #absolute#뱃지 #종 #아이콘 #폰트어썸 #플렉스 #저스티피콘텐츠 #포지션 #릴레티브 #앱솔루트

HTML Primary title Title step Title step Title step Title step Title step Title step It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making ..

🟢 transform요소의 모양, 위치, 크기, 회전, 기울기 등을 시각적으로 변경할 때 사용하는 속성. ◼ functions속성 값(크기, 색상, 위치 등)을 동적으로 계산하거나 변환하는 함수 역할. 1️⃣ 수학적 계산 함수 🔹 calc()서로 다른 다양한 단위의 값을 섞어서 사칙연산으로 계산. (px, %, em, rem, deg, s 등) /* 전체 너비에서 100px을 뺀 나머지 */.functions { width: calc(100% - 100px); }주의: 연산자 앞뒤에는 반드시 공백 표시. 🔹 min() / max() 여러 값 중 가장 작거나 가장 큰 값을 선택. /* 100%와 700px 중 더 작은 값을 선택 */.functions { width: min(100%, 70..

🟢 Pseudo-elementsHTML 문서에는 실제로 존재하지 않는 가상의 요소를 CSS로 생성하여 스타일을 적용하는 요소. 1️⃣ 내용 앞뒤에 콘텐츠를 추가하는 가상 요소/* 링크 앞에 화살표 아이콘 넣기 */a::before { content: "➔ "; color: blue;}/* 필수 입력 항목 뒤에 빨간 별표 넣기 */.required::after { content: "*"; color: red;} ::before: 선택한 요소의 내부 앞에 가상 요소 추가. ::after: 선택한 요소의 내부 뒤에 가상 요소 추가.특징: 반드시 content 속성을 추가해 내용을 입력. ( 👉 이모티콘 삽입 단축키 (win + .))용도: 아이콘 추가, 꾸밈 요소(장식선), 단위 표시(예: '원'..

🟢 Pseudo-class HTML 요소의 상태(state)나 특정 조건을 기준으로 스타일을 적용할 수 있게 해주는 선택자. 1️⃣ 사용자의 동작에 반응하는 가상 클래스:hover: 특정 요소에 마우스 포인트를 올려놓으면 스타일 적용.button:hover { background-color: blue;} :active: 특정 요소를 클릭하는 순간 스타일 적용.button:active { background-color: red;} :focus: 특정 요소에 초점이 맞추어지거나, Tab 키로 이동했을 때 스타일 적용.input:focus { outline: 2px solid green;} 2️⃣ 링크 및 요소 상태에 따른 가상 클래스:link: 방문하지 않은 링크에 스타일 적용.a:link { c..