My Tech Blog (프로그래밍언어/html&css)

⚠️ 문제스크롤을 내릴 때 헤더가 화면 위쪽에 나타나도록 css에 position: fixed; 속성을 주었는데 본문 컨텐츠가 헤더 밑으로 들어가서 잘리는 문제🧐 원인header가 position: fixed로 설정되어 있으면, section이 그 공간을 자동으로 인식하지 못하고 최상단에 붙어 있는 상태가 된다. 이 문제를 해결하려면, section.visual에 margin-top이 아닌 padding-top을 사용해야 한다.margin-top은 요소의 외부 마진을 설정하는 것이지만, padding-top은 요소 내에서 실제 콘텐츠의 위치를 조정하기 때문에, 고정된 header의 크기를 고려해서 요소를 자리에 배치한다. ⚡ 해결법header의 높이만큼 margin-top 속성 추가/* section...

⚠️ 헤더를 위에 고정하니까 섹션이 헤더 밑으로 들어가서 가려지는 문제⚠️ 햄버거 버튼이랑 로고 분리⚠️ 햄버거 버튼 아이콘 X자로 바꾸기⚠️ 햄버거 메뉴 margin-top⚠️ 헤더랑 햄버거 메뉴 안겹치게 어떻게 구성할지 - innerHeader이 오른쪽으로 햄버거 메뉴 넓이만큼 이동 - 사람 이미지 배경 제거해서 오른쪽으로 밀리도록 - 사람 실루엣 따서 동적으로 선이 생기게 하기⚠️ Nav 메뉴 hover 효과 수정⚠️ 향수 이미지에 케러셀 추가하기 다른 향수로 전환되게 일단 대충 적어놓고 나중에 짜집기 해서 깃 readMe에서 쓰자 오늘 한 부분프랑스어로 "꿈의 향수", "꿈의 물"을 따서  EAU DE REVE(오 드 레브)일단 뼈대만 만들고 페이지 5개 정도 추가하자 로고 Canva 폰트[구글 ..

CSS Diner는 CSS 선택자를 학습하고 연습할 수 있는 재미있는 웹 기반 게임이다.사용자가 HTML 코드에 적용할 올바른 CSS 선택자를 작성하면, 게임의 각 레벨을 클리어하며 점점 더 복잡한 선택자를 익힐 수 있다. 이 게임은 CSS를 배우거나 복습하고 싶은 초보자와 중급자를 위한 좋은 도구이고특히 선택자 공부를 하고 싶은 사람들께 추천한다.크롤링 연습하시는 분들께도 많은 도움이 될 것 같다.  https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io 가장 쉬운 난이도인 1번부터 가장 어려운 32번까지 있다.ㅋㅋ 화면에서 고르라고 하는 물건을 고르는 CSS..

이번 포스팅 설명은 제가 작성했으나 이미지는 다른 곳에서 잘 그려진 것들을 가져왔습니다.이미지마다 출처 표기했습니다 :)  여기 가시면 flex 요소들을 직접 클릭해 보면서 화면 레이아웃을 확인해 볼 수 있어요. flex-shrink - CSS: Cascading Style Sheets | MDNThe flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line's negati..

블로그 꾸미기 하면서 간단한 뮤직 플레이어를 만들었다. 음악이 재생 중일 때만 현재 플레이중인 음악 정보를 표시하는 코드 어떻게 짰는지 간단히 올려 본다. 플레이 버튼을 누르기 전까지는 `Title` 과 `Progress Bar` 이 숨겨져 있다가 곡이 재생되면 제목과 프로그레스바가 플레이어 위로 부드럽게 나타나는 코드이다. ⚡ music-info 클래스 CSS 코드음악 재생 전(기본상태).music-body .music-container .music-info { opacity: 0; /* 투명도 100%로 화면에서숨겨짐 */ transform: translateY(100%); /* (수직 방향) 자기 자신 높이만큼 아래로 이동 */ transition: transform 0.3s ease-in..

1. form 태그encrype자주 사용되는 속성값 "name", "method", "actioin", "encrype" 파일이나 이미지 업로드가 있는 폼은 반드시 enctype="multipart/from-data" 이 타입으로 지정을 해야 파일 업로드(전송)이 된다. 그래야 서버에 파일을 저장해서 처리 할 수 있다.    보안때문에 자동완성이나 입력 값 체크를 하지 않도록 하려면 qutocomoplete="off" 폼 속성과 "novalidate" 속성 사용 + +  2. input 태그placeholder="텍스트"입력 필드에 예상되는 추천 값을 미리보기 하는 용도 태그 포커스 되면 사라짐 readonly읽기 전용. 입력필드가 사용자 입력 불가한 상태가 됨. ..

[HTML]div 6개 만들어주고 container로 감쌌다.    1    2    3    4    5    6    [CSS]html, bodyhtml,body {    margin: 0;    padding: 0;    box-sizing: border-box;    height: 100dvh;    width: 100%;} 페이지의 기본 여백, 패딩 제거, html과 body의 크기를 브라우저 창의 100% 너비와 100dvh 높이로 설정. box-sizing: border-box;으로 콘텐츠 크기와 패딩, 테두리를 합쳐서 계산  `box-sizing`의 속성은 요소의 크기를 계산하는 방법을 결정한다. `content-box` (기본값)는 width와 height가 요소의 콘텐츠 영역 크기만을 ..

ttps://www.tablesgenerator.com/html_tables  HTML Tables generator – TablesGenerator.comYou can import table data by uploading file in CSV format (Comma Separated Value). Most spreadsheet software, both desktop and online, allows to save tabular data in CSV format — it is usually available in the File menu under the name "Save As..." or "Exwww.tablesgenerator.com프론트엔드 개발 작업 하시다보면 테이블을 만들어야 하는 경우가..