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

 

 

 

 

 

먼저 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}를 줬다.

 

*border-radius

css3의 속성 중 하나로 익스플로러 9이하에서는 적용되지 않는다.

파이어폭스, 크롬 등은 적용되지만 익스플로러9 이하를 아직까진 많이 사용하고 있는 우리나라에선 

실제적으로 html5+css3 자리잡기 위해서는 시간이 좀 더 필요하다. 

모서리가 라운딩되는 순서는 왼쪽위, 오른쪾위, 오른쪽아래, 왼쪽아래 이다.

 

*여기선 보기 편하게 <li>에 직접 스타일을 줬지만 일반적으론 <li>에 클래스 네임을 줘서 이름을 불러 사용.

 

 

 

 

어쨌든 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

 

 

 

 

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

 

 

 

 

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

댓글을 달아 주세요

  1. 너무 재밌겠어요 저도 시간나면 꼭 배워보고싶네요

    2013.08.22 15:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 재미로 배울만한건 아닙니다 ㅋ
      오늘도 좋은하루 되세요^^

      2013.08.22 18:00 신고 [ ADDR : EDIT/ DEL ]
  2. 포스팅 잘봤습니다 ㅠㅠ 설명이 이해가 잘되서 다음 강의도 부탁드려요~
    하위메뉴 생성^^;; 염치없은 부탁드립니다~!

    2013.08.31 12:37 [ ADDR : EDIT/ DEL : REPLY ]
    • 헛 저도 배운강의를 그대로 옮겨놓은거라서 여기서 너무 많은걸 바라시면 아니되옵니다 -0-;;

      2013.08.31 16:56 신고 [ ADDR : EDIT/ DEL ]
  3. 정주행

    정주행했어요 ㅋ
    잘 보고 있습니다. 내용이 잘 정리되어있는 것 같아요.ㅎㅎ

    2013.09.02 13:22 [ ADDR : EDIT/ DEL : REPLY ]
    • 봐주셔서 감사합니다 ㅎㅎ
      좋은 저녁되세요~

      2013.09.02 18:10 신고 [ ADDR : EDIT/ DEL ]
  4. ㅁㅇㄹ

    질문있는데요
    그대로 따라서 해봤는데 결과물이 계단식으로 나오네요
    학교
    병원
    직장
    공장
    학원
    이런식으로 나오는데 왜그런지 알수 있을까요?

    2013.09.12 21:31 [ ADDR : EDIT/ DEL : REPLY ]
    • 전 댓글보고 당연히 리셋 css문제인줄알았는데
      (이글참고) http://yslife.tistory.com/402

      제가 다시 해보니까 리셋을 사용해도 익스플로러에선 좀 문제가 있군요.;;

      제가 보통 파이어폭스에서 열어봐서 몰랐음 ㅠ (배울때도 그랬고)

      익스플로러를 사용하면 float:left를 그냥 li에 주면 괜찮은데 a링크에 줬을때는 그런 현상이 생기네요;;
      html5.0이 먹지않는 익스플로러 8의 낮은버전이라 그럴지도 모르겠구요...

      웃긴건 정석대로<li>를 사용하지 않고 야매로 <div>를 사용하면 또 a링크에 플롯을 줘도 제대로 먹힙니다.
      익스플로러가 웹표준사용에 문제가 많은건 알았지만 이런식으로 발목을 잡는군요...

      그렇다면 그냥 div를 사용하든가 다른방법을 써야할거같은데
      저도 이 부분은 좀 더 연구해 봐야겠습니다 ㅠㅠ

      2013.09.13 10:07 신고 [ ADDR : EDIT/ DEL ]
  5. 익명

    비밀댓글입니다

    2013.10.11 10:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 음...패딩과 마진의 영역이 헷갈리신다는건가요?
      사실 이 두가지는 연동되어 보여지고 내가 만들어가는 가상의 영역이기 때문에 헷갈리긴 합니다.

      강의까지 하기엔 제 실력이 미진한 관계로다가...ㅎㅎ

      그렇지만 스타일을 주려는 지정 대상에 background-color나 border를 넣어보면 확실히 알 수 있습니다.
      위의 메뉴처럼 색상이 칠해지는 영역이 패딩이구요. 바깥쪽은 마진영역입니다.
      테두리를 치면 테두리 안쪽이 패딩, 테두리 바깥쪽이 마진영역이겠죠?


      아무것도 없으면 이 경계선이 보이지 않기때문에 당연히 헷갈리는거구요^^;;

      패딩을 단순히 안쪽으로 여백을준다고 생각하지 마시고,
      아무것도 없는 가상의 공간이나 어떤 대상에 패딩을 넣어 지정영역을 넓혀간다고 생각해보세요.

      좀 도움이 되셨는지 모르겠네요. 효니리님도 좋은 주말되세요^^

      2013.10.11 16:30 신고 [ ADDR : EDIT/ DEL ]
  6. 익명

    비밀댓글입니다

    2013.10.24 17:58 [ ADDR : EDIT/ DEL : REPLY ]
    • 여기글은 정말 기초중의 기초만 써놓은거라서 홈피만드는데 무리가 많습니다;;
      학원을 다니시면서 좀 더 차근차근 배워가심이 나을듯하네요.ㅜㅜ

      2013.10.24 21:35 신고 [ ADDR : EDIT/ DEL ]
  7. 제이

    계속 강의 올려주시면 안될까용?ㅠㅠ

    2013.10.31 09:05 [ ADDR : EDIT/ DEL : REPLY ]
    • 이쪽을 배워놓고 요새 써먹을일이 없으니 포스팅을 안하게 되네요.
      그러다보니 잊어먹고
      저도 다시 공부하면서 올려야 되는지라... ㅠㅠ

      2013.10.31 12:34 신고 [ ADDR : EDIT/ DEL ]
  8. ㅇㄹㅇㄴ

    요거 그대로 해봤는데요~!
    크롬에서 보기에는 메뉴 텍스트 위에 점이 하나 생기더라구요 ㅡㅡ 왜그러져?....
    <li>에 만들때 목록 앞에 생기는 점같은데 ㅠㅠ

    2013.11.13 18:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 목록에 점이 생기는거면 리셋css를 따로 하지 않으신것 같네요.

      http://yslife.tistory.com/402
      이 글을 참고해주세요^^

      2013.11.14 08:52 신고 [ ADDR : EDIT/ DEL ]
  9. ja

    전체 글 다 읽어봤습니다 너무 잘보고갑니다 감사합니다~

    2016.10.05 14:37 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

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

 

 

