글을 시작하기에 앞서 당부드리고 싶은 말

1. 아래의 내용들은 수험자 입장에서 2020 웹디자인 기능사 공개문제를 모아 분석한 내용을 담고 있습니다. 틀린 내용이 있을 수 있으며, 저 역시 배우는 입장이기에 무조건적인 맹신보다는 공부하는 관점에서 정리한 내용임을 참고하시기 바랍니다.
2. (2022년 기준!!!) 웹디자인 기능사 실기 후기를 모아 봤을 때, 그리고 직접 시험을 쳐 본 결과 공개문제 12개 중 하나가 출제되는 것으로 확인됩니다. 공개문제만 잘 파면 되고, 공개문제에 없는거 나오면 어쩌지? 하는 걱정 안해도 됩니다.
3. 오랜만에 블로그에 왔더니 알음알음 퍼져서 많은 분들이 활용하고 계시고 있더라구요. 기쁜 마음입니다. 개인적인 시점에서는 지금 보니 어려울게 없는 문제들이지만, 막상 시험을 치러 가는 입장에서는 막막하실거란걸 너무나도 잘 알고 있습니다. 다만, 이 문서는 웹디자인 기능사에 대한 어느정도의 학습과 준비가 되어 있을 때 유용한 문서임을 꼭 감안하고 봐주세요. 처음부터 A to Z로 떠먹여주는게 아니라, 시험 직전에 보면서 놓치기 쉬운 것을 확인하는 용도에 가깝습니다.
4. (특히 컴퓨터 학원에서) 상업적으로 사용하는 것도 알고 있습니다. 애초에 이 요점정리 자체가 개인 스터디에서 시작했고, 단순한 문제 분석이라 별 내용 아닌 것도 알고 있으며, 공부하는 사람들에게 알려지면 도움이 되겠구나 싶어 퍼블릭하게 공유했기 때문에 출처만 분명히 해주시면 됩니다. 감사 댓글이라면 더더욱 감사하구요.

요구사항

컬러가이드

• 모든 공개문제는 주조색/보조색을 자율에 맡김
• 배경색은 모든 문제가 #ffffff
• 텍스트 색깔은 대부분 #333333 → 단, 공개문제 기준 한 문제가 텍스트 색깔이 달랐으니 꼭 확인하고 넘어갈 것

<aside> 💡 → CSS 작성 시 *{color: #333333;} (또는 별도로 지정 된 텍스트 색깔)을 넣고 시작하면 됨 → 단, a 태그 전역 설정 시 {color: inherit;} 추가 필요 (아래 예시 참고)

</aside>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #333333;
}

a{
  text-decoration: none;
  color: inherit;
}

ol,ul,li{
  list-style-type: none;
}

<aside> ❓ inherit? → 부모요소의 속성값을 상속받겠다는 의미. 위의 예시에서는 #333333 을 상속받게 됨.

</aside>

와이어프레임

1. width: 1200px의 wrap에 가운데 정렬 (공개문제 A)

<aside> 💡 가장 익숙한 케이스. #wrap에 {margin: 0 auto} 만 걸어주면 됨

</aside>

2. slide와 contents의 width는 1200px이나 header/footer가 100% (공개문제 B)

<aside> 💡 1번 케이스와 크게 다르지 않지만 **헤더와 푸터가 100%(브라우저의 넓이)**이기 때문에 A 유형에 비해 HTML/CSS가 복잡함. 해당 케이스는 아래 코드를 참조.

</aside>

/*전체 영역 시작*/
#wrap{
  width: 100%;
  height: 700px;
}
/*전체 영역 끝*/

/*헤더 시작 (A영역)*/
#header{
  width: 100%;
  height: 100px;
}
/*헤더 끝*/

/*슬라이드 시작 (B영역)*/
#slide{
  width: 1200px;
  height: 300px;
  margin: 0 auto;
}
/*슬라이드 끝*/

/*컨텐츠 시작(C영역)*/
#contents{
  width: 1200px;
  height: 200px;
  margin: 0 auto;
}
/*컨텐츠 끝*/

/*푸터 시작(D영역)*/
#footer{
  width: 100%;
  height: 100px;
}
/*푸터 끝*/