Mozilla 한국 커뮤니티

안녕하세요.
저번에 갑자기 난입해들어와 무언가 많이 물어보고 사라졌던 '냥이낙타'입니다.
이번에도 역시 저번처럼 질문을 한아름 들고왔습니다;
이번엔 굳이 웹표준에 대한 질문보다 그냥 html에 관해 많이 질문을 드릴것 같네요. 너무 기초적인 것도 물어보게 될것같아 미리 양해말씀 드립니다. '이런 것도 몰라!'라며 너무 미워하지 말고 대답 많이 달아주세요~

1. position:relative에 대하여
position의 속성으로 fixed, absolute, relative, static이 있다는 것은 알았는데, relative에 대해서는 잘 모르겠습니다. 딱히 활용 예제같은것도 본적이 없고 해서 설명 부탁드립니다.

2. table태그의 활용
보통 웹표준 이야기를 하실때 table태그를 써서 레이아웃을 하기 보다는 css로 레이아웃을 하라고 하시는데, 그것 외에는 딱히 table태그를 쓸 이유가 생각나지 않습니다. 게다가 table태그에 대해 안좋은 이야기-구조가 복잡해진다 등-을 많이 들은 것도 있고요. 그럼 웹페이지를 만들때 구조를 복잡하게 만들기까지 하는 table태그를 써야 하는 곳은 어디인가요?

3. 노프레임(원프레임) 구조로 만든 웹페이지의 링크를 클릭하면 화면 중 일부만 바뀌게 하는 방법이 있나요?

4. 레이아웃을 잡는 div태그와 레이아웃 안의 글 문단 구분용 div태그를 컴퓨터는 어떻게 구분해서 인지하는 것인가요?
예> http://mknows.etri.re.kr/translations/c ... 21-ko.html
'테이블을 안쓰고 레이아웃 하기'라는 글입니다. 레이아웃을 위해 div태그를 썼는데, 또 그 안에 내용을 채워넣을때 다시 div태그를 쓰면, 컴퓨터는 문단 종결의 /div와 레이아웃을 위해 쓴 /div를 어떻게 구분하는 건가요?

일단은 이정도입니다. 너무 초보적인 질문들인것 같긴 한데; 너무 미워하지 마시고 답변 달아주세요 ㅠ.ㅠ

그럼 좋은 저녁 되세요.

냥이낙타 wrote:2. table태그의 활용
보통 웹표준 이야기를 하실때 table태그를 써서 레이아웃을 하기 보다는 css로 레이아웃을 하라고 하시는데, 그것 외에는 딱히 table태그를 쓸 이유가 생각나지 않습니다. 게다가 table태그에 대해 안좋은 이야기-구조가 복잡해진다 등-을 많이 들은 것도 있고요. 그럼 웹페이지를 만들때 구조를 복잡하게 만들기까지 하는 table태그를 써야 하는 곳은 어디인가요?

표만들때 쓰라고 만들어진 테그입니다.
표을 사용할 곳이 있다면 쓰세요.

1. position:relative에 대하여
position의 속성으로 fixed, absolute, relative, static이 있다는 것은 알았는데, relative에 대해서는 잘 모르겠습니다. 딱히 활용 예제같은것도 본적이 없고 해서 설명 부탁드립니다.

relative와 static의 가장 큰차이는 top, right, bottom, left 등의 속성으로 offset을 지정 할 수 있느냐 없느냐입니다. 하지만 이보다 더 유용한 사용은, absolute 포지션을 사용한 블록의 기준점 역할 입니다. 보통 absolute 포지션을 주고 top, left를 주면 브라우저의 좌상단을 기준으로 위치를 지정하지만, relative 포지션 안의 absolute 블록은 브라우저가 아닌 relative 속성 블로의 좌상단을 기준으로 위치를 지정하게 됩니다.

4. 레이아웃을 잡는 div태그와 레이아웃 안의 글 문단 구분용 div태그를 컴퓨터는 어떻게 구분해서 인지하는 것인가요?
예> http://mknows.etri.re.kr/translations/c ... 21-ko.html
'테이블을 안쓰고 레이아웃 하기'라는 글입니다. 레이아웃을 위해 div태그를 썼는데, 또 그 안에 내용을 채워넣을때 다시 div태그를 쓰면, 컴퓨터는 문단 종결의 /div와 레이아웃을 위해 쓴 /div를 어떻게 구분하는 건가요?

css selector를 이용해서 구분하게 됩니다. id, class등을 지정하여 같은 div태그 이지만 구분을 할 수 있습니다. 링크해 주신 글에서 main, list1, list2 등으로 지정을 해 두면 CSS에서는 #main, #list1, #list2, div.link-list와 같이 구분하게 됩니다. 보다 자세한 것은 CSS문서의 5장 selector 편을 보시면 됩니다.

영문 http://www.w3.org/TR/CSS21/selector.html
국문 http://trio.co.kr/webrefer/css2/selector.html

3. 노프레임(원프레임) 구조로 만든 웹페이지의 링크를 클릭하면 화면 중 일부만 바뀌게 하는 방법이 있나요?