이제 차근차근 알아보자.

 

Line_height를 지정하는 방법.

1. 퍼센트값으로 지정.
   ex) p {line-height:120%; }

2. 길이 단위 값(px,em 등)을 사용해서 지정.
   ex) p {line-height:20px; }

3. 숫자 값을 사용해서 지정.
   ex) p {line-height:1.3; }

 

 

 

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


부모인 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로 놓고 시작한다고

보면 된다^^

 

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

  1. 쪼랩

    좋은 자료 감사합니다.. 이제 강좌는 거의 다 본것 같은데요.. 궁금한게 있어서요.. 모바일홈페이지를 만들려고 하는데요.. 포토샵 사이즈를 어떻게 해야하는지 좀 알려주실 수 없을까요? 모바일홈페이지때문에 이거 공부중이거든요 ^^

    2013.08.13 11:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 헛 모바일 홈페이지를 만드시는 군요.
      제가 모바일 사이트를 만든적이 없어서 큰 도움은 못드리겠지만
      보통 디자이너들이 가로 640px을 기본으로 작업하는걸로 알고 있습니다.
      지인이 전에 320px로 작업했을때 다른 사이즈들은 맞는데 이미지가 약간 깨진다 그러더라구요.

      그러니까 초창기 나왔던 아이폰 320px을 최소 기준으로 해서 2배크기로 작업하는 거구요...
      640px로 작업한 시안으로 필요한 이미지를 자른 후 css를 사용해서 원래크기인 반으로 줄여넣는다고 합니다.

      딱히 답이 정해져 있는건 아니겠지만요.

      2013.08.13 23:14 신고 [ ADDR : EDIT/ DEL ]
  2. 쪼랩

    답변 감사합니다~~ 그런데 지금 테스트해서 올리시는파일은 뭘로 저장해서 올리시는건가요? 웹표준이니까 asp라던가 php파일로 작업해서 올려도 상관없는거겠지요? 문제가 생겼다면 제가 뭔가를 잘못한거겠죠? ㅎㅎㅎ; 강좌가 하나 더 올라왔네요 그것도 마저 보구 갈게요 ~

    2013.08.20 10:02 [ ADDR : EDIT/ DEL : REPLY ]
    • 저는 그냥 에디트플러스에서 html로 저장해서 파이어폭스로 여는건데 ^^:;
      웹표준과 asp, php가 별도로 무슨 상관이 있을런지는 잘 모르겠네요.
      (전혀 상관 없을거 같긴한데...)
      저한테 너무 많은것을 바라시면 아니되옵니다. ㅋㅋ

      그럼 좋은 밤 되세요^^

      2013.08.20 22:36 신고 [ ADDR : EDIT/ DEL ]
  3. 이거때문에 고생하고 있었는데 감사합니다~
    다른 블로그는 적용하는 법만 소개하던데, 이걸보고 응용해보니까 금방 되네요^^
    좋은 하루 되세요!

    2014.02.19 07:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 넵 구리님두요~
      저희 광고 이제 나오네여 ㅜㅜ
      신경써주셔서 감사합니다^^

      2014.02.19 09:03 신고 [ ADDR : EDIT/ DEL ]
  4. 송지

    가르쳐주신 선생님 만나뵜고 싶네요 ㅜㅜ

    몰라던 부분들 인데 이렇게 간단하게 설명해 주시다니

    요즘에는 html 포스팅은 안하시는거예요?

    2014.05.02 17:12 [ ADDR : EDIT/ DEL : REPLY ]
    • 이건 선생님이 가르쳐주신거에 제가 좀 더 공부해서 썼던건데 정리가 잘 된건가요?ㅎㅎ 전 가끔 제가 나중에 봐도 뭔소리를 써놓은건지 한참 봐야할 경우가 있어서^^;;

      제가 한참 공부할때 저도 잊어버리지 않으려고 포스팅했던거라 아무래도 요새는 포스팅을 안하게 되네요. 게을러져서 큰일이예요 ㅠㅠ

      2014.05.02 18:25 신고 [ ADDR : EDIT/ DEL ]
  5. 구데기

    좋은정보 너무 감사합니당 ㅠ,.ㅜ 수업시간에 진도못따라가서 혼자찾아보는중인데 많은 도움이되요~

    2018.04.27 11:05 [ ADDR : EDIT/ DEL : REPLY ]
    • 오래된글인데 이게 아직까지도 도움되는군요 ㅎㅎ

      2018.07.04 17:42 신고 [ ADDR : EDIT/ DEL ]

 

 

 

