현재 웹 페이지 서식을 지정하는 가장 좋은 방법은 무엇입니까?

Question

저는 몇 년 안에 실제 웹 디자인을 한 적이 없으며, 이제 비교적 복잡한 (정확한) 레이아웃이 필요한 웹 페이지 세트를 작성해야합니다. 나는 CSS를 탐구하기 시작했습니다. 사용 방법에 대한 아이디어를 얻으면서, 필요한 레이아웃을위한 적절한 도구처럼 보이지 않습니다.

내가 필요로하는 레이아웃에는 상단, 중간 및 하단 섹션이 있으며 각 섹션은 서로 다른 영역으로 나뉩니다. 나는 좀처럼 뭔가가 필요 :

35 %, 35 % (오른쪽 정렬), 15 %, 15 %

70 %, 15 %, 15 %

70 %, 15 %, 15 %

비율은 브라우저 너비이며 열 끝의 백분율이 위/아래 행과 같으면 열 가장자리가 충족되어야합니다. 또한 행은 내용에 관계없이 서로 아래에 있어야합니다.

CSS 내가 원하는 것을 할 것입니다 그것을처럼 보였다,하지만 내가 필요로하는 복잡성을 위해 노력하기 시작했을 때, 나는 일치하는 열을 가져올 수 없습니다, 또는 행 등, 다른 행에

흘러 무엇 정말 프레임과 같은 것이 있습니다. 원하는 위치에서 정확하게 요소를 배치 할 수 있습니다. 그게 존재합니까, 아니면 그냥 CSS와의 싸움입니까?

감사합니다.

숀.

Answer 1

CSS는 여러분이 원하는 모든 것을 할 수 있습니다. 웹 페이지의 요소 위치 지정 및 스타일 지정을위한 도구입니다. 나는 당신이 자세를 취해야한다고 생각한다 : 당신의 묘사에 기초한 절대적이고 떠있는 능력. 그것의 어려움은 브라우저간에 일관된 행동/해석을 얻는 데 있습니다. YUI's과 같은 CSS 재설정을 사용하는 것이 좋습니다. YUI에는 브라우저간에 일부 CSS 동작 (예 : 부동 및 불투명도)을 표준화하는 데 도움이되는 javascript utilities도 있습니다. YUI는 이러한 목표를 달성하는 유일한 방법은 아닙니다.

Answer 2

레이아웃에 테이블을 사용해 볼 수도 있지만 CSS 및 DIV 요소를 사용하는 것이 좋습니다. 프레임이나 테이블을 사용하려는 경우 나중에 문제가 생길 수 있습니다 (아마). 또한 CSS는 그다지 열심히 공부하는 것이 아니라 약간의 시간을 투자하고 멋진 튜토리얼이있는 W3Schools를 사용합니다.

Answer 3

CSS를 알아야합니다. 은이 아닙니다. CSS는 설명했던 것보다 훨씬 복잡한 레이아웃을 만드는 데 사용되었습니다. 그리고 그것은 웹 페이지의 스타일을 지정하고 레이아웃 디자인을 구현하는 유일한 방법입니다.

CSS는 프레임 수보다 웹 페이지 표시 및 요소 위치 지정을 훨씬 더 제어 할 수 있습니다 (프레임은 여러 페이지를로드 할 프레임을 제공하기 때문에 이러한 페이지의 스타일을 별도로 지정해야합니다).

이 오히려 광범위한 질문이다, 그래서 난 그냥이 말 것 :

• 를 사용하여 HTML 의미/구조 귀하의 콘텐츠를 구성 할 수 있습니다.
• 프레젠테이션에 CSS를 사용하십시오.
• <i>
• <font>
(대신 <em> 사용)
• <b> (대신 사용 <strong>) : 즉

는 다음과 같은 태그 또는 유사한 태그 중 하나를 사용하지 않는

• <u>

,210

는 구조 태그를 사용해야합니다 적절한 같은 :

• <h1> 최대

<pre>

<blockquote>

<p><h6>하고 의미 정확한 태그를 사용합니다. 정의 목록이있는 경우 <dl>, <dt> 및 <dd>을 사용하십시오. 폼이있는 경우, <label for="{input id}">, 예컨대 :

<label for="first-name">First Name:</label> 
<input name="first_name" id="first-name" /> 
<!-- when the user clicks on the label, the input will receive focus --> 

이 레이아웃에하지 사용 테이블을 수행하십시오. 표 형식의 데이터에만 사용하십시오. 당신이 할 때,

가 접근성과 유용성 이미지에 링크에서 title 속성과 alt 속성을 넣어 당신이 등 적절한 의미 론적 마크 업 <thead>, <th>, <tbody>를 사용하십시오.

그리고 인라인 스타일 대신 스타일 시트 (DRY 용 외부 스타일 시트가 바람직 함)를 사용하십시오.

마지막으로 Jan_V가 언급 한대로 w3schools.com은 CSS, JavaScript, HTML 및 대부분의 웹 표준에 유용한 리소스입니다. 배울 점이 많지만 다행스럽게도 웹에 다양한 튜토리얼, 참조 자료 및 기타 자료가 있으므로 도움이 될 것입니다. 을 올바르게 사용하여 CSS/HTML을 사용하면 더 높은 품질의 웹 페이지를 제작하고 유지 보수 시간을 절약 할 수 있습니다.

레이아웃에 어려움을 겪고 계시다면, 더 간단한 것으로 시작하여 진행하십시오. 예 : 균등하게 그려진 2 열, 2 행 레이아웃을 먼저 시도하십시오. 일단 작업을 시작하면 비율을 변경하고 더 많은 열/행을 추가하십시오.

Answer 4

CSS를 테이블에 사용하면 테이블에 접근성 문제가 발생할 수 있습니다. 즉, 접근성을 사용하여 사이트를 탐색하는 사람들은 스크린 리더를 사용하는 데 문제가 있습니다.

이전 답변에 동의합니다. CSS에 대해 알기 위해 시간을 할애하십시오. 올바르게 쓰여지면 스타일을 다시 사용하고 구현하고 변경하기 쉽습니다. 여러 페이지에 개별적으로 코드화 된 스타일을 변경하려고하면 두통이 생길 수 있습니다.

웹 사이트가 복잡해지면 가능한 한 유지 관리하기 쉽도록 만들고 CSS가 확실히 도움이 될 수 있도록 노력하십시오.