Y&S 두 여자의 말랑말랑 생활공감

그럼 이제 간단하게 아래와 같이 롤오버했을때 색상이 변하는 메뉴를 만드는 연습을 해보자.

먼저 5개의 메뉴를 옆으로 나란히 늘어놔야 된다.

이때, 아래 1번과 같이 <ul><li>를 사용하는것과 2번처럼 그냥 <div>로 감싸는 방법이 있다면

메뉴는 리스트 요소이므로 시멘틱한 웹을 위해 <ul><li>를 써주는 방법이 좋다.

(컴퓨터에 이건 순서가 없는 목록이라는 걸 인식시킴)

근데 1번처럼 <ul><li>를 사용하면 각각이 블럭요소이기 때문에 한 줄씩을 다 차지해 버린다.

(2번 <div>도 블럭요소이지만 하나로 되어있으므로 옆으로 나란히 배치)

때문에 가로로 정렬시키는 float을 사용해 줘야 한다.

이 때, float을 3번처럼 <li>에 줘야할까? 4번처럼 <a>링크에 줘야할까?

3, 4번 모두 결과는 같아보이지만 엄연히 다르다.

여기에 css속성을 넣어 꾸며보면 그 차이점을 명확히 알 수 있다.

<li>에 백그라운드 컬러와 패딩, 마진을 주고  모서리를 라운딩시키는 {border-radius}를 줬다.

어쨌든 3번과 같이 <li>에 float를 넣었을 때 링크가 걸리는 영역은 아래처럼 딱 글자공간밖에 되지 않는다.

하지만 4번처럼 <a>링크에 float을 넣어주면 효과가 들어간 색상 영역까지 모두 링크가 걸린다.

이는 사용자의 편의를 위해 당연히 <a>링크에 걸어주는게 좋다는걸 알 수 있다.

근데 만약 <ul>에 아래처럼 빨간테두리를 친다면 float에 의해 메뉴들이 떠 있는 상태이므로

테두리는 밑으로 들어가 위쪽에 붙어버린다.

이를 바로 잡기위해 부모인 <ul>에 {overflow:hidden}을 넣어 플롯클리어시키면 테두리는 정상적으로 둘러진다.

만약 메뉴에 테두리가 들어가지 않더라도 이 개념은 확실히 알아야하며

더 정확히는 아래글들을 참고하면 될 듯하다.