사실 이쪽은 아무도 안보고
나 혼자 미친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;를 사용한 것이다.

 

 

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

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

 

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

  1. 노땅프로그래머

    제가 찾아다니던 css관련 자료중 최고네요.
    이미지와 같이하여 이해도 빨랐습니다.
    이번에 psd파일 몇개로 사이트를 만들라는 오더를 받아서 작업하였는데 db와 개발시간 보다는 css와의 전쟁으로 보낸시간이 작업시간 3/4 을 차지하였으니...쩝!
    진작에 방문했다면 수월한 잡업이 되었을텐데 라는 아쉬움이 남네요.
    그래도 작업하면서 막혔던 부분이 다 풀렸네요.
    다시한번 감사하다는 말씀 드리면서 앞으로도 좋은 포스팅 부탁드립니다.
    종종 찾아뵙겠습니다.
    행복한 인생 되시길~~

    2013.07.31 20:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 사이트 제작하면서 프로그래머와 웹디자이너가 html과 css를 정확히 인지하지 않고 있기 때문에 소통면에서 문제가 많이 생긴다고 하더라구요.
      요번에 좋은 경험이 많이 되셨겠네요^^
      님도 행복한 하루되세요~

      2013.08.01 10:04 신고 [ ADDR : EDIT/ DEL ]
  2. 요코문

    진짜 설명 쉽네요!!!
    공중에 떠다니는 .... 최고!

    2013.08.20 10:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 감사합니다.ㅎㅎ
      도움되셨다니 다행이네요^^

      2013.08.20 22:28 신고 [ ADDR : EDIT/ DEL ]
  3. 호랑이기운

    웹디자인으로 전향에서.뭐 이것저것 배우고 있는데..코딩까지할려니 머리가 아프더라구요
    기초도 없고. 책만봐서는 답도 없고 , 코딩하면서 매번 인터넷자료를 디지면서 겨우겨우 만들고 그랬는데
    제가 의문을 가졌던 것들을 하나둘 여기서 배우고 나니 조금 수월해집니다.
    좋은 자료 많이 올려주세요!!! ^______________^

    2013.09.05 10:39 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 저도 웹디자인 전향하고서 코딩이 가장 싫더라구여...
      이렇게 저렇게 찾아가면서 하나하나 만드시다보면 금방 느실것 같네요.
      역시 뭐니뭐니해도 경험이 최고니까여~^^

      2013.09.06 08:30 신고 [ ADDR : EDIT/ DEL ]
  4. 감사합니다.

    독학으로 표준화 코딩을 공부하다가
    좋은 공부하고 있습니다.

    2014.04.29 16:10 [ ADDR : EDIT/ DEL : REPLY ]
    • 웹쪽을 하신다면 이제 표준화공부는 필수인듯해요.
      열심히 하세요~^^

      2014.04.29 18:33 신고 [ ADDR : EDIT/ DEL ]
  5. hahahaha

    많이 배우고갑니당^^

    2016.02.18 11:53 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

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

 

 


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

 

 

 

 

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


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

.wrap {width:800px; margin:0 auto;} <위드값이 들어가거나 이미지 같은것들이 받치고 있어야 함>


상단에 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;를 사용하는 것이다.

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

댓글을 달아 주세요

  1. 익명

    비밀댓글입니다

    2013.07.19 16:39 [ ADDR : EDIT/ DEL : REPLY ]
  2. 익명

    비밀댓글입니다

    2013.07.19 16:52 [ ADDR : EDIT/ DEL : REPLY ]
  3. 잘 보고갑니다^^

    2013.08.31 12:27 [ ADDR : EDIT/ DEL : REPLY ]
  4. monica

    저 여기 자주 올래요 강의가 너무 너무 이해가 잘되게 자세하게 설명해주셔서 너무너무 좋아요.
    정말 감사합니다 :)

    2013.09.06 14:13 [ ADDR : EDIT/ DEL : REPLY ]
    • 앗~ 감사합니다^^
      포스팅 해놓은 보람이 있군요 ㅎㅎ

      2013.09.07 00:23 신고 [ ADDR : EDIT/ DEL ]
  5. qwer

    float 정리가 잘되어있네요 잘보고갑니다~

    2014.04.03 17:07 [ ADDR : EDIT/ DEL : REPLY ]
  6. cloud

    감사합니다. 이해가 쏙쏙 되네요. ^^

    2014.07.18 17:00 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

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

 

 


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


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

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

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

 

 

 

 

 

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

 

 

 

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

 

 


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

 

 

 

 

 

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

 

 

1. 부모에 overflow:hidden; 을 준다.

 

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

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

 

 

 

 


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

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

 

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

 

 

 

 

 

 