iframe이나 javascript를 사용하면 가능하지만 권장할 만한 방법은 아닙니다. 일반적으로는 서버측 언어를 써서 동일한 부분들은 계속 재활용해서 사용하는 방법을 사용합니다. 보통 "인클루드 한다" 라고들 표현 합니다.

프랙탈님, hyeonseok님 답변 감사드립니다.

좋은밤 되세요.

hyeonseok wrote:
3. 노프레임(원프레임) 구조로 만든 웹페이지의 링크를 클릭하면 화면 중 일부만 바뀌게 하는 방법이 있나요?
iframe이나 javascript를 사용하면 가능하지만 권장할 만한 방법은 아닙니다. 일반적으로는 서버측 언어를 써서 동일한 부분들은 계속 재활용해서 사용하는 방법을 사용합니다. 보통 "인클루드 한다" 라고들 표현 합니다.

현석님이 말씀하신 javascript에는...

간단하게 div 를 이용해서, 구현을 할 수 있겟죠.
하지만, 이것은 한계점이 있고....

XMLHttpRequest 를 이용하신다면, 구현은 가능하겠지만..
현석님 말씀대로, 권장할 만한 방법은 아닙니다.

찾아보다 능력이 안되서 포기하고 질문 드립니다.
css를 사용하여 홈페이지 형태 이렇게 만들 수 있나요?

|구| 메뉴
|석|________
|자| 메인
|리|

답변 부탁드립니다. 그럼 좋은 하루 되세요.

찾아보다 능력이 안되서 포기하고 질문 드립니다.
css를 사용하여 홈페이지 형태 이렇게 만들 수 있나요?

|구| 메뉴
|석|________
|자| 메인
|리|

답변 부탁드립니다. 그럼 좋은 하루 되세요.

레이아웃 보다는 먼저 HTML의 구조와 순서에 신경을 써서 생각을 하시는 것이 좋습니다.

말씀 하신 형태는...
구석자리는 absolute position으로 좌상단에 위치 시키고,
메뉴와 메인에 구석자리의 폭 만큼 margin-left를 주면 가능 합니다. CSS로 레이아웃을 작성하는 여러가지 방법들이 있으니 책이나 관련 문서를 우선 찾아 보시는 것도 좋을 것 같습니다.
background를 잘 이용해서 각 섹션별 구분 선을 넣는 것이 관건입니다. 주의 하실 점은 구분선이 div의 경계선과 반드시 일치 하는 것은 아니라는 것입니다.

현석님 말씀대로 짠 코드입니다. 제 주관적인 부분도 들어가있답니다.
완벽한 코드는 아니니 수정하시면서 레이아웃을 짜보세요.
이 코드는 nvu 1.0으로 제작되었습니다.
Doctype은 xhtml1.0 strict 입니다.

ps. 이런 독타입, 메타, html내의 id까지 이스케입되는군요.
게시판 코드를 수정하신건가..

Code: Select all

<DOCTYPE>
<html>
<head>

  <meta>
  <title>샘플</title>


  <meta>

  <style>
  #container { background-color: rgb(204, 255, 255);
    margin-left: 130px;
    margin-top: 100px;
    width: 800px;
    height: 300px;
    }

  #navigation { background-color: rgb(204, 204, 255);
    position: absolute;
    top: 0pt;
    left: 130px;
    height: 100px;
    margin-right: -130px;
    width: 800px;
    }

  #sidebar { background-color: rgb(255, 204, 255);
    position: absolute;
    top: 0pt;
    left: 0pt;
    width: 130px;
    height: 400px;
    }

  html, body { margin: 0pt;
    padding: 0pt;
    }


  </style>
</head>



<body>

<div>container<br>
디스플레이 1순위
</div>

<div>navigation<br>
디스플레이 2순위</div>

<div>sidebar<br>
디스플레이 3순위
</div>

</body>
</html>

감사합니다~ ^^

그리고 한가지 더 물어보고 싶은데요, 일단 소스부터..

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html {overflow: scroll; overflow-x: auto;}
body{margin:0; padding:0; background:black; height:100%;}
#side{width:12.6%; height:100%; float:left;}

