html 레이아웃 나눌 때 주의사항/ 중앙정렬 width 값 주고 margin: 0 auto;

중앙정렬  width 값 주고 margin: 0 auto;  출처 : https://www.youtube.com/watch?v=uh8gxb3f8gA   이 레이아웃일 때 이걸 나누면 내가 헷갈려할 부분이 있었음main에 4개의 자식을 주는 것.세로칸하나 가로칸 세 개일 때.  검은색 네모박스는 큰 가로 div이다.   그리고 CSS에서 main에서 배치를 할 때, 세로를 맞춰주면 블록이 쌓이려고 해서 맞춰진다.height 780px; (왼편의 긴 세로칸 aside의 높이값이 저거임)  왼편/오른편 새로운 div 박스를 만들어서 정렬하기도 가능함. 영상 선생님은 그게 싫어서 저렇게 작업했다고 하셨음...

• format_list_bulleted HTML
• · 2025. 3. 24.

기초 다시하기 slider

영상 https://www.youtube.com/watch?v=jjHLaeG4BCs  div 태그 안에서 박스 안에 해당하는 태그 만들 때 팁 .slider_img 하면 바로 자동완성으로 만들어줌.     h2>슬라이드 유형h2>    div class="slide_inner">      div class="slider">        div class="slider_img">div>        div class="slider_arrow">div>        div class="slider_dot">div>      div>    div> 3월 24일 새벽이라 이만 자려고 중지나중에 확인할 것 https://wtss.tistory.com/?page=2

• format_list_bulleted HTML
• · 2025. 3. 24.

기초 다시하기 html-header부터

참고 영상 : https://www.youtube.com/watch?v=y2O1zykEyFQ&t=109s 메뉴 짤 때 nav 태그 안에서 이런 식으로 메뉴를 짜면 ul>li*5>a[herf="#"]  ul>  li>a href="#">a>li>  li>a href="#">a>li>  li>a href="#">a>li>  li>a href="#">a>li>  li>a href="#">a>li>ul> 이렇게 나온다. 탭을 누르면 아웃라인이 표시돼서 링크된 부분 테두리박스를 확인할 수 있다. 위아래로 마진을 0으로 주고 양쪽으로 5픽셀 정도 줄 때 m0=5px   메뉴 정렬할 때 flex 값 주느라 애먹었는데 메뉴 li에서(메뉴 자체를 가리키는 ul 아님) 디스플레이를 inline으로 처리하면 가로로 정렬이 ..

• format_list_bulleted HTML
• · 2025. 3. 23.

📌 [CSS] COZA Fix 이력 (계속 갱신)

1️⃣ 메인메뉴 로고가 오른편으로 밀려가던 문제다른 걸 고치려다가 발생한 문제.❌ 문제 원인COZA 로고 이미지가 반응형으로 축소되는 문제min-width: 100%;min-height: 100%;위처럼 값을 줘서 이미지 크기를 유지하려 했는데,결과적으로 축소 문제는 해결됐지만 메뉴가 밀려나는 문제가 생김.그리고 flex: 2; 값을 준 것도 영향을 줬음.솔직히 왜 그렇게 했는지 기억이 안 남. ✅ 해결 방법.logo { margin: 10px; width: 20%; }.logo img { max-width: 100%; height: auto;}이렇게 수정했더니 문제 해결됨.🧐 추가 설명.logo의 width 속성과 .logo img의 max-width 차이점.logo { width: 20%; ..

• format_list_bulleted HTML
• · 2025. 3. 20.

[CSS] 플렉스 축약 속성 📝

📝 예시)flex: 0 1 calc(25% - 40px);🛠️ 개념 설명플렉스 아이템의 유연성을 한 번에 설정하는 단축 속성.flex-grow, flex-shrink, flex-basis를 조합해 레이아웃을 효율적으로 제어합니다.📜 속성 구조flex: [flex-grow] [flex-shrink] [flex-basis];flex-grow: 0역할: 남은 공간을 차지하지 않음0 → 초기 크기 유지 (확장 X)flex-shrink: 1역할: 공간 부족 시 크기 감소 가능1 → 기본값으로 비율에 따라 축소flex-basis: calc(25% - 40px)역할: 초기 크기 설정 (컨테이너 너비의 25% - 40px)calc() 함수로 혼합 계산 가능🧮 실제 계산 예시컨테이너 너비: 800px계산식: 25..

• format_list_bulleted HTML
• · 2025. 3. 20.

[CSS] Lifesure fix

.menu-bar #page { background: transparent;  border:0px;} 이 부분은 메뉴의 특정 개별 목록이다. 셀렉트라서 주변에 테두리와 사각틀이 생겨서 보기 나쁘길래 없애는 방법을 강구해봤다. 그래서 메인메뉴는 이렇게 나온다 적용 전적용 후 하는 김에 border도 0으로 조정해서 사각테두리 선이 없다. 이게 최종판이니 난 여기서 더 손대지 않을 것이다.  참고로 아래쪽은 원본이다. 이건 내가 알아서 자른 로고. 그래서 화질 안 좋음

• format_list_bulleted HTML
• · 2025. 3. 20.