2. 부모에 float:left;width값 준다.

 

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

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

 

 

 

 

 

 

 

 

3. 부모에 display:inline-block; 을 준다.

 

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

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

 

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

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

 

 

 

정리하자면 1번은 여전히 블럭박스의 성질이고 2번은 플롯박스의 성질로 변환, 3번은 인라인박스의 성질로

변환된 것.

그러므로 1,2,3 모두 width값을 별도로 주지 않았을때

1은 100%의 자기영역을 차지하고 2,3 번은 자기가 가질 수 있는 최소한의 값을 가진다.

물론 세개에 width값을 지정해 준다면 전부 2번과 같은 결과가 될 것이다.

 

 

 

 

 

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

 

 

 

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

 

 

 

 

 

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

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

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

  1. monica

    너무....설명을 잘해주셔서 해외에서 웹시작하는데 많이 도움이 되어요 감사합니다 :)

    2013.09.06 13:59 [ ADDR : EDIT/ DEL : REPLY ]
  2. 헤븡

    너무 좋은 설명 잘 봤습니다 :)
    근데 중간에 오타가 하나 있는 것 같아요~
    조취 -> 조치

    2013.11.18 14:22 [ ADDR : EDIT/ DEL : REPLY ]
  3. 뭔가 무서운 인형뽑기라는게 제목같다는 느낌을 받는건 저뿐....인지 -_-

    2013.11.19 10:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 엥? 그냥 네이버뉴스 아무거나 긁어서 예제로 쓴건데영 ㅎㅎ

      2013.11.19 18:30 신고 [ ADDR : EDIT/ DEL ]
  4. 박들리

    너무 잘보고 가요~! 글을 잘읽다가 오타를 찾았는데 좀 민망시럽네용ㅠ
    살색박스 4번째 줄 1은 100% ㅈㅈ영역...
    무튼 다른글들도 볼게 많네요~!!

    2015.12.17 10:16 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

[웹표준코딩 가로배치의 핵심] 떠서 이동하는 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픽셀의 두께를 가진다.)

 

 

 

 

 

 


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

 

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

  1. 익명

    비밀댓글입니다

    2013.10.24 16:56 [ ADDR : EDIT/ DEL : REPLY ]
    • mother라는 클래스네임은 이해를 돕기위해 임의로 지정한거구요
      굳이 mother라고 사용하지 않고 다르게 지정해도 상관없습니다.

      만약 님처럼 클래스네임을 따로 주지않고 태그를 직접 지정해서 스타일을 주려면 img앞에 .을 빼서
      img {float:left;} 이런식으로 사용해야합니다.

      자세한건 아래글을 참고하세요
      http://yslife.tistory.com/399

      그렇지만 스타일을 줄때는 태그를 직접 블러 사용하는것보다
      보통 임의의 클래스네임을 지정해주고 그 이름을 불러서 스타일을 사용합니다.
      여기서는 img태그가 하나뿐이라 상관없지만 안그러면 홈페이지 만들때는 수많은 img태그들에 전부 같은 스타일이 들어가 버릴테니까요.

      2013.10.24 21:37 신고 [ ADDR : EDIT/ DEL ]
  2. 제이

    아 답변 감사합니다.
    img에 직접 안주고 클래스네임이 img앞에 붙도록 되어있길래 왜 그래야하는지 몰랐는데..
    그렇네요 다른 img에 다 지정되게되네요.
    또 배우고 갑니다.

    2013.10.25 13:06 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

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

 

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

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


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

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

 

 

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

 

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

 


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

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

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

 


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

 

띄워서 왼쪽으로 배치

float:left;


띄워서 오른쪽으로 배치
float:right;

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

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

  1. 익명

    비밀댓글입니다

    2013.06.21 17:16 [ ADDR : EDIT/ DEL : REPLY ]
    • 설명이 잘되어 있다면 제가 배운 선생님이 강의를 잘 해주셨다는거겠죠^^
      전 최대한 정리해서 초보들도 알아보기 쉽게 옮겨놨을뿐 ㅎㅎ

      갑자기 웹표준 하시려면 힘들겠네요.
      열심히하세요~
      고생해서 끝내고나면 자신에게 그만큼 많이 도움될거라 생각합니다.^^

      2013.06.22 11:56 신고 [ ADDR : EDIT/ DEL ]
  2. 나그네

    이제 막 기초 책으로 떼운상태에서
    float이 정확하게 이해가 안가서 보고있는데,
    진짜 도움많이됩니다.
    감사합니다~

    2013.09.20 19:01 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 저도 배울때 float이 개념잡기 어렵드라구요.
      도움되셨다니 다행이네요~^^

      2013.09.22 23:37 신고 [ ADDR : EDIT/ DEL ]
  3. 헤븡

    잘 봤어요~
    감사한 마음으로 작게나마 광고라도 클릭 열심히 하고 가요! :)

    2013.11.18 11:54 [ ADDR : EDIT/ DEL : REPLY ]
  4. simplymango

    우와 이렇게 이해하기 쉽고 자세하게 설명해서 ㅠㅠ참좋네요 !!!!!!!!!!!!!!!!!
    감사합니다

    2013.12.05 02:33 [ ADDR : EDIT/ DEL : REPLY ]
  5. 익명

    비밀댓글입니다

    2015.01.15 17:34 [ ADDR : EDIT/ DEL : REPLY ]
    • 본문에 작성해서 사이드에 떠있는 배너를 만든다는게 무슨말씀이신지 잘 모르겠네요;;
      티스토리 블로그를 기준으로 말씀하신건가요?
      티스토리 본문글에서 사이드에 떠있는 배너를 넣는건 불가능합니다.
      엄연히 영역이 다르거든요..
      부모박스안에 자식박스가 있다 생각하시면 자식안에서 무슨짓을해도 부모에게 영향을 미치지 못하는것과 같은 이치입니다.

      2015.01.16 20:59 신고 [ ADDR : EDIT/ DEL ]

 

 

 

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

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

 

 

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

 

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

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

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

 

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

 

 

 

 

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

 

 

