> HTML (2) 설계도면짜기
- 주의점
1 추후 컨텐츠 옮기는 횟수를 얼마나 줄일 수 있을지(css와 관련)
2 비슷한 성격의 콘텐츠를 한 공간에 감싸고 있는지
오늘은 2번째를 기준으로
이미지는 이미지끼리, 글자는 글자끼리 래핑과정
서버에 사용자에게 정보를 전달할때 사용되는 html input tag의 종류
-
오늘 진도 요약
type의 어떤 속성값을 작성하는가에에 따라 형태가 달라짐
checkbox, radio 쓸때 주의점
textarea : 보다 장문의 정보를 서버에 전달 가능
select option : drop down 메뉴와 같은 여러 선택 옵션을 만들고 싶을때
화면 정보 알고 싶다면 table tag -
상단 : thead, tr
-
중간 : tbody, tr
-
하단 : tfoot, tr
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
-
공간을 만들때 사용하는 tag
: header, nav: main - 익스플로러에서는 지원 x 꼭 role과 함께 사용해야함
: section - 각각의 섹션 구역 설정
(section을 대표하는 title 정보있어야함 -> 꼭 h태그 삽입)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
- 신문의 본문정보 담아내는 구역
: article - 구역을 대표하는 title 정보 있어야함
: aside - 본문과는 조금더 관계성이 떨어지는 정보
: footer - 웹사이트에서 가장 하단 정보를 제공
: div - 임의의 구역 (ex. 서랍장, - 놓을자리 등 도면에는 표기하기 힘든
임의의 공간을 만들 때 사용하는 )
html 태그에서 가장 중요한 정보인
: inline - 동일한 태그를 연달아 기입 했을 때 줄바꿈 현상 일어나지 않았음.
나란히 정렬 -> 공간을 못만듦 -> 상하 배치작업이 불가능
:block - y축으로 정렬되는 , 즉 줄바꿈 현상이 일어나는
결과가 화면에 출력 -> 공간 만들 수 있음, 상하 배치작업이 가능
즉, 웹사이트 작업에 영향이 미치는 요소 이기때문에
어떤 작업이 inline, block인지 꼭 알아둘 것
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
예제
-
임의의 공간을 만들때쓰는 태그 : div
ex) 이미지 태그 넣었는데 이미지 없을때,
이미지 크기는 정해졌으나(50x50) 디자이너가 아직 시안
안보낸 등의 이유로 이미지 없을때/ 그 자리에 임시로 사진 넣고자 할때실무 팁 : img.placeholder.com / https://via.placeholder.com/150
ex) img src= "https://via.placeholder.com/150"
150 은 이미지 크기 / 직사각형으로 할 경우 : 100x 50(가로x높이)
150 은 이미지 크기 / 직사각형으로 할 경우 : 100x 50(가로x높이)
- 추후 디자이너 시안은 : img src="디자이너시안" >추가하면 됨
실습 1)
하단 메뉴 네개 들어가는 실습
메뉴버튼 : nav 태그
가장 하단에 있는 것 footer>
메뉴버튼 :
가장 하단에 있는 것
<li>
<a href="#">메뉴2</a>
</li>
<li>
<a href="#">메뉴3</a>
</li>
<li>
<a href="#">메뉴4</a>
</li>
</ul>
</nav>설계도면 항상 정확히!
부분적으로 페이지 짜는 연습
ex) 경제화면의 리스트가 나오는 단, 신문사의 리스트가 나오는 도면
등 전체 페이지가 아닌 부분적으로 나눠서 짜는 것이 효과적
실습 2
naver.html 경제도면 만들기
파악하기
1) 각각의 리스트는 동급 -> ul, li
2) 클릭했을때 다른화면으로 넘어감 - > li 태그도 a 감싸주기
3) 왼쪽 이미지 -> img / 오른쪽은 텍스트정보 : 동일한 태그 묶어주는 div 태그
경제 M , 출처, 4일 전 등 -> span
타이틀 : ex 부회장님의 취미생활 -> h3
본문정보 작성 -> p
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<ul>
<li>
<a href="#">
<img src="">
<div>
<span>r경제M</span>
<h3>부회장님의 취미생활</h3>
<p>HELLO WORLD HELLO WORLD HEOLLO WORLD-
HELLO WORLD HELLO WORLD HEOLLO WORLD </p>
</a>
<span>머니그라운드</span>
<span>-</span>
<span>4일 전</span>
</div>
</a>
</li>
</ul>
<body>실습 3
레시피
태그 div 안에 div : 또다른 구역 설정 가능
※ 앞쪽 숫자 누르면 코드 접어서 시야확보에 용이하게 사용 가능
※보여지는 이미지는 css 에서!
※동급 리스트 : ul li
※ 상단 이미지/
글자
imag/ p tag or h3
실습 4
daum.html
.png)
.png)
.png)
.png)
하단 영역
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div></div>
<div>
<ul>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li> ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
</li>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
*상단영역
왼쪽 큰 이미지
/ 오른쪽 글자 리스트 +가운데 공백
->글자상단영역과 하단영역 나눠서
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- 왼쪽--->
<div></div>
<img src="">
<!-- 오른쪽-->
<div>
<--오른쪽 상단 -->
<div></div>
<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>
<li><a href="#"></a></li>
</ul>
<--오른쪽 하단 -->
<div>
<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>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
</ul>
</div>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
- 아직 어떤 태그로 해야할지 모르겠을 때에는 우선
div 로 연습
-
다음 뉴스페이지의 상단부분
타이틀은 h3 -
bootstrap agency
코드 확인법 / 오른쪽버튼 코드검사
왼쪽 html
elements 화살표, 보고싶은 영역에 마우스 대면 나옴
태그설계도면 확인 -
TIP 디자인된 순서대로 도면 짜면 됨
(보이는 순서) 왼쪽에서부터 순서대로
참고 ) sisikiller.dothome -> kid gao
ctl+ / 하면 주석 단축키
마무리하며
아직까지 미숙하다보니 여러번 멈춰놓고 다시 시도하는 경우가 많은데, 간단한 코드로 설계도면을 짤 수 있고, 여러 페이지에서 코드들을 확인 할 수 있다는 것으로 처음에 비해 많은 길을 걸어온 것만 같다. 지금도 바로바로 시각화 되는 것에 매료되어 힘겹게 해내는 것에 비해 즐거움을 느끼는데 디자인 넣는 날에는 희열감에 몸부림 칠 듯 하다. 다만 많이 부족한 탓에 몇배로 열심히 해야하는 건 알겠다. 그다지 한 일은 없는 것 같은데 뭔가 굉장히 많은 일을 벌인 듯한 느낌이 든다. 내일은 월말평가인데 잘 해낼 수 있을지 걱정이 앞서지만, 이만 정리를 줄이고 열공 해보즈아.