#menu{height:9.55%;}
.menu{width:10%; float:left;}
a.menu:link{color:#ffffff; text-decoration:none;}
a.menu:visited{color:#ffffff; text-decoration:none;}
a.menu:hover{color:#000000; background-color:#ffffff; font-weight: bold; text-decoration:none;}
#active{color:#000000; background-color:#ffffff; text-decoration:none;}

#main{height:100%; background:white; color:black; line-height:150%;}
</style>
<title>notice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ko">
</head>

<body>
<div id="side"></div>

<div id="menu">
<div><a class="menu" id="active" href="notice.htm">NOTICE</a></div>
<div><a class="menu" href="profile.htm">PROFILE</a></div>
<div><a class="menu" href="tt/">DIARY</a></div>
<div><a class="menu" href="link.htm">LINK</a></div>
</div>

<div id="main">
</div>
</body>
</html>
-------
(물론 스타일을 지정한 것이 아니라 따로 css파일이 있지만, 일단은..)

질문은 #menu 안에 위치하는 .menu들의 위치를 바꾸는 것인데요,
지금은 화면 위쪽으로 붙어 있지만, #menu최하단으로 밀어냈으면 합니다.

그렇니까 지금은 이런 모양( http://nihal.woweb.net/example/notice.htm )이고
이런 모양( http://nihal.woweb.net/example/index.htm )으로 바뀌었으면 합니다.

그럼 답변 부탁드립니다. 좋은 하루 되세요.

이게 원하시는 것인지는 잘모르겠군요.
많이 고쳤습니다. 메뉴부분은 리스트이기 때문에 ul태그로 대체했습니다.
css도 캐스케이딩을 사용했습니다.
왜 단위를 %로 사용하셨는지 모르겠지만 일단 px로 교체했습니다.
독타입은 HTML 4.01 Transitional 입니다.

수정하셔서 사용하세요. 그리고 만드실 때 ie에서만 테스트하지 마시고
파폭에서도 테스트를 부탁드립니다. 또한 css 선택자 부분에 대해서
알아 보시기를 권유합니다.

ps. 원칙적으로 html을 먼저 완성시킨 다음 html을 동작시켜 빠진것이 없는지
확인한 다음 스타일을 입히는 것입니다. 스타일을 생각하면서 html을 코딩하신
다면 무의미한 코드가 양산됩니다.

이상태로는 확인하기가 불편하다고 생각되어 주소를 첨부합니다.
http://www.designyoo.com/images/notice.html

Code: Select all

<DOCTYPE> 
<html> 

<head>

  <style>
body{margin:0; padding:0; background:black; height:100%;}
ul {margin:0; padding:0; list-style:none;}
#side{width:130px; position:absolute; top:0; left:0; color:white; zindex:5;}
#menu{height:19px; margin-top:55px; margin-left:130px;  float:left; display:inline; }
#menu li {display: inline; }
#menu li span {float:left; display:block; width: 110px; background:black;}
#menu li a {text-decoration:none;}
#menu li a:link{color:#ffffff; text-decoration:none;}
#menu li a:visited{color:#ffffff; text-decoration:none;}
#menu li a:hover{color:#000000; background-color:#ffffff; font-weight: bold; text-decoration:none;}
#menu li a#active {color:#000000; background-color:#ffffff; text-decoration:none;}
#body { clear:left; background:white; color:black; line-height:150%; margin-left:130px;}
#main{ height:100%;}
  </style>
  <title>notice</title>


  <meta>

  <meta>

</head>

<body>

<div><a href="#">#sidebar입니다.</a></div>

<div>
<ul>

  <li><span><a id="active" href="notice.htm">NOTICE</a></span></li>

  <li><span><a href="profile.htm">PROFILE</a></span></li>

  <li><span><a href="tt/">DIARY</a></span></li>

  <li><span><a href="link.htm">LINK</a></span></li>

</ul>

</div>

<div>
    <div>#body 안에 #menu가 있는 형태입니다.</div>
</div>

</body>

</html>

hyeonseok wrote:
4. 레이아웃을 잡는 div태그와 레이아웃 안의 글 문단 구분용 div태그를 컴퓨터는 어떻게 구분해서 인지하는 것인가요?
예> http://mknows.etri.re.kr/translations/c ... 21-ko.html
'테이블을 안쓰고 레이아웃 하기'라는 글입니다. 레이아웃을 위해 div태그를 썼는데, 또 그 안에 내용을 채워넣을때 다시 div태그를 쓰면, 컴퓨터는 문단 종결의 /div와 레이아웃을 위해 쓴 /div를 어떻게 구분하는 건가요?
css selector를 이용해서 구분하게 됩니다.

질문의 의도가 브라우저가 html을 파싱하는 과정을 궁금해하는 것 같은데요.

브라우저는 html 코드의 <...>을 html 요소의 시작으로 간주하고, </...>을 끝으로 이해하고 파싱하죠. <...>로 시작했는데, </...> 전에 다른 <..>이 나타난다면, </..>을 찾아서 요소의 시작과 끝을 구분합니다. 그 후에 </...>을 찾죠.

요즘 브라우저들은 시작과 끝이 명확하지 않은 잘못된 html 문서들도 알아서 해석하고 랜더링해줍니다. 흔히.. ㅤㅋㅝㄱ모드라고 하죠.

Mozilla 한국 커뮤니티

홈페이지만들기에 대하여 몇가지 질문을 드립니다

홈페이지만들기에 대하여 몇가지 질문을 드립니다

Re: 홈페이지만들기에 대하여 몇가지 질문을

Re: 홈페이지만들기에 대하여 몇가지 질문을

Re: 홈페이지만들기에 대하여 몇가지 질문을

Re: 홈페이지만들기에 대하여 몇가지 질문을

Re: 홈페이지만들기에 대하여 몇가지 질문을

한가지 더 질문 드립니다.

Re: 한가지 더 질문 드립니다.

oragi의 도움으로 무사히 완성했습니다.

Re: 홈페이지만들기에 대하여 몇가지 질문을