*블럭요소*

 

<p>태그나 <div>와 같은 블럭요소는 화면 한줄의 100%를 자기의 영역으로 가진다.
때문에 width값을 별도로 지정해주지 않으면 브라우저의 창을 줄이던 늘리던 끝까지 꽉차게 보여지는 것이다.
자리를 전부 차지해버리는 블럭요소들은 이러한 성질때문에 width값을 별도로 주지 않을 시

다른 것의 옆에 배치될 수 없다. (자신이 한줄을 다 차지해야 하므로...)

 

이때, div는 특히 모든것을 아우르는 맡형같은 존재이다.
div > p
이렇기 때문에 같은 블럭요소라도 <p>안에 <div>를 자식으로 넣을 수 없다.

 

 

*인라인요소*

 
<span>같은 인라인요소들은 width값과 height값을 줄 수 없고,

padding과 margine의 값은 인라인 글줄인 옆으로만 적용되며

위,아래의 간격은 듣지 않느다. (line-height 로만 문장의 위아래 공간을 지정할 수 있다.)

 

이때, 인라인요소 중 예외적으로 이미지<img> 태그만 width값과 height값을 지정해 줄 수 있으며
만일 이미지를 블럭요소인 <div>로 감싼다면 이미지가 한칸을 전부 차지하여
이미지 옆에 글씨를 배치시킬 수 없는 것이다.

 

 

 

 

 

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

 

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

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

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

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

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

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

 

 

 

 

 

 

 

 

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

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

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

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

 

 

 

 

 

 

 

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

 

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

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

 

 

 

 

 

 

 

그럼 여기서 한가지 의문.

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

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

댓글을 달아 주세요

  1. 쪼랩

    이미지에 스타일을 줄때 css로 넣으니까 이미지에만 테두리가 잡히고[img{border:1px solid blue;}] div에 직접 스타일을 줬더니 [<div style="border:1px solid blue;"><img src="http://placehold.it/50x50"/></div>]라인전체에 테두리가 잡히네요.. 말씀하신것처럼 라인전체가 이미지 영역이 되어서 텍스트들은 아래로 자연스레 내려와버렸구요..
    일하면서 공부하는거라 진도가 빨리 나가진 않지만 매일매일 재미있어요 ~
    벌써 금요일이네요..불금되세용!!

    2013.08.02 10:59 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 뭐니뭐니해도 본인이 직접 이것저것 해보면서 문제에 부딪히고 해결해 나가는 과정이 중요합니다.^^
      이건 수학이랑 좀 비슷한거 같아요.
      풀이과정 보면 다 알겠지만 막상 문제만보고 직접 풀려고하면 안되잖아여 ㅋ
      많이많이 연습해볼수록 좋겠죠~

      점심식사 맛나게 하세요^^

      2013.08.02 11:33 신고 [ ADDR : EDIT/ DEL ]
  2. byeol

    블로그로 차근차근 배우고 있어요 ! ㅎㅎ 늘 감사드려요 어찌 이렇게 설명을 쉽게 써 놓으셨나요

    2014.05.28 18:36 [ ADDR : EDIT/ DEL : REPLY ]
    • 제가 배웠던 선생님이 잘 가르쳐주셨던 듯 해요...

      여기서 배울 수 있는 정보는 정말 기초중의 기초이겠지만 무엇이든 시작하려면 기초가 중요하니까 도움이 되실거예요~
      열심히 하세요^^

      2014.05.29 10:13 신고 [ ADDR : EDIT/ DEL ]

 

 

 

그럼 앞의 이론을 바탕으로 간단한 박스모델을 연습해 보자.
물론 리셋 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으로 만들어 주었다.

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

 

 

 

 

 

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

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

 

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

  1. 쪼랩

    와..점점 어려워지네요 ㅜㅜ 더 헷갈리구 ..그래도 열심히 해보겠습니다~

    2013.08.01 17:10 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

디자인 된 페이지를 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

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

