ABCD Foundation_Codingstudy

ABCDFoundation - https://www.facebook.com/groups/562787713823026
네모로 코딩하기 개자이너 “맛보기”
Design Upper
CEO / Creative Director
CHOI WOONG

책의 내용
❖ 누구나 할 수 있는 쉬운 언어 HTML/CSS.
❖ 문법과 속성을 알면 손쉽게 제작 가능.
❖ 컴퓨터는 거짓말을 하지 않는다.
❖ W3C(World Wide Web Consortium)과 웹표준.

작금의 현실
❖ 브라우저만 이해할 수 있는 언어
❖ 크로스브라우징의 난해함.
❖ 거짓말을 하는 언어와 사용자 컴퓨터.
❖ 세계적인 웹표준. (IT 강국 대한민국은 예외)

배워보기
❖ 기본적인 문법과 속성 이해하기
❖ 브라우저처럼 네모로 생각하기
❖ 웹페이지의 Flow(흐름) 익히기
❖ 디자이너 다운 코딩 해보기

브라우저는 모든 웹페이지를 네모의 집합이라고 생각합니다.
네모난 상자안에 글과 이미지를 넣고 배치하는 작업

네모를 모아서 웹페이지를 만
들어 볼까요?

‘가장 바깥쪽 박스를 만들고’
div
/div

‘다시 박스로 나눕니다.’
div
/div
div
/div
/div
div

‘또! 다시 박스로 나눕니다.’
div
/div
div
/div
/div
/div
/div
div
div
div
div
/div

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

‘전체 넓이와
간격조절’
회원가입 아이디/비밀번호 찾기
sangkle
*******
로그인
로그인 상태 유지

‘배치를 위한
사이징’
sangkle
*******
로그인

‘float와
position을
이용한 배치’
sangkle
*******
로그인

‘배치 후 세로공
간은 자동으로
채워짐’
sangkle
*******
로그인

‘끝!’
sangkle
*******
로그인

실전! 네모박스 만들기
네모를 보면, 가장자리를 둘러싸고 있는 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>

여기서 잠깐!
CONTENTS
width 속성은 전체 넓이가 아닌 CONTENTS 영역의 넓이입니다.
위에서 코딩한 박스의 진짜 width 값을 구해보세요.

세로사이즈 정하기
CONTENTS
마찬가지로 세로값 역시 CONTENTS 영역만을 계산하는데
세로값 계산의 경우는 bolck, line, inline 요소를 이해해야 합니다.

중요 포인트 !
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;} - 가능

여백의 법칙
1
CONTENTS
2
3
4
padding 과 margin등의 여백은 시계방향으로 표기합니다.
{padding: 10px;}
{padding: 10px 20px;}
{padding: 10px 20px; 30px;}
{padding: 10px 4px 6px 8px;} margin 역시 시계방향이라는 걸 기억하세요!

여백의 법칙 2
CONTENTS 1
CONTENTS 2
contents1의 div에 margin-bottom:20px
contents2의 div에 margin-top: 30px을 주면 어찌 될까요?
어느 div에 margin을 줘야 맞나요?
margin이 좋나요? padding이 좋나요?
답은 없습니다!
퍼블리싱이 어렵고도 재밌는 이유에요.

여백의 법칙 3
DIV
margin은 음수값을 줄 수 있습니다.
레이아웃에 있어서 디자인적 요소들을 포기하지 않아도 되요!
아.. 이건 안되는데? 시안 다시 잡아주세요. 코딩할 줄 아세요?
이젠 이런 서러움 겪지 마세요.
margin : 0 auto; < 이것도 꼭 기억해주세요. (뷰포트 자동 계산하여 정렬)

Table 코딩 해보기
행과 열
행 (row) > tr
열 (column) > td
col
table
tr
td
디자이너답게! 코딩해보자!
http://ecofiltermall.com/design_tbalju.html - 개발자 vs 개자이너
http://www.google.com - 보물섬!

css로 꾸며보기
디자이너답게! 꾸며보자!
http://www.bestcssbuttongenerator.com - 디자이너 여러분들의 보물상자
http://www.csstablegenerator.com
http://www.romancortes.com/ - css 잉여킹!
OVR
http://www.romancortes.com/blog/pure-css-coke-can/
http://www.romancortes.com/blog/css-3d-meninas/
호머심슨
http://www.romancortes.com/blog/homer-css/
할말없음
http://pattle.github.io/simpsons-in-css/?scid=social_20140715_27845386! - …..

추천 서적
Head First HTML and CSS
쉽고 빠르게 익히는 CSS3 - 위키북스 (일명 동물책, 곤충책-한빛미디어)
COMING SOON
float , css

ABCD Foundation_Codingstudy

More Related Content

Similar to ABCD Foundation_Codingstudy

ABCD Foundation_Codingstudy