HTML에서 컨테이너 div를 사용해야하는 이유는 무엇입니까?
일반적인 기술은 본문 태그의 루트에 일반 컨테이너 div를 배치하는 것입니다.
<html>
<head>
...
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
이렇게하는 타당한 이유가 있습니까? CSS가 body 태그를 참조 할 수없는 이유는 무엇입니까?
컨테이너 div, 때로는 콘텐츠 div는 거의 항상보다 정교한 CSS 스타일링을 허용하는 데 사용됩니다. body 태그는 어떤면에서 특별합니다. 브라우저는이를 일반 div처럼 취급하지 않습니다. 위치와 크기는 브라우저 창에 연결됩니다.
그러나 컨테이너 div는 div 일 뿐이며 여백과 테두리로 스타일을 지정할 수 있습니다. 고정 된 너비를 제공 할 수 있으며 margin-left: auto; margin-right: auto.
또한 예를 들어 저작권 고지와 같은 콘텐츠는 컨테이너 div 외부로 이동할 수 있지만 본문 외부로 갈 수 없으므로 테두리 외부의 콘텐츠를 허용합니다.
이 방법을 사용하면 전체 콘텐츠의 스타일을보다 유연하게 지정할 수 있습니다. 스타일을 지정할 수있는 두 개의 컨테이너를 효과적으로 만듭니다. 배경 역할을하는 HTML 본문 태그와 콘텐츠가 포함 된 컨테이너의 ID가있는 div.
그런 다음 문제없이 배경 또는 기타 효과의 스타일을 지정하면서 페이지 내에 콘텐츠를 배치 할 수 있습니다. 콘텐츠에 대한 "프레임"으로 생각하십시오.
저에게 가장 흔한 이유는 다음과 같습니다.
- 레이아웃은 고정 너비를 가질 수 있습니다 (예, 고정 너비를 좋아하는 디자이너를 위해 많은 작업을 수행합니다).
- 따라서 text-align : center를 body에 적용한 다음 margin : auto를 컨테이너 div의 왼쪽과 오른쪽에 적용하여 레이아웃을 중앙에 배치 할 수 있습니다.
특정 브라우저 (<cough> Internet Explorer)는 본문의 특정 속성, 특히 width및 max-width.
나는 이것이 오래된 질문이라는 것을 알고 있지만 웹 사이트를 다시 디자인 하면서이 문제에 직면했습니다. Troy Dalmasso가 생각하게 했어요. 그는 좋은 지적을합니다. 그래서 컨테이너 div 없이도 작동 할 수 있는지 알아보기 시작했습니다.
나는 몸의 너비를 설정할 때 할 수 있습니다. 제 경우에는 960px입니다.
이것은 내가 사용하는 CSS입니다.
html {
text-align:center;
}
body {
margin: 0 auto;
width: 960px;
}
이것은 또한 고정 너비를 가진 인라인 블록을 멋지게 중앙에 배치합니다.
이것이 누구에게나 유용하기를 바랍니다.
이것은 프론트 엔드 코더가 저지르는 가장 큰 나쁜 습관 중 하나입니다.
내 위의 모든 대답은 잘못되었습니다. 본문은 너비, 여백, 테두리 등을 취하며 초기 컨테이너 역할을해야합니다. html 요소는 의도 한대로 배경 "캔버스"로 작동해야합니다. 수십 개의 사이트에서 컨테이너 div를 한 번만 사용하면되었습니다.
컨테이너 div를 사용하는 동일한 코더가 다른 모든 곳에서 div 내부의 div로 마크 업을 흩뿌 리게 될 것입니다.
하지마. div를 아껴 사용하고 간결한 마크 업을 목표로합니다.
-=-=-업데이트-5 년 전의이 답변을 편집 할 수 있기 때문에 무엇이 문제인지 확실하지 않지만 그렇게하기 전에 50 명의 담당자가 필요하다고해서 댓글에 답할 수 없습니다. 따라서 여기에서받은 회신에 제 답변을 추가하겠습니다. -=-=-
나는 내 대답이 있은 지 몇 년 후에 이것을 발견했으며 몇 가지 후속 답변이 있음을 알았습니다. 그리고 확실히 농담?
내 도메인에 대해 찾은 자리 표시 자 사이트는 내 마크 업이나 스타일링이라고 주장하지 않았거나 내 게시물에서 언급하기도했지만 한 단어도없는 기본 CMS 설치였습니다 (홈페이지에 많이 언급되어 있음). 그것은 내 마크 업과 스타일링이 아니 었습니다. 이것이 Silverstripe 기본 템플릿입니다. 그리고 나는 그것을 인정하지 않습니다. 그러나 컨테이너 div가 필요하다고 생각할 수있는 두 가지 예 중 하나 일 수 있습니다.
예 1 : 알려지지 않은 항목을 수용하도록 설계된 일반 템플릿. 이 경우 div 내부에 div가있는 기본 CMS 템플릿이 표시되었습니다.
공포.
예 2 : 바닥 글이 제대로 지워지는 3 열 레이아웃 (나는 이것이 아마도 몇 년 전에 기억하기 어려운 컨테이너 div가 필요한 시나리오라고 생각합니다.)
I did just build (not even finished yet) a theme for my domain and started loading content. For this easily achieved example of semantic markup, click the link.
Frankly, I'm baffled that people think you actually need a container div and start with one before ever even trying just a body. The body, as I heard it explained once by one of the original authors of the CSS spec, was intended as the "initial container".
Markup should be added as needed, not because thats just the way you've seen it done.
div tags are used to style the webpage so that it look visually appealing for the users or audience of the website. using container-div in html will make the website look more professional and attractive and therefore more people will want to explore your page.
Well,
The container div is very good to have, because if You want the site centered, You just can't do it just with body or html... But You can, with divs. Why container? Its usually used, just because the code itselve has to be clean and readable. So that is container... It contains all website, in case You want to mess with it around :)
Good luck
Most of the browser are taking web page size by default. So, sometime page will not display same in different browser. So, by using user can change for specific HTML element. For example, user can add margin, size, width, height etc of specific HTML tag.
참고URL : https://stackoverflow.com/questions/354739/why-should-i-use-a-container-div-in-html
'Programing' 카테고리의 다른 글
| 기본 클래스의 사용자 정의 변환 연산자 (0) | 2020.11.21 |
|---|---|
| React Navigation vs. React Native Navigation (0) | 2020.11.21 |
| SSL 인증서가 서버 IP 주소에 바인딩되어 있습니까? (0) | 2020.11.21 |
| @ Html.LabelFor 템플릿을 어떻게 재정의 할 수 있습니까? (0) | 2020.11.21 |
| GCC는 루프 내에서 증가하는 사용되지 않는 변수를 어떻게 최적화합니까? (0) | 2020.11.21 |