댓글을 달아 주세요

  1. ニャンニャン

    좋은정보 잘 보고 갑니다~~^^

    2013.05.22 09:22 [ ADDR : EDIT/ DEL : REPLY ]
  2. 쪼랩

    오타하나때문에 css가 안먹혀서 애좀 먹었어요 ㅎㅎㅎ 오늘도 좋은자료 감사합니다~

    2013.08.01 11:43 [ ADDR : EDIT/ DEL : REPLY ]
    • 아공 그러셨구나^^:;
      alt 가 시작장애인분들한테는 굉장히 중요한건데 이미지넣으면 눈에는 안보이니까 저도 실수를 많이하네요 ㅠㅠ

      2013.08.01 14:51 신고 [ ADDR : EDIT/ DEL ]
    • 쪼랩

      아뇨. alt 때문이 아니고.. 제가 소스를 치다가 잘못친거에요.. ^^ 놀라게 해드려 죄송해요 ㅎㅎ 한페이지 한페이지 열심히 따라가고 있어요~

      2013.08.01 17:11 [ ADDR : EDIT/ DEL ]
    • 아... ㅎㅎㅎ

      2013.08.01 19:44 신고 [ ADDR : EDIT/ DEL ]
  3. 학원에서 html css 배우는데 이해안가던게 여기서 이해가가는듯 하네요 ㅎㅎ 좋은정보감사해요

    2015.09.22 02:38 [ ADDR : EDIT/ DEL : REPLY ]
    • 도움되셨다니 좋네요^^
      열심히 하셔서 꼭 전문가가 되시길...

      2015.09.24 08:49 신고 [ ADDR : EDIT/ DEL ]

 

 

 

<스타일을 쓰는 방법>

 

1. html 태그에 직접 스타일을 넣는다.

 

2. 이름을 불러 head사이에 아래와 같이 넣는다.

<style type="text/css">
선택{명령}
</style>


3. css파일을 따로 만들어 저장한 후 html에 링크시킨다.

<link rel="stylesheet" type="text/css" media="all" href="css/파일이름.css"/>

 


구조와 모양을 분리하여 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;}
-위,오른쪽,아래,왼쪽

 

<이때 마진과 패딩 문법 쓰는 방법>

 

사방이 같을때
padding:20px;

 

위,아래/좌,우가 같을때
padding:20px 10px;

 

위/ 좌,우 / 아래
padding: 20px 10px 12px;

 

위/ 우/ 아래/ 좌 (시계방향)
padding: 20px 10px 12px 10px;


한 방향만 지정할때는 아래와 같이 사용하기도 한다. (margin 동일)
padding-top:10px;  =  padding:10px 0 0 0;
padding-right:10px;  =  padding:0 10px 0 0;
padding-left:10px;  =  padding:0 0 0 10px;
padding-bottom:10px; =  padding:0 0 10px 0;

 

왼쪽과 오른쪽 어느것을 사용해도 무방하다.

 

 

 


 

 

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


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

 

#은 아이디(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 만 클래스 네임을 선택해서 불렀다면 우측 파란색과 빨간색 글씨인 부분이 함께 선택되는 것이다.

 

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

댓글을 달아 주세요

  1. CSS 중요한데 간과하고 넘어가기 쉽지요 !

    오래간만에 CSS 보네요. 한동안 열심히 스킨을 수정 했었는데 CSS 보니 다시 변경하고 싶은 생각이 많이 들어요.

    체계적으로 잘 정리되어 있어 보기 좋네요.

    즐거운 하루 되세요.

    2013.05.13 08:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 넵! 저도 요새 웹표준이란걸 기본부터 배우고 있어서 나중에 잊어버릴까봐 정리해두는 중이에요^^

      님도 좋은 하루되세요~~~

      2013.05.13 08:40 신고 [ ADDR : EDIT/ DEL ]
  2. 쪼랩

    css구조, 부모자식 부르는것 ㅋㅋ 정말 중요한것 같아요.. 이 부분을 완전히 익히고 다음으로 넘어가야겠어요.. 은근히 헷갈리네요.. 그런데.. 코딩할때..어떻게 하시나요? css 먼저 작업하시나요? 아니면 html코딩먼저 하시나요? 아니면 동시에 같이 하시나요? css를 하다보니 이건 동시에 같이 진행해야 할 것 같아서요.. 나중에 해도 될거 같기도 하구...

    2013.07.29 11:30 [ ADDR : EDIT/ DEL : REPLY ]
    • 보통 전체적인 구조를 생각하면서 html마크업부터 합니다.
      html구조를 잘짜야 나중에 조정하기가 쉬우니까요
      css는 그 이후의 문제고요~
      근데 물론 복잡해지면 부분부분 병행하면서 하겠지만요

      점심식사 맛있게 하세요^^

      2013.07.29 11:58 신고 [ ADDR : EDIT/ DEL ]
  3. 흠..

    물론 웹표준 진리이지만... 그래도 역시 정신차리고 보면 막코딩한 결과물만..ㅡㅡ;;

    2015.04.23 10:26 [ ADDR : EDIT/ DEL : REPLY ]
    • ㅎㅎ 사실 코딩은 이렇게 가나 저렇게 가나 같은 결과물이 나오는경우가 많아서 정석을 따르기가 쉽지않죠^^;
      잘 안되면 어떻게든 결과물을 창출하기위해 야매(?)로 그냥 해버리니까여 ㅋ

      2015.04.24 08:41 신고 [ ADDR : EDIT/ DEL ]

 

 

 

기본적인 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>

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

