보랑취향

CSS Grid와 Flexbox 사용기본적인 레이아웃 CSS Grid와 Flexbox는 반응형 레이아웃을 더 쉽게 구현할 수 있게 해줍니다 .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;} Media Query와 Container Queries 병행 사용반응형 설정 Media Query (전통적 방법) /* 기본 스타일 */.container { width: 100%;}/* 태블릿 */@media screen and (min-width: 768px) { .container { width: 750px; }}/* 데스크톱 */@medi..

구글폰트 (google fonts) https://fonts.google.com/icons Material Symbols and Icons - Google FontsMaterial Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.fonts.google.com 폰트어썸5 (Font Awesome 5 Brands) Font Awesome의 5번째 메이저 버전.2017년 출시된 가장 최신 버전. 이전 버전(4.x)과는 호환되지 않는 새로운 기능과 아이콘이 추가됨. Font Awesome의 브랜드 아이콘 전용 라이브러리 상업 브랜드와 소셜 미디어 ..

DOCTYPE html>html lang="ko">head>meta charset="UTF-8">meta name="viewport" content="width=device-width, initial-scale=1.0">title>플러스 버튼 + 퍼지는 효과title> style> body { background: #fff; padding: 40px; } .plus { position: relative; width: 50px; height: 50px; display: inline-block; cursor: pointer; } /* 불투명한 앞 원 */ .plus::before { content: ""; position: absolute; i..

DOCTYPE html>html lang="en">head> meta charset="UTF-8"> style> body { font-family: 'Courier New', Courier, monospace; font-size: 40px; text-align: center; margin-top: 100px; } .date-display { letter-spacing: 5px; } style>head> body> div class="date-display" id="date">0000.0.00div> script> const target = "1977.8.15"; let current = "0000.0.00"; co..

background-size: contain;  배경 이미지의 크기를 조절하는 CSS 속성이에요.이 속성을 쓰면, 배경 이미지가 박스(요소)의 크기 안에 맞게 축소 또는 확대돼요.이미지의 비율은 유지되고, 요소 크기를 넘기지는 않아요. 차이점 비교background-size:***** 속성설명 contain이미지가 요소 안에 다 들어가게, 비율 유지cover요소를 꽉 채우게, 비율 유지, 일부 잘릴 수 있음100% 100%요소 크기에 딱 맞춤. 비율이 깨질 수도 있음  display: flex;기능설명가로 정렬 기본값자식 요소들이 한 줄에 나란히 정렬됩니다. (flex-direction: row;)정렬 & 배치 조절justify-content, align-items 같은 속성으로 정렬 방향이나 위치 조정..

https://www.w3schools.com/css/css3_buttons.asp CSS Buttons W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 링크 테그는 를 쓸 수 없다. 버튼 태그안에 onclick = "location.href = '#' "을 넣어서 링크를 걸어준다. 바로링크걸기 링크걸기 새창열기 링크열기

box-sizing: content-box; 기본 CSS 상자 크기 동작을 제공합니다. CSS 표준에서 지정한 초기값과 기본값입니다. 요소의 너비를 100픽셀로 설정하면 요소의 내용 상자가 100픽셀 너비가 되고 테두리 또는 패딩의 너비가 최종 렌더링 너비에 추가되어 요소가 100px보다 넓어집니다. box-sizing: border-box; 적용대상: 폭이나 높이를 받아들이는 모든 요소 요소의 너비 및 높이에 대해 지정한 값의 테두리 및 패딩을 설명하도록 브라우저에 알려줍니다. 요소의 너비를 100픽셀로 설정하면 해당 100픽셀에는 추가한 테두리 또는 패딩이 포함되며 콘텐츠 상자는 해당 추가 너비를 흡수하도록 축소됩니다. 이를 통해 일반적으로 요소 크기를 훨씬 쉽게 조정할 수 있습니다.box-sizin..

https://fonts.google.com/icons?icon.query=map&selected=Material+Symbols+Outlined:share_location:FILL@0;wght@400;GRAD@0;opsz@24&icon.platform=web Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com 구글 아이콘을 코딩하고 싶을때.... 먼저 하고자 하는 이미지를 정한다. 오른쪽 Static icon font에