[Junk box] HTML 코딩 다루시는 실무자분들께 질문좀.

최근들어 웹진형태의 디자인을 자주 다루고있는데요.

역시나 이런 느낌을 만들다보면 텍스트까지 통이미지로 가버리거나 

테이블을 써서 이미지를 좌에 텍스트를 우에 적절히 담아넣고 아래로 내려쓰는 무식한 방법의

코딩법을 사용중인데 제가 모르고있는게 아닐까 싶어 이렇게 써봅니다.

자연스레 우측에 텍스트가 담겨 내려가는 방법도 있을까요? 

[Pax]

...?
text-align="right" 쓰면 되지 않음?
<img src="이미지 주소">를 <div></div> 안에 쓰거나 <P></P> 안에 쓰거나...

HTML전문가는 전혀 아닙니다만 HTML배울 때 너무 자연스레 저렇게 됐던 것 같은데요...

[Pax]

아 죄송 책 찾아보니 코드가 틀렸네요. 잠시만...

[Pax]

<P>
<img src="URL" alt="대체 설명" align="left">
</P>

10년 전 HTML4 기준으론 이런데 요샌 다른 방법이 또 있나 모르겠네요.

[Cirrus]

그렇게하면 텍스트가 이미지 맨 아래쪽에만 걸치지 않을까싶네요.

[Pax]

시험해보니까 걸치진 않네요. 님이 원하시는 방식으로 나옵니다.
다만 이 10년전 책에 코드가 HTML5에서 폐지예정인 코드라고 스타일 시트로 하라는 말이 있는것을 보니 지금은 스타일시트로 구현하는 쪽이 브라우저 특성을 안 탈것 같습니다.

[M12]

div를 해서 박스를 어떻게 배치하고 그런걸 본거같아요..
직접 코딩하고 그러지는 않는데, 반응형 웹때문에 어떻게 넣으면 어떻게 구현되는건지 책보고 공부 좀 해보면서 그런내용을 봣던거 같아요..
기초책보고 그 박스로 나눠서 하는 그런거 해보시면 어떨까요..
텍스트 박스를 깔고 그위에 이미지박스를 얹고 영역을 겹침이 아니라 밀어내는? 공간차지하는? 그런식으로 두면 저런모양 되지않을까요?

[Cirrus]

그게 가장 근접된 코딩이라 생각되는데 글이 위로 안올라가더라구요

[부먹]

css 교재나 강의 찾아보세요
요즘은 저런걸로 테이블 안씁니다

[Cirrus]

그러게요.. 제가 생각해도 무자게 무식한 코딩법같아서 ㄱ-

[Cirrus]

최근에 저는 테이블을 거의 안쓰는데 저 부분은 도저히 div로 수습법을 몰라서 테이블로 매꾸고있네요

[스티브오스틴]

<div style="float:left;">이미지</div>
<div>text</div>

이렇게하면 됩니다.

[Cirrus]

그렇게하면 분명 텍스트가 이미지 아래로 안내려가고 우측만 가득차게 내려올텐데요?

[스티브오스틴]

아닙니당~
이미지를 넘어서는 div는 이미지 아래부터 정렬되서 내려오게됩니다~

<div style="width:300px; height:500px;">
/ <div style="background-color:black; color:#fff; width:100px; height:100px; float:left;">이미지</div>
/ <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text
/ text text text text text text text text text text text text text text text text text text text text text text text text text text text
/ text text text text text text text text text text text text text text text text text text text text text text text text text text text
/ </div>
</div>

이걸로 테스트해서 해보세요~

[Cirrus]

한번 해볼게요 히힣 기대된다

[Cirrus]

플롯레프트가 바로 해결해주네요 감사합니다 ㅋ
이런 간단한걸 몰랐네 +ㅂ+

[Pax]

이 분 방식이 제일 올바른 듯 싶습니다.
다만 레이아웃을 원하시는 방식으로 구현하려면 스타일 시트의 속성들을 모두 찾아보시는 게 좋을 것 같습니다.

사진에 글이 너무 붙지 않게 여백을 두려면 padding 속성을 사용하셔야 할 것 같네요.

[단기알바]

http://www.w3schools.com/cssref/pr_class_float.asp
css를 써보세요

[Cirrus]

답변 모두 감사합니다!