댓글을 달아 주세요

  1. 익명

    비밀댓글입니다

    2013.07.26 11:14 [ ADDR : EDIT/ DEL : REPLY ]
    • 그러네요~ 실습에서 오타가 났군요 ㅋ

      드림위버에선 테두리가 생긴다구요?
      아..링크를 사용하셨나 보네요
      이미지에 링크걸때 테두리 생기는건 개발자가 해놓은 기본 속성입니다.

      그래서 보통 리셋css를 처음에 넣어서 속성의 디폴트값을 전부 없애줍니다. 이미지에 기본으로 생기는 테두리도 이 리셋을 사용해서 보더값0으로 처음에 없애고 시작하거든요.
      이건 한번만 하면 되니까요.

      http://yslife.tistory.com/402
      위 글을 보시면 좀 더 이해가 수월하실겁니다.

      웹표준이라고 드림위버랑 따로 생각하지마시고 그냥 html과 css를 가장 효율적이고 규정에 맞게 사용하는 코딩이라고 생각하시면 됩니다.
      에디트플러스가 아닌 드림위버로 코딩하셔도 전혀 상관없구요~

      단지 드림위버에선 보통 테이블을 사용하여 레이아웃을 배치하고 하는데 원래 테이블은 표를 짜기 위해 만들어놓은 속성이거든요.
      그런것들을 기존 원래의 목적에 맞게 사용하는게 웹표준이라고 생각하시면 됩니다.
      웹표준에서도 표를 짤때는 테이블 사용한답니다.^^

      2013.07.26 14:32 신고 [ ADDR : EDIT/ DEL ]
  2. 보면서 연습하겠습니다.

    2013.08.22 13:39 [ ADDR : EDIT/ DEL : REPLY ]
  3. ㅇㅎ

    이미지 태그할때 html파일이 저장된 경로에 image란폴더 ….... 이부분이 이해가 가지 않네요.
    설명해주실수 있나요?

    2013.09.11 21:50 [ ADDR : EDIT/ DEL : REPLY ]
    • 이미지 경로 지정하는부분이 이해가 안간다는 말씀이시죠?
      음...간단한건데 보여드리지않고 말로만 설명하려니 어렵네요.
      그러니까 만약 내가 제작하려는 사이트를 폴더하나 만들어서 '홈페이지'라고 이름붙이고
      '홈페이지'라는 폴더안에 html페이지들과 이미지들을 넣겠죠?
      그렇지만 수많은 이미지들이 html페이지들과 섞여있으면 불편하니까 '홈페이지'폴더안에 'images'라는 이름의 폴더하나를 더 만들어서 보통은 모든 이미지들을 이안에 넣어둡니다.
      (폴더 이름은 꼭 images라고 하지 않아도 되지만 영어나 숫자만으로 지정해야 합니다.)

      이때 이미지 경로를 잘 잡아주셔야 이미지가 엑박처리되지 않는데
      폴더가 안으로 들어가면 계속 슬러시/ 를 넣어줘야합니다.
      그러니까 images/flower.jpg 라고 한다면 images라는 이름의 폴더안에 flower.jpg라는 이미지 파일이 있다는 겁니다.

      만약 이미지폴더 이름을 images라고 지정하지 않고 예를들어 'main'이라고 만들었다면 꽃의 이미지경로는 main/flower.jpg 가 되겠죠?
      한발 더 나아가 images라는 폴더안에 main이라는 폴더하나를 더 생성해서 그 안에 이미지를 넣어뒀다면
      이미지 경로는 images/main/flower.jpg 라고 넣어주시면 되는겁니다.

      2013.09.11 22:21 신고 [ ADDR : EDIT/ DEL ]
  4. 김영관

    초짜라서 잘 이해는 안되지만 반복해서 따라 해보고 있는 중 입니다.
    하다보면 이해가 되겠지요^^
    자주 들려 공부하겠습니다.

    2014.10.17 17:09 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 차근차근 따라하시면 됩니다^^
      자주 들러주세요~

      2014.10.20 08:46 신고 [ ADDR : EDIT/ DEL ]
  5. Kim

    4번에 이탤릭체 em이 strong으로 바뀌어 잇어용^^

    2015.05.26 13:53 [ ADDR : EDIT/ DEL : REPLY ]
  6. 용이s

    안녕하세요.시멘틱마크업을 하고있는 학생입니다. h1태그다음에 h4로 바로 넘어가는데요 이것은 틀린 구조라고 알고있어요 h1에서는 바로 그아래 단계로 가야해서 h2가 맞는거같습니다.

    2016.11.11 11:02 [ ADDR : EDIT/ DEL : REPLY ]
    • 음...이력서 코딩한거 말씀하신거죠? 음..잘 이해가 안되는데 h태그 자체가 글자크기를 표현한건데 과연 그렇게 순서대로 글자크기를 맞춰서 디자인할까 싶네요. 그게 정석이라해도 좀 현실성이 떨어지지 않을까요? 작은글씨 쓴 다음에 큰클씨 쓸수도 있는건데...암튼 제 개인적인 생각입니다^^

      2017.03.24 17:31 신고 [ ADDR : EDIT/ DEL ]

 

 

 

