분류 전체보기111 웹디자인개발기능사 실기 8일차 (2025. 08. 24) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url예제연습url코드펜url연습 문제 다운로드(이기적)url공개 문제 다운로드(Q-NET)urlvscode 화면 / 미리보기 화면 띄워두기-99. 팝업창 구조100. 팝업에 flex 적용, 세로 정렬 적용 101. 102.103.104. column 사용 했을 때 가운데 정렬 하고 싶으면 align-items: center 사용 105. 팝업 안에 있는 텍스트들 글자 가운데 정렬106. pop-up-bg를 pop-up 위쪽으로 위치 이동 ㄴ 구조상 닫기 버튼이 맨 위로 나와야함!! 107. ㄴ flex를 사용했기 때문에 css에 pop-up.active를 걸때도 같은 속성인 flex를 적용해야 깨지지 않음. 구조 유지한 상태로 방법1)ㄴp.. 2025. 8. 24. 웹디자인개발기능사 실기 7일차 (2025. 08. 23) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url예제연습url코드펜url연습 문제 다운로드(이기적)url공개 문제 다운로드(Q-NET)urlvscode 화면 / 미리보기 화면 띄워두기- #C-3유형1. html 시맨틱 구조 짜기 2. hd-con 커스텀(너비, 높이, 배경색 칠해 확인)3. r-box 커스텀 (너비, 높이, 배경색 칠해 확인) ㄴ 스크롤 생기는게 정상, r-box도 밑에 나오는게 정상4. body에 flex 적용 5. hd-con 구조 짜기(logo-box, menu-box)ㄴ logo-box는 눌렀을 때 임시링크로 이동할 수 있는 a태그로 감싸서 img 태그 사용 → 반드시 alt 속성 기재!!! 안그럼 감점★ ★ㄴ menu-box는 nav 태그로 사용 6. logo-.. 2025. 8. 23. 웹디자인개발기능사 실기 6일차 (2025. 08. 17) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url예제연습url코드펜url연습 문제 다운로드(이기적)url공개 문제 다운로드(Q-NET)urlvscode 화면 / 미리보기 화면 띄워두기- 62. tab-menu 안에 있는 div에 높이 0적용, overflow: hidden 적용하여 가려줌 63. 탭메뉴 스크립트 구현(addclass, removeclass 사용)ㄴ 왼쪽에 있는 a태그를 눌렀을 때 그 옆의 li태그가 나와야함ㄴ 어딘가로 이동하지 못하게 하도록 방지64. css에 tab-menu 안에 있는 li에 active를 걸고 그의 자식인 div에 너비, 높이 동일하게 지정 후 위쪽 여백을 4px정도 준 후 box-saizing: border-box로 넘치는 부분 잘라.. 2025. 8. 17. 웹디자인개발기능사 실기 5일차 (2025. 08. 16) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url예제연습url코드펜url연습 문제 다운로드(이기적)url공개 문제 다운로드(Q-NET)urlvscode 화면 / 미리보기 화면 띄워두기-#A-3 문제 유형 18. body, ul, li 노멀라이즈1) margin: 0;2) padding: 0;3) list-style: none; 19. a 태그 노멀라이즈1) color: inherit;2) text-decoration: none;20. menu-box 안에 있는 ul에 flex처리 하여 한줄로 정렬21.menu-box 안에 있는 ul 후손에 있는 ul에 none 처리(1차 메뉴를 먼저 커스텀 하기 위해)ㄴ 100 - 20 -20 = h: 60px(높이) 22. li 너비, 높이 임의로 .. 2025. 8. 16. 웹디자인개발기능사 실기 4일차 (2025. 08.10) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url예제연습url코드펜url연습 문제 다운로드(이기적)url공개 문제 다운로드(Q-NET)urlvscode 화면 / 미리보기 화면 띄워두기-#E-1 유형-너비, 높이 다 반응형!!! 1. html 구조 먼저 짜기- top-box로 header와 main을 감싼 후 footer는 따로 2. footer에 먼저 고정 높이 지정 3. 4. header에 너비 지정하고, main에는 clac 속성 사용해서 반응형 너비로 지정 5. top-box에 flex 적용6. main 구조짜기(컨텐츠 / 이미지 슬라이드)7. 컨텐츠 박스의 너비와 이미지 슬라이드의 너비 적용ㄴ 이미지 슬라이드의 너비는 clac 속성을 사용해야 함ㄴ width: clac( 100v.. 2025. 8. 10. 웹디자인개발기능사 실기 3일차 (2025. 08. 09) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url예제연습url코드펜url연습 문제 다운로드(이기적)url공개 문제 다운로드(Q-NET)urlvscode 화면 / 미리보기 화면 띄워두기-#C-1 유형ㄴ 고정형이라 반응형 x(고정너비 확인) ㄴ 파일탐색기 안보일 때 vscode에서 우클릭 후 [파일탐색기에 표시] 선택 1. container 큰 구조에 header와 r-box(main/footer) 시멘틱 구조 짜기2. container에 색상 넣어 크기 확인 + 고정 높이 지정 3. header에 class명 지정 후 배경색 칠해 확인 / r-box도 색칠해서 확인 4. 공통 클래스인 container에 display: flex 적용 5. hd-con과 r-box에 고정너비 지정6. he.. 2025. 8. 9. 이전 1 2 3 4 ··· 19 다음
