9. ‘또! 다시 박스로 나눕니다.’
div
/div
div
/div
/div
/div
/div
div
div
div
div
/div
10. div ‘이젠 마크업을 해줍니다’
/div
div
/div
/div
/div
/div
div
div
div
div
div
/div
<a> 회원가입 </a> <a> 아이디/비밀번호 찾기</a>
<input /> <input />
/div
/div
div
<input />
sangkle *******
로그인
<input /> 로그인 상태 유지
div
div
/div
/div
11. ‘전체 넓이와
간격조절’
회원가입 아이디/비밀번호 찾기
sangkle
*******
로그인
로그인 상태 유지
12. ‘배치를 위한
사이징’
회원가입 아이디/비밀번호 찾기
sangkle
*******
로그인
로그인 상태 유지
16. 실전! 네모박스 만들기
네모를 보면, 가장자리를 둘러싸고 있는 container box와
글줄을 이루는 line box 그리고 글줄을 따라 흐르는 inline box로 이루어져 있습니다.
contents padding border margin
<div style=“width:400px; padding:20px; border:1px solid #333; margin:40px”>
lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
</div>
17. 여기서 잠깐!
CONTENTS
width 속성은 전체 넓이가 아닌 CONTENTS 영역의 넓이입니다.
위에서 코딩한 박스의 진짜 width 값을 구해보세요.
18. 세로사이즈 정하기
CONTENTS
마찬가지로 세로값 역시 CONTENTS 영역만을 계산하는데
세로값 계산의 경우는 bolck, line, inline 요소를 이해해야 합니다.
19. 중요 포인트 !
HTML은 각각의 네모가 세가지 종류로 표현됩니다.
1. block - <p> , <img> 등
2. line - <p> 태그안의 text 들
3. inline - <p> 태그안의 text에 씌워진 <strong> 등의 태그
<p>lorem Ipsum is <strong>simply</strong> dummy text</p>
각 요소의 특징들
1. block - 상하로 구성
2. line - 좌우로 구성
주목할만한 사실. block 요소 외에는 height 값을 지정할 수 없어요!
p strong {width:400px; height:200px;} - 적용 안됨
p {line-height: 1.3em;} - 가능
22. 여백의 법칙 3
DIV
margin은 음수값을 줄 수 있습니다.
레이아웃에 있어서 디자인적 요소들을 포기하지 않아도 되요!
아.. 이건 안되는데? 시안 다시 잡아주세요. 코딩할 줄 아세요?
이젠 이런 서러움 겪지 마세요.
margin : 0 auto; < 이것도 꼭 기억해주세요. (뷰포트 자동 계산하여 정렬)
23. Table 코딩 해보기
행과 열
행 (row) > tr
열 (column) > td
col
table
tr
td
디자이너답게! 코딩해보자!
http://ecofiltermall.com/design_tbalju.html - 개발자 vs 개자이너
http://www.google.com - 보물섬!