지난주부터 새롭게 배우기 시작한 웹표준 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>

 

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

  1. vbdream

    좋은 강좌 잘 보았습니다.
    그런데 <META charset="utf-8" /> 에서 charset 속성은 HTML 5에서 새로 추가된 속성으로 알고 있습니다.
    HTML 4.x 에서는 아래와 같이 하셔야 합니다.

    <META http-equiv="Content-Type" content="text/html; charset=utf-8" />

    2013.07.24 14:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 아..그런가요?
      저 배울때 강사님이 저렇게 하라고 하셔서 ㅎㅎ
      제가 졸았나봐영~ㅋ

      정보 감사드려요^^

      2013.07.24 15:05 신고 [ ADDR : EDIT/ DEL ]
  2. 요요

    너무 감사히 잘봤습니다. 근데 마지막부분글의 예를 사진으로 보여주셨으면 더 이해가 쉬웠을 것 같아 아쉽네요 ㅜ..
    어떻게 적용하는지는 알겠는데 그렇게 적용하면 어떻게 나타나는지 모르겠어서 이해가 어렵네요 ㅠㅠ..
    초짜라

    2013.09.11 21:08 [ ADDR : EDIT/ DEL : REPLY ]
    • 음? 마지막예는 이미지로 보여드릴것도 없는데영...
      editplus를 html로 열었을때 이것저것 나오는거 대신에 그냥 저렇게 사용하면 된다는건데...^^;;

      처음에 독타입선언하고 모든 브라우져에서 한글 폰트가 깨지지 않도록 utf-8을 넣어주면 된다는 소리예요.
      저걸 적용하면 뭐가 따로 나오는게 아니라...

      2013.09.11 21:52 신고 [ ADDR : EDIT/ DEL ]
  3. 태그연습장 주소입니다. http://www.homzzang.com/page/web/tag

    위 소스 복사해 붙여넣은 후 확인하기 누르면 소스를 실행시킨 결과값이 보입니다.

    2014.02.16 03:03 [ ADDR : EDIT/ DEL : REPLY ]
  4. 저도 요새 html쪽에 관심이 많이 생기고 있네요.
    블로그 스킨수정하다가 보면 그냥 따라하다가 생기는 문제를 혼자 처리 못 하니까 답답하더라구요ㅠㅠ
    추천 서적 사서 한번 해봐야겠어요!

    2014.04.03 16:33 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 어느정도 개념만 알면 만들지는 못해도 수정정도는 하실 수 있을거예요^^
      저도 딱 그수준이네요 ㅋ

      2014.04.04 08:32 신고 [ ADDR : EDIT/ DEL ]

 

 

 

 

 

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


직장인 환급과정으로 하루 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까지 구현할 수 있다고 하니
세상은 항상 끊임없이 변화하고 그에 발맞춰 무언가를 계속 배워야하는건

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

 

 

 

 

 

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

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

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

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

 

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

 

 

 

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

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

 

 

 

 

 

Posted by Y&S

댓글을 달아 주세요

  1. 저도 한번 배워보고 싶네용 ㅎㅎ

    2013.04.29 08:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 꿈트리

    회사에서도 웹표준때문에 배워야할꺼 같다고 해서 배우고 싶은데 혹시 다니시는 학원 알 수 있을까요??

    2013.05.22 09:50 [ ADDR : EDIT/ DEL : REPLY ]
    • 저는 혜화에있는 아카데미정글이라고 직장인 환급을 받으면서 다녔습니다.
      지금은 한달에 한번씩하는 웹표준 과정이 현재 모집이 끝나서 다음달을 기다리셔야될거 같네요.

      기초반/응용반으로 나눠져있구요~선생님은 정말 실무위주로 잘 가르치십니다.^^

      2013.05.22 11:27 신고 [ ADDR : EDIT/ DEL ]
  3. 꿈트리

    자세한 설명 감사해요!! 지금 블로그 보면서 막 따라하고 있어요ㅎㅎㅎ

    2013.05.22 11:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 차근차근하시면 될 것 같아요~
      근데 저도 배우고 있는 입장인지라 틀린게 가끔 있을지도 모르겠네요^^:;
      요긴 그냥 맛배기 정도로만 보세요 ㅎㅎ

      2013.05.22 13:49 신고 [ ADDR : EDIT/ DEL ]
  4. 안녕하세요~ㅎ 웹표준은 하드코딩으로만 가능한건가요?
    제가 드림위버로만 만들다가 이번에 워드프레스랑 웹표준에 관심을 두고
    있는지라... 간만이라 개념 조차 모르는게 많네요
    포스팅 잘 보구 갑니다~!^^

    2013.08.31 12:06 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 기본개념 정도는 여기서 배우실수 있을듯해여^^

      2013.08.31 16:55 신고 [ ADDR : EDIT/ DEL ]
  5. 덕분에 좋은 글 읽고 갑니다. 요새, 저도 표준 코딩 배우느라 용 쓰고 있네요.

    2014.02.16 02:12 [ ADDR : EDIT/ DEL : REPLY ]
    • ㅎㅎ 열심히 배우세요.
      나중에 꼭 도움되실거예요^^

      2014.02.16 22:59 신고 [ ADDR : EDIT/ DEL ]
  6. cloud

    블로그 내용이 좋아서 처음부터 차근차근 공부해 보려고 합니다.

    2014.07.18 17:04 [ ADDR : EDIT/ DEL : REPLY ]