2013/06/20 - [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해① by S

2013/06/22 - [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해② by S

2013/07/07 - [웹표준코딩] 플롯클리어 방법 by S

그럼 마지막으로 마우스를 롤 오버했을 때 색상이 변하도록 속성을 추가해 넣어주면 간단한 메뉴만들기 완성~!!!

 

 

 

       

line-height 는 글줄 사이의 수직여백을 조정하여 글의 가독성을 높이기 위해 사용된다.
얼핏보면 매우 간단한거 같지만 그 개념을 정확히 모를땐 내 맘대로 조정이 안되는 까다로운 놈이다.

이제 차근차근 알아보자.

라인하이트나 글자크기, 글자색상과 같은 속성은 자식에게 상속되는 성질을 가지고 있는데
라인하이트의 경우는 지정방법에 따라 상속방식이 좀 다르다.

부모인 body안에 <h1>과 <p>라는 자식요속가 있다고 보자.

아래와같이 body의 font-size를 18픽셀로 지정하고 h1은 30픽셀, p는 11픽셀로 별도로 지정했다.

body {font-size:18px; }
h1 {font-size:30px; }
p {font-size:11px; }

첫번째, body에 line-height:120%;을 넣으면

body의 폰트크기값(18px)의 영향으로 18x120%=21.6 의 결과값을 만들어내며 이는 자손에게 상속된다.
body에서 계산된 21.6px의 라인하이트값은 h1에서도 21.6px, p에서도 21.6px로 똑같이 지정되니
상대적으로 폰트사이즈가 큰 h1은 간격이 매우 좁아보일 것이며,

폰트사이즈가 작은 p는 간격이 매우 넓어보일 것이다.

실제로 해서 브라우저에 랜더링 해보면 아래와 같이 나오는데
만일, h1처럼 폰트사이즈(30px)가 라인하이트값(21.6px)을 넘어버리면 라인하인트값에 맞춰

글자가 겹치는 현상이 생겨버린다.

또 여기서 보면 글줄 사이의 공백은 (라인하이트값-폰트사이즈)가 반으로 나눠져서

글자 위아래로 채워진다는걸 알 수있다.

두번째, body에 line-height:20px;을 넣으면
첫번째 경우와 마찬가지로 라인하이트값 20px은 자손에게 상속되어 h1과 p에 똑같이 지정된다.
그럼 첫번째 경우와 별반 달라지지 않는다.

그렇다면 세번째 방법인 body에 숫자값을 넣어 line-height:1.3;으로 지정하면 어떨까?
이 경우는 body에서 계산된 결과값 18x1.3=23.4(px)이 상속되는것이 아니라
1.3 만 상속되어 폰트크기에 따라 각기 다른 line-height값을 만들어낸다.

h1=30 x1.3= 39(px) <- h1의 라인하이트값 
p=11 x1.3= 14.3(px) <- p의 라인하이트값 

실제로 해보면 아래와 같다.

그렇기 때문에 폰트크기에 따라 유동적으로 움직이는 숫자값을 사용하는 것이

가장 적절한 방법이라 할 수 있다.

그렇지만 이 역시 모든 상황에 보기좋은 여백을 딱 맞게 만들어내긴 어려우므로
일단 전체적으로 line-height값을 지정해놓고 필요한것만 나중에 따로 한번 더 속성을 주면 된다.

이렇게 전체적으로 영향을 미치는 line-height값을 처음에 지정해놓고 중간에 바꾸면 큰일나므로

주의할 것!

덧붙이자면

인터넷 익스플로러나 파이어폭스 같은 브라우저들은 line-height 속성을 따로 주지 않을 시 1.0~1.2의 값을
초기 기본값으로 사용한다.

앞에서 포스팅했던 리셋css에서 사용된 에릭마이어란 사람이 만든 기본리셋을 살펴보면

line-height를 '1'로 기본값으로 주고 시작하는데

외국에서 일반적으로 사용하는 기본값인 1은 영어에선 가독성이 크게 떨어지지 않지만

한글은 그렇지 못하다.
이는 같은 픽셀의 폰트사이즈라도 글자종류나 글씨체에 따라 공간을 차지하는 내용영역이 다르기 때문.

이 때문에 한글을 사용할 경우 기본셋팅을 보통 본문 12픽셀 폰트기준으로 1.3~1.5로 놓고 시작한다고

보면 된다^^

 

 

 

       

사실 이쪽은 아무도 안보고
나 혼자 미친X 마냥 떠드는 느낌인지라;; 좀 버려두고 있었는데
며칠 전 어떤분의 요청으로 간만에 포스팅 ㅋ

배치를 할때 플롯과 포지션이 있지만 대부분 앞에서 포스팅한 플롯(float)을 쓰고
포지션으로 배치하는 방법은 잘 쓰지 않는다.

하지만 이것도 가끔 쓸데가 있으니 알아두자.

포지션은 top, left, right, bottom 을 이용해서 위치를 지정하는데 사용법은 간단하다.

1. position:relative;

앞의 위치값을 기억하고 상대적인 위치를 지정한다.

아래는 100x100짜리 빨간 박스에 position:relative; 를 주고,

위에서 100픽셀, 왼쪽에서 100픽셀의 위치를 지정해 주었다.

이때, body에는 패딩20px을 주고

부모인 mother에 400x400짜리 두께가 5px인 검정테두리를 만들면 아래처럼 보여진다.

그럼 빨간박스는 body에 넣은 패딩값과 부모에 들어간 테두리5px에 영향을 받아
위쪽에서 125px, 왼쪽에서 125px인 지점에 위치한다.

물론 여기서 mother를 없애 버리면 body값 20px만 영향을 받는다.

이렇게 다른것들과 연관해서 상대적인 위치를 지정할 때 쓰이는게 position:relative; 이다

2. position:absolute;

그 자리에서 떠있기는 한데 플롯이랑 개념이 다르게
부모를 완전 무시하고 혼자만의 자유로운 자아를 가진다. 대기권밖으로 혼자 날라가 있는 느낌이랄까...

부모에 position:relative;를 사용하면 그 기준점을 찾는다.
아무런 기준점이 없으면 바디가 그 기준이 된다.
물론 기준점만 잡고 패딩이나 마진같은 그 외의 데이터의 영향은 전부 무시한다.

위에서 했던 빨간박스에 파란박스를 추가해서 position:absolute;를 주면
그 차이점을 확실히 알 수 있다.

그리고 아래는 부모에 position:relative;를 사용해서 기준점을 잡아주었을때의 변화

이건 보통 레이어로 띄우는 팝업같은데에 사용한다.

3. position:fixed;

아무 영향도 안받고 뷰(view)를 기준으로 항상 고정되어 있다.
메뉴, 로고, 따라다니는 장바구니, 플로팅광고 같은데 사용된다.

아래처럼 위에서 100px떨어진곳에 우측으로 붙여 녹색박스를 위치시켰을 때
브라우져의 창을 늘이거나 줄여도 항상 그 위치에 고정되어있다.

현재 블로그 오른쪽의 따라다니는 경고문이 바로 이 position:fixed;를 사용한 것이다.

포지션은 플롯보다 매우 쉽고 간편한 방법이긴 하지만

팝업같이 꼭 필요한데에만 사용하고 배치할때 가급적이면 사용하지 않는게 좋다.^^

 

 

 

       

앞에서 플롯을 초기화시키는 방법으로 부모에 조취를 취하는 방법을 알아봤다면
이번엔 자식에 조취를 취하는 방법을 보자.

일반적으로 많이 사용되는 홈페이지 기본 레이아웃 구조는 아래와 같다.

이 레이아웃을 실전에 살짝 응용해서 코딩을 한다면,

일단 전체를 랩(wrap)으로 감싸 브라우저의 사이즈에 상관없이 가운데 정렬되게 만든 후

상단에 header를, 왼쪽 메뉴(side)와 컨텐츠부분(content)을 main으로 한번 더 감싸주고, 하단에 footer를 넣었다.

여기서 왼쪽 메뉴와 컨텐츠부분을 나란히 가로배치시키기 위해

둘다 float:left;를 사용하여 공중으로 띄웠으며

두 개 모두 공중에 뜬 상태이기 때문에 footer에 파란색 라인을 넣었더니

아래와 같이 main영역을 침범해 밑으로 기어들어간다.

이때 footer에 나부터는 플롯의 영향을 받지 않겠다는 clear:both;를 넣어주면
이제 정상적으로 footer영역에만 라인이 그어진다.

2013/07/07 - [말랑말랑 컴퓨터/웹표준코딩 html&css] - 플롯클리어 방법 by S

여기서 만약 앞 글의 overflow:hidden(넘치면 잘라라)을 사용해서 플롯초기화 시킨다면
레이어 팝업을 띄웠을때 위치에 따라 팝업이 잘리는 문제가 생기고,

display:inline-block;를 사용하여 메인을 인라인속성으로 바꿔버리면
가장 코딩이 많이 들어가야하는 main영역에서 앞으로 무슨일이 있을지 모르기 때문에

이때는 최대한 안의 영역은 건드리지 않고 바깥인 footer에서 해결하는 이 clear:both;를 사용하는 것이다.

 

 

 

       

오랜만에 웹표준 공부글을 쓴다.
요새 왜이리 공부글이 쓰기 싫은지...ㅜㅜ
휴...반성반성.

플롯(float)을 줌으로 인해 생기는 변화를 어느순간 없애야 할 때가 있다.

이전 시간에 float을 주고 그를 감싼 부모에 테두리를 주면 테두리가 위로 붙어버리는 현상을 봤다.

다시 잠깐 보자면 이미지와 문장에 각각 float:left;를 주고

그 둘을 감싼 부모에 검은색 4픽셀짜리 테두리를 쳤더니
테두리가 위로 올라가서 붙어버린다. (붙어버린 라인의 두께는 8픽셀)

이는 아래처럼 이미지에만 float:left; 를 주어 부모에 테두리를 감쌀때 생기는 현상과는 다르다.

왜냐하면 이미지와 문장 모두에 float:left; 를 주게되면 둘다 공중에 뜨면서 테두리가 밑으로 기어들어가기 때문.

이를 해결하기 위해 플롯클리어시켜야 하는데 플롯클리어시키는 방법은 여러가지가 있다.
이것은 원래 정해져있던게 아니라 많은 사람들이 하나씩 찾아낸 방법으로 조금씩 성질이 다르다.

오늘은 부모한테 조치를 취하는 3가지 방법을 알아보자.

이미지와 글을 감싸고 있는 mother에 overflow:hidden;을 준다.

그럼 아래와 같이 자식들이 정신을 차리면서 부모가 자식들을 컨트롤 할 수 있게 된다.

이때, 부모에 width값을 따로 주지 않았기 때문에 윈도우창을 늘이던 줄이던 테두리의 가로값은 항상 100%를

가진다. (블럭요소의 일반적인 성질)

원래 오버플로어 히든은 높이에 맞춰 자를때 쓰는 속성이다.
하지만 여기서는 그 자를 기준이 없으므로 자신의 속성만 남게되는데 그 속성이 박스에 영향을 미치고
그 영향으로 인해 클리어시키는것.

플롯레프트는 width값을 주지 않으면 가능한 범위내의 최소한의 값을 가지는 성질이 있다.
이는 플롯박스라는 성질로 바뀌기 때문인데 이걸 이용해 아래처럼 플롯클리어 시키는것이다.

(만일 width값을 주지 않는다면 아래 3번과 마찬가지의 형태가 된다.)

기존 <div>블럭요소가 2번에서는 플롯의 성질로 변환되었다면 여기선 인라인요소로 변환되면서

2번과 마찬가지로 100%가 아닌 가능한 범위내의 최소한의 값을 가진다.

하지만 가로,세로값을 줄 수 없는 일반적인 인라인요소와 다르게 <img>태그처럼 width값과 height값을 따로

지정해줄 수 있게 만든것이다.
이를 이용해 플롯클리어 시키는 것인데 여기에 width값을 주게되면 2번과 같은 효과가 나타난다.

=====================================================================================================

그런데 만일 아래처럼 전체의 높이값이 따로 지정되어 있다면 굳이 플롯클리어를 하지 않아도 된다.

클리어는 높이(height)가 별도로 지정되어 있지않은,

내용의 길이에 따른 높이의 유동성이 있을때 사용한다는 것을 알아두자.

 

 

 

       

[웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해① by S

앞에서 이미지 밑으로 흘러내리는 글의 레이아웃을 봤다면

이번에 테이블을 사용한 듯 가로로 나란히 배치되는 레이아웃을 보자.

이미지에 float:left를 써서 왼쪽에 붙게했을때 글은 자연스럽게 이미지 아래로 흐르지만

글이 길어져도 레이아웃을 유지한채 이미지 옆에 배치시키면서 테두리를 둘러야할때가 있다.

이때는 글에도 역시 float을 써주면 되는데 실제로 해보면 아래와 같다.
200x200사이즈의 이미지를 하나 넣고 이미지와 글에 각각 { float:left; }를 주고

글에는 2픽셀짜리 파란색 테두리를 쳤다.

이렇게 되면 블럭박스가 글과 함께 움직이기 때문에 이때 사용한 가로사이즈 300픽셀은

온전히 글의 넓이가 되는것이다.
테두리도 역시 글에만 제대로 둘러진다.

(만약 이와 똑같이 했는데 이미지옆에 글이 같은 높이로 붙지 않는다면 리셋css를 사용하지 않았기 때문이므로 아래글을 참고할것.)

http://yslife.tistory.com/402

여기서 엥? 오른쪽에 붙이는데 글은 float:right 아냐? 라고 생각할수도 있다.
그렇지만 이렇게 하면 두개가 나란히 붙는게 아니라 아래와 같이 브라우저창을 기준으로 양쪽끝에 붙는다.

만일 글에다 float:right 를 사용하려면 그림과 글을 감싸고있는 부모인 mother에 넓이값을 지정해주면 되는데

그림이 200px, 글의 가로값이 300px이라고
mother의 가로값에 500픽셀을 준다면 아래와 같은 형태가 되어버린다.

왜 그럴까?

바로 글에 둘러진 테두리 2픽셀값을 생각하지 않았기 때문이다.
테두리 양쪽 4픽셀을 합하여 총 504픽셀이 되는데 부모의 width값을 500픽셀로 주었더니

들어갈 자리가 모자라서 밑으로 밀려내려가는 것.

이때, 가로값이 모자라는 상황에서 둘다 float:left 였다면 글이 아래로 내려가면서 왼쪽으로 붙는건 당연하다.

이렇게 되면 float을 써놓고도 전혀 먹지 않은듯 하니 이유를 모르면 여기서부터 헤매기 시작한다.

그렇다면 mother에 width값을 504px로 바꿔주거나 <p>의 width값을 296px로 바꿔준다면

글에다 float:right를 써도 원래대로 나란히 붙게 할 수 있을 것이다. 

이만큼 width값을 지정할땐 단 1픽셀만 어긋나도 민감한 상황이니 주의할것!

그런데 만일 부모인 mother에 테두리를 친다면 어떻게 될까?

여기서 글과 그림은 float의 사용으로 모두 공중에 떠있는 상태이기 때문에

부모 mother에 4픽셀짜리 검은색 테두리라인을 넣어보면
전체를 감쌀거라 생각했던 라인은 글과 그림을 무시하고 그대로 위쪽으로 붙어버리는 웃기는 상황이 발생한다.
(위에 붙은 검은색 라인은 위와 아래가 붙어버렸기때문에 4+4해서 총 8픽셀의 두께를 가진다.)

그렇기때문에 바뀌어버린 플롯의 성질을 어느순간 다시 제자리로 만들어야 할 때가 있다.
이를 플롯클리어 시킨다고 하는데 이는 다음 포스팅에서 다루겠음.

 

 

 

       

이전까지 세로의 배치를 했다면 이제 가로배치의 핵심 플롯(float)을 알아보자.
사실 세로로 배치하는건 쉽고 간단하지만 항상 문제가 되는것이 바로 가로 정렬이다.

플롯(float)은 [부유하다], [떠있다] 라는 의미를 지니고 있다.
기본적으로 테이블을 사용하지 않고 마크업을하면 아래로 쭉~나열되는데
원하는 부분을 띄워서 오른쪽에 배치하거나 띄워서 왼쪽에 배치하거나...

이런식으로 가로로 연결하여 배치해 나가는 것이다.

이 플롯의 개념만 정확히 이해하고 사용할 수 있어도 웹표준코딩의 기본 레이아웃을 어느정도 잡을수 있다.
물론 테이블을 사용해버리면 쉽겠으나 테이블로 레이아웃을 잡는건 웹표준과 웹접근성의

권장사항에 어긋나므로...

어쨌든 이 플롯을 확실히 이해하기 위해서는 앞전의 블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box)의 개념을 정확히 알고 성질을 파악해야 한다.

블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box) 보러가기

이러한 블럭박스나 인라인박스에 float를 주면 플롯박스라는 다른 성질로 변하면서

기존 고유의 성질이 바뀌어 버린다.
예를들어 한칸을 다 차지해야 직성이 풀리는 성질인 블럭박스가

float을 줌과 동시에 플롯박스 성질로 변하여 부분으로 들어가 다른것과 함께 배치될 수 있는것이다.

일단 이론적인 플롯의 사용법은 간단하다.

left 나 right 말고도 none 이나 inherit 가 있으나 많이 사용하지 않으므로 일단 패스.

자, 그럼 플롯이 실제 어떻게 사용되는지를 보자.

이미지와 나열된 글이 있고 이미지에 float:left를 줘서 이미지 우측에 글을 배치시키려고 한다.
이때 이 이미지가 어떻게 떠서 이동하는지 눈에는 보이지 않지만 아주 천천히 그 경로를 보자면 아래와 같다.

1.이미지가 공중으로 뜬다.
2.문장이 이미지 밑으로 들어간다.
3.문장의 블럭박스는 그대로 있는 상태에서 텍스트들을 감싼 라인박스만 이미지영역만큼 우측으로 밀려난다.
(만일 이를 직접 확인하기 위해 p에(블럭박스) 실제로 border를 넣어보면 이미지 밑에부터 테두리가 쳐진다.)

위에서는 이해를 돕기위해 중간부터 테두리를 넣었지만

테두리를 치지 않더라도 보이지 않는 가상의 선들이 위와같이 존재한다고 생각하면 된다.

실제로 문장부분에 테두리가 필요해 p에 스타일을 준다면 당연히 테두리는 이미지 아래까지 기어들어갈 것이고,
p에 문장의 가로값을 지정하려 width값을 주었는데

들어가있는 이미지 크기보다 width값이 작다면 p안에 들어있는 텍스트는 이미지 밑으로 다시 밀려난다.

float은 옆으로 배치하는거라고 했고 분명 float을 사용했는데 왜 옆으로 배치되지 않는 것인지...

테두리가 어째서 내 의도대로 안쳐지는지...
위의 개념을 확실히 알고있지 않으면 도대체 왜? 이런 현상이 벌어지는지 자체를 알 수 없는것이다.

블럭요소 p는 가로값을 주지않으면 항상 100를 차지한다.
때문에 이미지 옆으로 밀려나있는 라인박스 때문에 글들이 이미지 옆에서 나오다가 이미지가 끝나는 순간
다시 전체영역인 블럭박스로 돌아가 이미지 아래쪽으로 글이 흘러내리는 것이다.
이는 이미지를 상단 우측이나 좌측에 글과 함께 배치시킨 네이버 뉴스글 같은데서 볼 수 있다.

실전

아래는 이미지대신 200x200 사이즈의 박스하나를 만들고 빨간테두리를 친 후 클래스네임 photo로 지정해 float:left 를,문장에는 파란 테두리를 치고 가로값 500픽셀을 주었다.

그럼 결과는 아래와 같은 모습이 된다.

분명 문장에 테두리를 주어도 이미지 아래까지 들어가 있는걸 알 수 있다.

이 때, 가로값 500px은 이미지를 포함한 파란테두리 값이다.

글이 길어지면 물론 빨간 박스 아래까지 내려가고,

문장 <p>의 width값만 500에서 150px로 바꾼다면 이미지200px보다 작기 때문에 아래로 내려간다.

그럼 글이 길어져도 이미지 아래의 영역을 침범하지 않고 이미지 옆쪽으로 나란히 나오게 하려면 어떻게 해야할까?

간단하다.
글에도 같이 float을 주어 함께 띄우면 된다.

(이건 다음 포스팅에서 좀 더 자세히 설명하겠음)

[웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해② by S

 

 

       

블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box)의 기본개념을 정확히 알아야

뒤에 나올 'float'을 이해하는데 한결 수월해진다.

이것들이 어떠한 형태로 이루어져있는지 보자면,

위와 같이 하나의 문장에는 보이지 않는 인라인박스들이 무수히 존재한다.
만일 인라인박스에 부분부분 어떠한 스타일을 주려면 span같은 인라인 태그를 삽입하여

그 부분을 지정해 사용하는 것이다.
그러니까 결국 <span>이 빠져있는 각각의 단어들은 선택만 할 수 없을뿐 전부 인라인박스인 것.

그리고 이런 인라인요소들을 감싸는 라인박스가 있으며 또다시 라인박스를 감싸는 블럭박스가 존재한다.

실제 라인이 그려져있지 않더라도 문장 하나하나가 이런식으로 이루어져있다고 머릿속으로 생각할 것.
   

그럼 여기서중요한 블럭박스에 사용되는 블럭요소와 인라인박스에 사용되는 인라인요소의 차이를 보자.

실제로 해보면 아래와 같다.

<div>안에 50x50사이즈의 이미지 하나와 텍스트를 넣으면 

인라인요소인 이미지<img> 옆으로 텍스트가 들어가고, 남는 텍스트는 아래로 흘러내린다.

'여름방학'부분에 인라인 요소인<span>을 넣어 파란색의 점선을 그어보면 글자 양 옆으로의 '20px' 패딩은

적용되지만 위 아래로의 패딩은 먹지않아 글 높이 간격이 벌어지지 않았다.

게다가 width값 '300px', height값 '300px' 역시 아무런 영향을 미치지 않았다.

(파란색 점선은 padding값만 적용 되었을 뿐이다.)

여기서 이미지에다 블럭요소인 <div>로 감싸주고 스타일로 파란색 테두리를 쳤더니

이미지 옆에 있던 텍스트들이 아래쪽으로 밀려났다.

게다가 파란테두리 라인은 자신이 차지할 수 있는 영역만큼 전체를 꽉 채웠다.

(빨간색 바깥쪽 테두리와의 간격은 빨간색에 10만큼 패딩을 주었기 때문)

만일 여기에 이미지와 텍스트들을 감쌌던 <div>대신 같은 블럭요소인 <p>를 넣는다면 어떻게 될까?

<p>안에 이미지를 감싼 <div>가 들어갔더니 아래처럼 <p>가 <div>를 감당하지 못하고

스타일만 바깥쪽으로 빠져버렸다.

그럼 여기서 한가지 의문.

인라인박스와 블럭박스는 알았다쳐도 인라인박스 요소들로 이루어진 가상의 라인박스라는 개념은 왜 필요할까?이는 뒤에 float에서 알아보자.

 

 

 

       

그럼 앞의 이론을 바탕으로 간단한 박스모델을 연습해 보자.
물론 리셋 css가 들어가있는 상태이다.

<연습1>

아래와 같은 박스들을 만들면 되는데,
440x440 사이즈의 선두께가 4픽셀인 빨간 테두리에

100x100, 392x100, 200x100 사이즈의 세 개 박스가 들어가 있고
그 중 가운데 392x100의 박스에는 텍스트들이 테두리에서 안쪽으로 5픽셀의 공간을 두고 들어가 있다.

이를 코딩하면 아래와 같다.

클래스 네임은 임의로 지정해 준 것이며 바깥 쪽 박스를 mother,

안에 박스를 차례로 son1, son2, son3 으로 주었다.

이때 주의할점은 보더(border)값과 패딩(padding)값을 계산해서

가로값(width), 세로값(height)을 주어야 한다는 것.

위에서는 'mother'의 패딩값을 사방으로 20픽셀로 주고 나머지는 그에 맞춰 'son'에서 마진으로 간격을

조정했는데 이건 딱히 정답이 있는건 아니다.
본인이 하기나름인데 무수히 많은 작업을 하다보면 겹치는 부분을 마진으로 넣어야 할지 패딩으로 넣어야 할지, 위로 넣어야 할지 아래로 넣어야 할지 헷갈리게 마련.

자신만의 규칙을 만들고 상황에 따라 적용시킬 수 있어야한다.
가장 좋은 방법은 다른 페이지에 공통된(재사용 가능한가의 문제) 부분이 있는지를 살피고

코딩을 최대한 줄일 수 있도록 실용적으로 사용하는것.
이를 위해 구조화, 규격화 하는 연습이 끊임없이 필요하다.

두번째 392x100의 박스는 굳이 가로(width)값을 주지 않아도 <div>태그가 블록요소이기 때문에

사용가능한 공간내에서 꽉 들어찬다.
이미 바깥박스에 사방으로 패딩 20을 넣었기 때문에 굳이 계산해서 width값을 넣어주지 않아도

결과물은 같다는 것.

이를 브라우저에서 확인하면 아래와 같이 출력된다.

이때 가운데 박스의 글씨는 패딩값 10을 사방으로 주었다 해도 글이 길어진다면 아래쪽은 적용되지 않고

밑으로 계속 넘쳐 흐른다는 사실.

<연습2>

아래와 같은 크기의 간단한 박스들을 만들어보자.

이를 코딩하면 아래와 같다.

물론 이도 정답이 있는건 아니다.

안쪽박스에서 전부 바깥쪾으로 마진을 주어 해결할수도 있겠으나

위에서는 제일 바깥쪽 박스(mother)에서 안쪽 사방으로 패딩을 준 후 안쪽 두번째와 세번째 박스(son2)를 위쪾으로 마진10 만큼 주어 공간을 띄웠다.

그렇지만 이런 반복되는 같은 스타일은 다른방식으로 처리할수도 있다.

첫째, 멀티클래스 네임사용

멀티클래스는 여러개의 클래스네임을 같이 사용하는것을 말한다.

안쪽박스의 클래스 네임을 전부 'son'으로 주고 위쪾으로 마진 '10'을 주었다면 안쪽 첫번째 박스의 마진이 'mother'에 준 패딩이랑 겹쳐서 위쪾이 총 20픽셀의 공간이 생기게 되는데

이 때 첫번째 박스에 한칸띄어 클래스 네임을 더 주고 

.son.first 이런식으로 사용하여 마진을 0으로 만들면 맨 위쪾에 들어간 마진10이 빠지면서 결과가 같아진다.

스타일이 중복이 될 경우 클래스 네임 한개보다 클래스 네임 두개를 쓴것이 우선되므로

첫번째 .son에서 안쪽박스들의 마진을 위쪾으로 전부 준 후에

두번째 son.first에서 첫번째 박스의 위쪾으로 준 마진 하나가 도로 빠진다는 것.

둘째, 가상클래스 네임사용

가상클래스는 말 그대로 클래스 네임을 따로 넣어주지 않고도 사용할 수 있다는건데

'익스플로러6' 까지는 적용되지 않아서 제작년까지도 쓸 수 없었다고 한다.

현재는 익스플로러6 사용자가 거의 없으니 사용되는데,

아래처럼 같은 이름을 가진 동급의 자식들 중 first-child를 써서 첫째를 부르거나

last-child를 써서 막내를 부를 수 있다. 

그러니까 멀티클래스를 사용했을때와 동일하게 'mother'에 패딩을 사방으로 넣고

'son'에 위쪾으로 패딩 10만큼 준 후, 'son중 첫번째 놈'의 마진을 다시 0으로 만들어 주었다.

결과물은 역시 똑같이 출력된다.

'멀티클래스 네임'과 '가상클래스 네임'은 첫번째 방법보다 스타일의 사용을 줄이면서

좀 더 구조화 할 수 있으므로 상황에 따라 적절히 사용할 것!!!

 

 

 

       

디자인 된 페이지를 html로 코딩할 때 박스가 모여 하나의 페이지를 이룬다고 생각하면 된다.

모든 웹 사이트들은 이 박스형태의 연속이며 박스를 다루고 배치하는 과정은 html과 css의 핵심이다.

네이버의 메인페이지만 보더라도 전부 박스형태로 되어있으며

박스안에 박스들이 세밀하게 배치되어 하나의 페이지를 이루는 것이다.

박스는 padding영역 /border영역/ margin영역/ 컨텐츠영역으로 나누어져있다.

이 개념을 머릿속에 가지고 있어야 하며 실제로 박스에 선이 그어져 있지 않다하더라도 (border=0)

항상 이런 구조로 되어있다고 생각할 수 있어야 한다.

때문에 포토샵에서 디자인된 페이지를 보고 사이즈에 맞춰 코딩을 할 때 유념해야 하는게
width값과 height값은 border값과 padding를 빼고 계산해야 한다는거다.

예를들어 위처럼 가로세로 500x137 짜리 크기의 박스가 있다고 한다면,

border두께인 4픽셀씩 양쪽 8픽셀, padding값인 20픽셀씩 양쪽 40픽셀해서
width값이 500-48=452px, height값이 137-48=89px이 되는것이다.

이걸 html과 css로 옮겨보면, 아래와 같다.

그럼 포토샵과 브라우저의 사이즈가 일치하는 박스가 그려진다.

작업할때 1픽셀이라도 틀리면 전체적인 레이아웃이 어긋나므로 항상 계산기를 옆에 놓고 이런것들을

계산해가며 해야 하는것이다.

자, 그런데 여기서 문제가 있다.

분명 문단을 감쌀때는 <p>를 사용하는게 정석인데 위에서 <div>를 사용한 것이다.
물론 결과물은 같지만 시멘틱한 웹을 위해 텍스트에는 <p>를 써주는게 맞다.

그런데 어째서 p태그를 사용하지 않았을까?

p태그는 문단을 나눠주는 기능을 하기때문에 기본적으로 위, 아래 공백(마진)이 들어가 있다.

<ul><li>를 사용하면 텍스트앞에 디자인에 전혀 도움안되는 무식한 점이 생기는것처럼 일부 태그의 속성에는

개발자가 지정해놓은 디폴트값이 들어가 있는것이다.

그렇지만 디자인 되어있는걸 보고 그대로 코딩을 할 때 이 공백까지 계산하여 가로, 세로, 마진, 패딩을 넣기는

사실 무리가 있다.

그래서 이때 필요한게 바로 reset css이다.

스타일의 처음 시작에 p{margin:0;} 이런식으로 넣으면 p태그에 들어가 있던 위,아래 공백이 리셋되면서

코딩시 div와 똑같이 기본공백을 계산할 필요가 없어지는 것이다.

p태그 뿐만아니라 수 많은 태그들의 필요없는 기본값을 이런식으로 초기화 시킨 후 사용하기 위해

많은 사용자들이 자신에 맞게 만들어 모아 놓은것들이 있다.
 
그 중에서 보편적으로 많이 사용되는 것은

http://meyerweb.com/eric/tools/css/reset/

이 사람이 만들어놓은 리셋 css인데 굳이 이걸 사용할 필요는 없지만 
작업하면서 자신에게 편리한 방향으로 계속 수정하여 자신만의 리셋 css를 정리하면 되는것이다.

이 reset css를 사용하는 방법은 문서를 긁어다 에디트플러스에 넣고

에디트플러스에서 파일형식을 css로 저장해 reset.css 파일하나를 만든 후

html에서 링크로 스타일을 불러오면 되는것이다.

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/>

이때 css파일 위치는 html파일이 있는 곳에서 css폴더하나를 만들고 그 안에 넣어야 위의 경로와 맞게 링크된다.

앞으로 html 시작 시 반드시 스타일의 처음에 넣어서 필요없는 css를 리셋시키자.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8"/>
<title>박스모델연습</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/>
<style type="text/css">

</style>
</head>

<body>
</body>

이렇게 리셋시킨 후 <div>대신 이제 <p>태그를 사용하여 마크업하더라도 결과물이 원하는대로 출력될 것이다.

위 사이트에서 저장해서 만든 리셋 css파일인데 필요한 분은 받아서 사용하시길~

css.zip

 

 

 

       

구조와 모양을 분리하여 html은 놔두고 css로 한번에 모양을 컨트롤하는게 나중에 수정에 용이하기때문에

스타일을 사용할때는 1번 방식보다 2나 3번 방식을 사용하는게 좋다.

2와 3번 방식으로 스타일을 사용하는 css 구조는 선택{명령} 으로 되어있다.

일단 많이 사용되는 기본 스타일속성을 알아보자. (이는 css구조에서 명령 부분에 해당된다.)

<글자관련속성>

*글자크기
{font-size:12px;}

*글자색상
{color:#333333;}

{color:#red;}
#색상코드 또는 red,blue,black등

*글자두께
{font-weight:bold;}

*서체지정

{font-family:Georgia, "Times New Roman", Times, serif; }

-조지아라는 서체를 찾아서 없으면 타임뉴로먼, 없으면 타임체, 없으면 쉐리프체 아무거나

*글자와 글자사이의 간격 조정
{letter-spacing:-1px;}

*글자높이 지정
{line-height:1.3;}

*글자정렬
{text-align:right;}
center-중앙,right-오른쪽,left-왼쪽

*글자꾸밈
{text-decoration:none;}
-underline(밑줄)
-none(밑줄삭제)

<기타속성>

*가로길이

{width:300px;}

*세로길이

{height:300px;}

*테두리지정- 선두께,선타입,선색상
{border:1px solid #666666;}
solid-실선, dashed-점선

*배경색
{background-color:#ededed;}

*박스모서리(이건 css3이다.)
{border-radius:10px 10px 10px 10px;}
-왼쪽위/오른쪽위/오른쪽아래/왼쪽아래

*박스안쪽 여유공백
{padding:10px; 20px; 5px; 10px;}
-위,오른쪽,아래,왼쪽

*박스바깥쪽 여유공백
{margin:10px; 20px; 5px; 10px;}
-위,오른쪽,아래,왼쪽

<스타일을 주기위해 선택하는 방법>

스타일을 줄때 이름을 먼저 지어준 후 이름을 불러 선택한다.

#은 아이디(id)를 부른다-객체이름
.은 클래스(class)를 부른다-반이름
태그는 그냥 직접부른다

세가지는 섞어 쓸 수 있으며
id는 페이지당 단 한번밖에 사용하지 못하기 때문에 보통 개발자들이 쓰도록 놔두고

일반적으로 클래스를 많이 사용한다.
id와 class는 이름이 같아도 상관없다. (개인의 이름과 반이름이 같을수도 있는것처럼...)

그럼 실제로 css가 어떻게 사용되는지 보자.

아래는 스타일을 두번째 방식으로 사용했다.

1. p라는 태그를 직접 불러 스타일을 주고,

2. 문장의 일부 스타일을 주고 싶은 부분에 인라인 태그인 span을 넣어
클래스네임을 임의로 부여한 후(ex1) 클래스를 불러 스타일을 준 경우이다.

그러면 아래와 같이 브라우저에서 보여진다.

위에서 스타일을 두가지 방식으로 적었는데,

{border:2px solid red; line-height:20px; font-size:13px;}

이렇게 한칸씩 띄면서 옆으로 길게 늘어쓰거나

{
font-size:16px;
color:blue;
font-weight:bold; 
}
하나의 스타일마다 밑으로 내려쓰는 방법이 있다.

어떤 방식을 사용해도 무방하나 보통 스타일이 많지 않을때는 옆으로, 스타일이 많아질때는 아래로 내려쓴다.
요새는 스타일이 많아지기 때문에 점점 내려쓰는 방식으로 많이 쓴다고...
하지만 뭐 본인이 쓰기 나름이다.

스타일은 보통 따로 지정하지 않으면 안에 들어가있는 하위 태그에 모두 같이 적용이 되지만 링크가 걸리는 a태그는 예외이다.

때문에 아래와 같이 a태그를 불러 따로 스타일을 지정해줘야 된다. (색상,언더라인 등)

<스타일을 주기위해 이름을 부르는 방법>

-부모를 부르고 한칸띄어 자식을 부를수있다.

.top1 {font-size:20px;}
.text_b .top1 {color:red;}

top1이라는 클래스를 바로 부르나 부모의 클래스네임인 text_b를 부르고

한칸띄어 top1이라는 클래스네임을 불러도 같다.

단, top1이라는 클래스네임이 여러개일때 top1만 부르면 모두 같은 스타일이 적용되므로 

어디부터 부를건지는 잘 생각해서 지정해줘야한다.

-할아버지 아들을 부르던 할아버지 아버지 아들을 부르던 같다.

.text_b2 li {color:blue;}
.text_b2 ol li {color:blue;}

-컴마를 사용해 두명을 함께 불러 스타일을 같이 적용시킬 수 있다.

.best, top1 {color:red;}

-붙여서 동급을 부를 수 있다.

dl 이면서 클래스 info 인것을 지칭

dl.info {}

call이라는 아이디를 가진 dl (한칸띄면 자손을 부름)이면서 info라는 클래스 이름을 가진 dt를 지칭
#call dl.info dt {}

div이면서 call 아이디면서 클래스이름 text_box1의 info라는 클래스 이름을 가진 dt를 지칭
div#call.text_box1 .info dt{}

*********  그럼 여기서 봤을 때 ************

p태그이면서 클래스네임이 text1 인것을 선택할때는 p.text1

p태그아래의 text1이라는 자손을 선택할때는 p .text1

이렇게 되는것이다.

스타일을 줘보면 아래와 같이 다르게 지정된다는 것을 알 수 있다.

이때 .text1 만 클래스 네임을 선택해서 불렀다면 우측 파란색과 빨간색 글씨인 부분이 함께 선택되는 것이다.

 

 

 

       

기본적인 html구조를 잘짜야 나중에 css(스타일시트)를 잘 쓸수있는건 말할것도 없다.

플래시를 보기위해선 플래시 플레이어를 설치해서 해석하게 해야하지만,

html은 해석기가 브라우저에 붙어있어 바로 볼 수 있다고 생각하면 된다.

게다가 브라우저가 위에서부터 순차적으로 읽으며 웹에 노출되기 떄문에

일단 html을 작업한 후 자바스크립트 같은걸 나중에 붙여 넣어야 브라우저 로딩속도를 빠르게 띄울 수 있다.

그럼 가장 많이 사용되는 기본 html태그를 알아보자.

일단 태그는 한줄을 전부 꽉차게 차지하는 블럭(block)요소와

한줄의 일부로 들어갈 수 있는 인라인(in-line)요소로 구분된다.

이는 매우 중요한 개념으로 확실히 알아야 한다.

(타이틀을 제외하면 모든 태그는 <body>와 </body>사이에 들어간다.)

<블럭요소인 태그>

1. 크기별 머릿말 타이틀
<h1>~<h6>

h1에서 h6까지 크기별로 글자를 나타나게 한다.

h1이 가장 크다면 h6이 가장 작은데 사실 텍스트의 크기를 지정할때

스타일로 폰트크기를 직접 지정 하기때문에 이걸 알고도 쓸 일이 있나 싶었다.

하지만 '시멘틱웹'이란건 모든일에 컴퓨터가 인식할 수 있도록 최대한 용도에 맞게 써 주는거...라고 생각된다.

(하물며 이름조차도 마구잡이로 짓기보다는 나름의 의미를 부여해서 짓는다.)

때문에 모든걸 죄다 div로 감싸거나 p태그를 사용할수도 있지만

결과물은 똑같을지라도 그런 코딩보다는 최소한 타이틀 정도는 <h>태그를 써주는게 좋은 코딩이라 한다. 

특히나 처음 배우는 입장에서는 정석대로 코딩하는 습관을 기르도록 하자.

왼쪽처럼 에디트플러스에 입력 후 파이어폭스에서 열어보면 오른쪽과 같이 웹에 출력되는걸 볼 수 있다.

2. 줄 바꾸기
<br>

html에서는 <body></body>사이에 문장을 써넣고 줄 바꿈을 하더라도 웹에서는 아래와같이 모두 한 줄로 인식되어버린다. (스페이스를 한번치든 백번치든 엔터를 치든 띄어지는 칸은 단 한칸뿐이다.)

이때 필요한 부분에 <br>태그를 넣어 다음줄로 넘길수가 있다.

3. 문단의 구분
<p></p>

텍스트의 문단을 나누어쓸땐 <p>태그를 최대한 활용하자.

물론 위에서 언급한 바와 같이 <div>로 처리해도 같은결과가 나오지만 

시멘틱한 코딩을 위해 <p>로 써주는게 좋다. 

물론 <p>를 사용했을때 자동으로 문단간격이 생겨버리는데

이건 나중에 스타일로 리셋하여 사용할수 있으므로 개의치 말자.

4-1. 순서가 없는 목록
<ul>
   <li></li>
</ul>

아래와 같이 순서가 없는 목록들의 리스트를 나열할때 쓰인다.

이때 디자이너로서 상당히 거슬리는 촌스러운 점이 찍히는데 이 역시 나중에 스타일로 해결할 수 있으니

크게 개의치 말자.

그냥 순서가 없는 목록 리스트를 작성할때 <ul>태그를 사용한다는 것만 알아두자. 

4-2. 순서가 있는 목록
<ol>
   <li></li>
</ol>

아래와 같이 순번이 매겨질 필요가 있는 목록을 작성시 <ol>태그가 사용된다.

네이버의 실시간 랭킹같은것이 이에 해당된다. 

5. dt에 대한 설명 dd
<dl>
  <dt></dt>
  <dd></dd>
</dl>

dt에 대한 설명을 dd로 한다.

dt와 dd 사이에는 아무것도 들어올수 없으며 위 4~5번 <ul>, <ol>, <dl>안에는 항상 정해진 태그만이 와야한다.

아래와 같이 <dd>가 안쪾으로 들여써진다. 

6. 모양의 의미없는 분리(구획을 나눌 때)
<div></div>

아마 웹표준 코딩을 할 때 가장 많이 사용되지 않을까 싶은데

<div>태그는 모양을 분리하고 나누어 그 사이를 꾸밀때 사용된다.

<div>를 사용하면 아래와 같이 나누어지는데 사실 텍스트에 쓰이는 <p>라는 태그가 따로있는데

굳이 <div>를 사용하는건 별로 바람직하지 않다.

물론 그렇게 코딩을 해놓아도 '틀리다'라고 꼬집어 말할 수는 없지만

시멘틱한 코딩을 위해 모든 태그를 적재적소에 사용하는 습관을 들이자. 

7. 인용구 마크업 /들여쓰기
<blockquote></blockquote>

<blockquote>는 문장의 들여쓰기가 되며 <p>와 함께 사용 가능하다.

많이 사용되진 않지만 대표인사 인사말 정도에 사용될 수 있겠다.

<인라인요소인 태그>

1.이미지태그

<img src="이미지경로" alt="이미지설명"/>

아래와 같이 이미지를 불러오는 역할을 하는데 html파일이 저장된 경로에

images라는 폴더가 있고 그 안에 flower.jpg라는 이미지 파일이 있을때

"images/flower.jpg"라는 경로를 적어주면 이미지가 웹에 보여진다. 

alt는 그 이미지에 대한 설명을 적어주면 되는데 웹에서는 보여지지 않는다.

여기서 태그의 구조를 보면,

<img src="" alt=""/>

태그이름(img), 속성(src/alt), 값("사이글")

이렇게 3가지로 구분된다.

'img'는 수많은 속성을 가지고 있지만 그 중 실제적으로 사용되는건 몇 개 안되니 굳이 다 알 필요는 없다.

나중에 심층적으로 공부할때나 보면 되겠다. 

만일 <h1>이면 이건 태그이름만 있고 속성과 값이 없는 태그인거다.

이 때,

<h1>은 '태그'라 불리지만

<h1>안녕하세요</h1> 이 한줄을 지칭할때는 'h1요소' 또는 'h1엘리먼트'라고 부른다.

2. 인라인안에서 의미없이 묶을때

<span></span> 

칸을 다 차지하는 블럭요소로 <div>가 있다면 한 줄의 일부로 들어갈 수 있는 <span>이 있다고 보면된다.

그냥 span만 쓴다면 아무 변화가 없지만 나중에 css와 함께 사용하여 문장의 일부분을 꾸미거나 할때 사용된다.

3. 링크 시킬때

<a href="#"></a> 

#안에 링크되는 주소를 써 넣으면 된다.

<a>태그에 "href"라는 속성을 가지고 있는 구조이다.

아래와 같이 했을 때 언제라도라는 글씨를 클릭하면 다음사이트로 링크가 넘어간다.

3. 문장의 강조표현

<strong></strong>

 "언제라도"라는 글씨가 굵어졌다.

4. 이태릭체

<em> 

"언제라도"라는 글씨가 기울어졌다.

코딩은 항상 눈으로만 익히는 것보다

내가 직접 타이핑해가며 결과물을 확인하는게 중요하다는걸 잊지말자~!

그럼 브라우저에서 아래와같이 출력되도록 위의 태그들을 이용해서 코딩해보자.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta charset="utf-8"/>
 <title>이력서</title>
</head>

<body>
<h1>이력서</h1>

<img src="images/picture.jpg" alt="이력서사진"/>

<dl>
  <dt>이름:</dt><dd>홍길동</dd>
  <dt>주소:</dt><dd>서울 송파구 방이동</dd>
  <dt>이메일:</dt><dd>qwer1111@naver.com</dd>
</dl>

<h4>경력</h4>
<ul>
  <li>2008년 3월-이모회사</li>
  <li>2009년 4월-저모회사</li>
  <li>2010년 5월-이런저런회사</li>
</ul>

<h4>학력</h4>
<ul>
  <li>2000년 3월-모모고등학교졸업</li>
  <li>2004년 5월-땡땡대학교졸업</li>
</ul>

<h4>가장좋아하는 일은</h4>

<ol>
  <li>소설책읽기</li>
  <li>영화감상</li>
</ol>
</body>

 

 

 

       

지난주부터 새롭게 배우기 시작한 웹표준 html4.01과 css수업.

현재 내가 배우는 html4.01버전 다음에 xhtml1.0 이 나왔는데 그건 너무 어려워 사용자수가 줄면서

대중성이 떨어져 제작자가 html5로 다시 회귀했다고 한다.

html5와 css3는 브라우저의 많은 진보를 이루었지만 익스플로러 10부터 구현되기 때문에 아직 우리나라에서

보편적으로 쓰이긴 어려운 관계로 나중에 추가로 배우더라도 일단 기초부터 탄탄히 하자는 마음에 시작했다.

뭐 입문자들을 위한 기초부터 개념을 정확히 잡아주는 단기과정이라고나 할까...

현재는 디자이너가 직접 포토샵으로 작업한 후 코딩으로 옮기지만

나중엔 html과 css를 사용하면서 바로 웹페이지를 디자인하는 시대가 올거라한다.
사실 지금의 나로선 상상하기가 어렵지만 외국은 이미 그런 디자이너들이 있다고...

근데 그럼 외국처럼 사이트처럼 엄청 간결해질거 같은데...
우리나라 홈페이지들이 현재 쓸데없이 플래시도 많이 들어가고 복잡하지만 트렌드는 꾸준히 변화하니

앞으로 바뀔지도 모르겠다.
아니 스마트폰 시대가 열리면서 모바일웹을 보면 이미 바뀌고 있는건가...

어쨌든 첫 날 끊임없이 강조한 시멘틱(semantic)웹.
코딩할때 컴퓨터가 자동으로 정보를 처리할 수 있게, 이해하고 해석할 수 있는 형태로 정보를 입력하라는거

같은데 사실 아직까지 정확한 의미는 잘 모르겠다. 음;;

1.참고사이트

웹표준을 만들고 지정하는 w2c 국제협회
http://www.w3.org/

이곳에 웹사이트의 마크업 유효성을 검사할 수 있는 validation service가 있다.
http://validator.kldp.org/

여기에 네이버 주소를 써 넣었더니 22개의 에러와 32개의 경고가 나오면서 어떤게 웹표준에 맞지 않았다고

알려준다.

코딩을 하면서 여기서 꾸준히 마크업하여 css는 몰라도 최소한 html 에러가 0이 될때까지 해보려고 시도하는게 좋을 듯 하다.

html5와 css3, 자바스크립트를 활용한 효과를 체험할 수 있는데 익스플로러 낮은버전에서는 안 열리므로 파이어폭스에서 확인할 수 있다.

www.apple.com/html5

http://dribbble.com/
http://skinnyties.com/

2.추천하는 참고서적

초보용: 실용예제로 배우는 웹표준, HEAD FIRST HTML
중급용: CSS 완벽가이드

3.준비과정

파이어폭스 브라우저의 설치
http://software.naver.com/software/summary.nhn?softwareId=MFS_100038

파이어폭스 메뉴에서 도구>부가기능>fire bug검색>fire bug 설치

애벌래모양의 버튼을 누르고 검사를 클릭해 코드를 알고싶은 부분에 마우스를 가져가면 하단에 html코딩과

스타일이 어떻게 쓰였는지를 알 수 있다.

파이어폭스 부가기능에서 web developer도 설치한다.

에디트플러스 설치

<30일 평가판 다운로드>
http://download.cnet.com/EditPlus/3000-2352_4-10018241.html?part=dl-&subj=dl&tag=button

새 문서를 연다. (단축키:Ctrl+Shift+N)

하단 ANSI를 더블클릭해 -> UTF-8로 바꾼다

열때마다 지정하지 않아도 되도록

도구>기본설정을 아래와 같이 바꿔준다.

<meta charset="utf-8"/> 추가

모든 브라우저에서 한글 폰트가 깨지지 않도록...

독타입(Doctype)선언

독타입은 모든 웹문서의 시작이로 첫줄에 위치하며 문서의 타입을 지정해준다.
html버전을 브라우저한테 알려주는것.

html4.01 버전
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

html5 버전
<!DOCTYPE html>

그러니까 html4.01 코딩을 처음 시작할때 페이지를 열어 아래와 같이 하면 된다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta charset="utf-8"/>
    <title> 상단 탭에나오는 타이틀 지정 </title>

  </head>
  
  <body>
     이 사이에 내용 입력

  </body>
</html>

 

 

 

       

어제 처음으로 웹표준 코딩수업을 받았다.

직장인 환급과정으로 하루 3시간 8번의 수업인지라 회사에 양해를 구해 한시간정도 일찍 퇴근하고

오랜만에 서울 지옥철을 경험했더랬다.

현재 월수금은 퇴근 후 수영을 배우고있고 화목은 웹표준코딩을 배우고, 틈틈히 블로그까지 병행하고 있으니

내가 근 10년간 인생을 이렇게 열심히 산적이 있나 싶다. (고3때도 이렇게 열심히 공부한거같진 않은데..;;)

이런생활을 하고있으니 나로선 요새 연애따윈 꿈도 못꾸지만 

Y언니를 보면 나보다 더 바쁜와중에 연애까지 착실히하고 있으니 참 대단하단 말밖에...

어쨌든 웹디자이너로서 몇 년전부터 이미 대세가 되어버린 웹표준 코딩을 병행할 수 있다면

큰 경쟁력을 지니게 될것...이라고 생각하여 배우기 시작했지만 과연 내가 이걸 유용하게

써먹을 수 있을 정도로 실력을 쌓을 수 있을지는 사실 의문이다.^^;;

그러려면 아마 직장을 옮겨야 되지 않을까 싶기도 하고...

뭐 현재 이직을 고려하고 있지만 그건 나중 문제고

선생님은 코딩은 머리로 익히는것보다 손으로 배우는게 더 중요하다고 하셨다.
그만큼 이론만으로는 힘드니 많은 실습을 해보라는거다.

신입이 퍼블리셔로 들어와 사람구실을 하려면 최소한 일년정도는 경력을 쌓아야 된다고...
 

내가 배우는 수업은 html4.1과 css의 입문으로 코드가 많고 기존의 복잡한 table을 사용하지않고 

html코드를 최소화한 div로 프레임을 짜고 웹페이지를 만드는 기초과정이다.

그럼 왜 웹표준 코딩을 배워야 하는걸까?

사실 난 웹표준 코딩이란 정확한 정의도 모른채 요새 점점 홈페이지들이 웹표준을 준수하도록 규정되어

막연히 배워야겠구나 하는정도로만 알고있었다.

웹표준 코딩이란 간단히 말해 모든 브라우저, 즉 한국인들이 가장 많이 사용하는 익스플로러부터해서

파이어폭스, 크롬, 사파리 등에서 모두 똑같이 잘 보일 수 있게 구동되는 홈페이지를 제작하는것이다.

이는 1994년 웹의 장기적인 발전을 위해 창립된 'w3c'(인터넷관련 국제 컨소시엄)에서 지정한 것인데

왜 그동안 이 웹표준이 지켜지지 않았냐면

과거 마이크로 소프트사의 인터넷 익스플로러가 대세이던 때,

모든 시스템이 익스플로러를 위해 만들어졌고 익스플러로는 'w3c'가 만든 웹표준 정책을 무시했다.

때문에 홈페이지 제작사들은 계속 table만을 사용해서 사이트를 만들어도 별 문제 없었고

대한민국 90% 이상이 사용하는 익스플로러에서 잘 돌아가는 사이트들을 보며

비주류였던 크롬,파이어폭스,사파리등을 위해 굳이 웹표준으로 코딩을 해야할 필요성을 못느꼈던 것이다. 

그러나 이때 구글이 전세계의 키워드 시장을 석권하며 등장했고,

플래시없이 div와 css로 만들어진 홈페이지를 검색 결과에서 우선적으로 보여 주겠다고 발표했다.

(코드들을 최소화한만큼 빠르니 어찌보면 당연하다.)

또한, 스마트폰이 등장하며 그동안 웹표준을 지키지 않은 홈페이지들이

모바일에서 제대로 보여지지 않는 결과가 나타난 것이다.

또한 익스플로러 사용자들의 비중이 점차 낮아지고 다른 브라우저들 사용자의 비중이 점점 늘어나며 

대기업과 공기업을 시작으로 모든 사이트들은 웹표준으로 바꾸어 제작하고 

인터넷 익스플로러8 부터는 웹표준을 준수하여 나왔다.

(때문에 이전버전 특히 익스플로러 5와 6에서는 웹표준으로 코딩을 했을경우 오히려 제대로 보여지지않는 결과가 나타난다고 한다.)

이제 기존 table형식의 마구잡이로 코딩되어 있던 수 많은 사이트들은 리뉴얼되며

웹표준으로 바뀌어가고 있다.

웹디자이너들과 개발자들이 이제 웹표준을 모르고서는 뒤쳐질 수 밖에 없는 것이다.

한때 전성기를 누렸던 플래시가 이제 점점 사양화 되면서 Adobe사에서는 플래시의 개발중지를 선언하였고,
앞으로 html5와 css3만으로 플래시의 한계성을 넘어 3G까지 구현할 수 있다고 하니
세상은 항상 끊임없이 변화하고 그에 발맞춰 무언가를 계속 배워야하는건

컴퓨터를 다루는 자들의 숙명일지도 모르겠다.

내가 이길로 어디까지 나아갈지는 모르겠으나 적어도 웹디자인일을 하고 있으면 익숙한 현재에 정체되어 

결코 방관할 일이 아니라는 거다.

물론 웹표준코딩을 할 수 있는 코더를 따로 둘 수도 있으나

작은 회사는 개개인이 항상 만능이 되길 원하기에...

현재 웹표준코딩이 가능한 퍼블리셔가 부족하다고 하니 재미붙이면 진로변경을 할 수도 있고 말이다. ㅋ

어쨌든 한살이라도 젊을때 최대한 배울 수 있는건 배워두는게 좋지 않은가...

뭐 기껏해야 이제 시작이지만 말이다.