인프런 커뮤니티 질문&답변
작성한 질문수
와이어프레임 연습문제 2
작성
·
197
3
와이어프레임 연습문제 1~3을 하고 있는데요, (99페이지~) 몇가지 질문 있습니다.
1. <div class="image">
연습문제 2의 html을 열어보니 연습문제 1에 들어가는 동그란 이미지는 div로 감싸지 않고 그냥 바로 img태그만 사용하셨던데 두번쨰 연습문에의 이미지들은 div로 감싸져 있더라고요. 왜 어떤 이미지는 그냥 사용되고 어떤건 div로 감싸지는지 뭔차이가 있는건지 궁금합니다.
2. <a href="#none">과정 살펴보기</a>
연습문제 1에있는 버튼에서는 button 태그가 사용되었는데 2에서는 a 태그가 사용되었더라구요. 이떄 a태그가 사용된 이유가 뭔가요? a 태그 대신 button 태그를 써도 되나요?
3. <div class="items">
(연습문제3. 아이템 카드 부분) 기기나 모니터 해상도 크기에 따라 한 행에 4개가 들어가 있는 아이템 카드들이 한 행에 3개 or 2개 or 1개가 되는 경우도 있지 않나요? 이렇게 행을 구분지어서 한 행 4개의 아이템 카드들을 div로 묶어도 반응형일 때 괜찮은가요?
4. (연습문제3)
연습문제 3의 아이템 카드 텍스트 부분에서 (ex. 웹사이트 포트폴리오 #01) 왜 div로 두번 감싸져 있는건가요?
답변 1
2
퍼블리시 실전가이드는 퍼블리싱을 잘하는 가이드와 예시를 보여드리는 목적이라서 그냥 경험자의 예시로 생각하시면 됩니다.
실습을 하는 강좌는 아니라서 이런 실무 코딩에 관한 세세한 질문을 하실거라고 생각은 못했는데 질문하신거니까 답변은 드릴게요.
1. <div class="image">
이미지를 div로 감싸고 안싸고는 제작자의 성향에 따라 달라집니다.
div로 이미지를 감싸면 계층구조가 div로 되는데 갑자기 같은 계층구조가 img로 나오는게 보기 싫은 사람은 div로 이미지를 감쌉니다. 그런거에 신경쓰지 않으면 img를 그냥 씁니다.
연습문제 2에 그냥 img로 쓰셔도 상관없습니다. 연습문제 2번의 경우 계층구조를 맞추기 위해서 img를 div로 감싼 것 같습니다
2. <a href="#none">과정 살펴보기</a>
a태그를 사용하는 경우 일반적인 단순 링크 곧, html 파일이나 url을 연결하는 경우 주로 사용합니다.
button의 경우 프로그램적인 링크 또는 액션이 있는 경우에 사용합니다. 예를들어 로그인 버튼, 검색 버튼 등
3. <div class="items">
한 행 곧, 하나의 가로에 몇개가 있던 .items와 같은 부모요소로 묶어 놓는 습관이 좋습니다.
나중에 저런 부모요소가 없으면 곤란한 경우가 생깁니다. 그리고 .items 하나를 만들고 이어지는 내용이 더 있으면 .items가 복사되면 됩니다.
4. (연습문제3)
.item이 자식요소 div 2개를 가져야 해서 그렇습니다.
.item
.image
.description
위의 형태가 옳바른 코딩입니다. 그리고 아래는 바람직하지 않은 코딩입니다.
.item
.image
h3
b