어떻게 전통적인"HTML 은 콘텐츠에 대해"라고 생각 처리하는 동적 포맷?

StackOverflow https://stackoverflow.com/questions/719853

문제

그래,내가 읽고 이해하기 전에 다음과 같은 진리에 관하여 웹 개발:

  1. HTML 은 콘텐츠에 대해
  2. CSS 은 프리젠테이션
  3. 자바 스크립트를 위한 행동입니다.

이것은 일반적으로 모든 벌금과 좋은,그리고 내가 찾는 경우 엄격하게 따라 이 지침을 사용하여 외부 .css 고 .js 파일을 만드는 사이트 내 전체 훨씬 더 많이 관리할 수 있습니다.그러나 나는 생각을 발견하는 상황을 나누기 이 라인의 생각했다.

나는 사용자 지정 포럼 시스템 내가 내 하나의 사이트입니다.또한 일반적인 포맷을 위해 같은 시스템(링크,이미지,굵은 이탤릭체고 밑줄,etc.)나는 내 사용자를 설정하는 형식의 자신의 텍스트를 포함하여,컬러,글꼴 및 크기입니다.이 모든 것에 저장된 데이터베이스의 포럼으로 메시지 포맷 코드,그리고 그 번역을 해당하는 HTML 페이지를 볼 때.(조금 비효율적,기술적으로 번역해야 하기 전에 저장하지만,이 방법으로 나는 일할 수 있는 시스템에 살고있다.)

의 특성으로 인해 이와 다른 유사한 시스템,나는 끝까지 많은 태그의 주위에 떠있는 결과 HTML 코드,내가 믿는 비공식적으로 사용되지 않기 때문이 나 있어야 CSS 를 사용하여 포맷합니다.이 휴식 규칙 및 가하는 상태는 HTML 가 포함되어 있지 않아야 합식 정보,선호하는 정보가에 위치한 CSS 문서를 대신 합니다.

이 있을 달성하는 방법을 동 서식에서 CSS 포함하지 않고 그 정보에 태그가?그것은 문제 가치가 있습니까?거나 고려하고,묵시적 제한의 적절한 코드,나를 제한 내용을 할 수 있는 을 수행하기 위해"올바른"형식을 지정하는 방법에 내 코드는?

도움이 되었습니까?

해결책

사용해도 괜찮습니다 style 요소에 대한 속성 :

This is <span style="color: red;">red text</span>.

사용자가 일부 옵션으로 제한되면 사용할 수 있습니다. classES :

This is <span class="red">red text</span>.

Semantic HTML 요소를 사용하십시오.

This is <strong>strong and <em class="blue">emphasized</em></strong>
text with a <a href="http://www.google.com" rel="external">link</a>.

일반적인 의미 론적 요소 및 사용자 공간 용어 :

  • <p> (단락)
  • <strong> (굵게)
  • <em> (이탤릭체)
  • <blockquote> (인용 부호)
  • <ul> 그리고 <ol> ~와 함께 <li> (기울기)
  • 더...?

포럼 게시물에서는 덜 일반적이지만 여전히 사용 가능한 의미 론적 요소 :

  • <h1>, <h2>, 등 (제목; 페이지가 이해되도록 값으로 시작하십시오)
  • <del>, 그리고 더 적은 정도로 <ins> (파업)
  • <sup> 그리고 <sub> (각각 슈퍼 스크립트 및 첨자)
  • <dl> ~와 함께 <dt> 그리고 <dd> (쌍 목록)
  • <address> (연락처 정보)
  • 더...

다른 팁

이는 까다로운 방법입니다.내가 생각하는 것에 대해 당신이 정말로 원하는 것을 허용하는 방문자는 않습니다.임의 색 및 글꼴?보이는 오히려 쓸모가 없다.조,제목,링크,이미지?잘 처리할 수 있는 충분히 쉽게 제한하여 그들의 태그/를 사용하여 위키텍/forumtext 태그만 이러한 기능을 제공합.

사용자에게 공급되는 HTML 페이지 헤드에 인라인 스타일 시트를 동적으로 구축 할 수 있습니다. 페이지 헤드를 넣고 사용자가 구성 할 수있는 요소를 대상으로합니다.

또는 가장 일반적인 조정을 특징으로하는 외부 스타일 시트를 사용한다는 개념이 있지만 가능한 모든 대안을 설명하기 위해 수백 개가 있습니다. 이것을 사용하는 경우 특정 글꼴 크기, 색상 등을위한 외부 스타일 시트가 필요하며 헤더의 것과 동적으로 연결됩니다. 외부 스타일 시트와 마찬가지로. 이것은 거의 견딜 수 없을 정도로 복잡합니다.

옵션은 괜찮을 것입니다.

예로서:

<STYLE>
    h1,h2,h3,h4 {font-family: Helvetica, Calibri;}
    p    {font-size: 1.2em;    // Populate all this with values from the Db.
         font-weight: bold;
         }
    a    {text-decoration: underline;
         color: #f00;
         }
</STYLE>

또한 구성 가능한 측면을 적용하기 위해 사용자 당 스타일 시트를 만들 수 있다는 것은 나에게 일어났습니다. 사용

<link href="/css/defaultstylesheet.css" type="text/css" rel="stylesheet" media="all" />
<link href="/css/user1245configured.css" type="text/css" rel="stylesheet" media="all" />
<!-- clearly the second is a stylesheet created for 'user 1245'. -->

이 접근법의 보너스는 브라우저에서 스타일 시트를 캐싱 할 수 있다는 것입니다. 사용자 시트에 특정 사용자 경로가 없다면 CSS 폴더를 혼란스럽게 할 수도 있지만? 와우, 이것은 복잡해질 수 있습니다 ... :)

사용자의 취향과 자신의 개인 스타일에 따라 다양한 스타일을 가질 수 있기 때문에 이것은 흥미로운 상황입니다.

이 상황을 효율적으로 관리하기 위해 할 수있는 일이 몇 가지 있습니다. 아마도 가장 쉬운 것은 단지 스타일을 사용하는 것입니다.

<p style="color: blue; font-size: 10pt;">Lorem Ipsum</p>

이것은 빠르고 쉽습니다. 그리고 이것은 스타일의 재정의가있는 것임을 기억하십시오. 그러나 당신이 말했듯이, 이것은이 컨텐츠-표현 분리 패러다임에 적합하지 않습니다. 조금 더 분리하려면 페이지로드에 대한 CSS 정보를 작성한 다음에 삽입 할 수 있습니다. <head> HTML의 태그. 이것은 기술적으로 기술적으로 분류하지 않더라도 여전히 HTML과 CSS를 다소 뚜렷하게 유지합니다.

다른 옵션은 CSS를 빌드 한 다음 파일로 출력하는 것입니다. 그러나 이것은 효율적이지 않을 것입니다 (제 생각에는). 모든 페이지로드에서 사용자의 고유 한 환경 설정을 설명하는 새 CSS 파일을 구축하려면 이렇게하면 목적이 패배 할 수 있습니다. 두 번째 옵션과 동일합니다. <head> 태그, 당신은 단지 분리 된 것처럼 보이게 만들고 있습니다. 캐싱과 같은 기술을 사용하여 CSS 파일을 얼마나 자주 구축 해야하는지 제한하려고 시도하더라도 끝이 실제로 수단을 정당화 할 것인가?

이것은 완전히 주관적인 주제이며 결국 가장 편한 것을 선택해야합니다.

나는 당신이 사용하는 프레임 워크 나 심지어 언어를 사용하는지는 모르지만 예를 들어 Django는 특정 템플릿 언어를 사용하여 HTML이 출력되는 것을 나타냅니다. 좋은 솔루션은 사용자가 선택한 내용에 따라 다른 "템플릿"을 단순히 사용하는 것입니다. 이런 식으로 당신은 "규칙"을 깨거나 DOM에 떠 다니는 기본적으로 사용되지 않은 태그를 가질 필요가 없습니다.

내가 완전히 오해하지 않는 한 ...!

이를 관리하는 가장 쉬운 방법은 사용자의 설정에 따라 페이지가 생성 될 때 동적 CS를 방출하는 것입니다. 그런 다음 모든 것이 수행해야 할 작업을 수행하고 있으며 서버는 사용자의 설정을 적절한 CSS로 변환하는 작업을 수행하고 있습니다.

CSS 가이 작업을 수행하면 HTML에서 적절한 속성을 사용할 수 있습니다 (id 그리고 name 그리고 class 그리고 당신이 원하는 방식으로 모든 것을 깨끗하게 형식화 할 CSS를 방출합니다.

무엇이든하기 전에 혜택과 비용을 고려하십시오. 실제로 코드에 실제로 무엇이 잘못 되었습니까? 태그 수프와 결합 된 컨텐츠/프레젠테이션은 웹 사이트가 좋지 않기 때문에가 아니라 유지하기가 어렵 기 때문에 피해야합니다. HTML/CSS가 생성되는 경우 출력이 무엇인지 누가 신경 쓰나요? 당신이 지금 가지고있는 것이 작동한다면, 그것을 고수하십시오.

나는 당신이 제한된 흰색의 안전한 옵션 목록 만 허용한다고 가정하므로 이미 사용자의 HTML을 구문 분석하고 있다고 가정합니다.

HTML을 렌더링 할 때 각 스타일 선언을 클래스로 변환 할 수 있습니다.

<span style="font-family: SansSerif; font-size: 18px;">Hello</span>

에게:

<span class="SansSerif"><span class="size_18px">Hello</span></span>

목록을 생성하고 유지하는 힘이 있습니다. 그러나 각 조합에 대한 클래스에 대해 걱정할 필요가 없습니다. 물론 주요 문제입니다.

또한 사용자의 CSS가 모두 교체되어 필터를 통해 미끄러질 가능성이 적기 때문에 추가 보안의 이점이 있으며, 이는 모든 CSS가 유효하도록해야합니다.

사용자가 색상, 글꼴 패밀리 및 크기를 포함하여 텍스트 형식을 설정할 수있었습니다. 이 모든 것은 포럼 메시지의 데이터베이스에 의해 포맷 코드로 저장된 다음 페이지를 볼 때 해당 HTML로 변환됩니다.

따라서 HTML을 통해 서식을 수행했으며 CSS를 통해 서식이 수행되어야한다는 것을 알고 있으며 이것이 문제라는 것을 알고 있으며, 300 단어를 요구하는 한 문제에 대해 질문을 받았습니다 ...?

질문을 공식화 할 수 있지만 해결책이 보이지 않습니다 ...?

여기, 나는 당신에게 힌트를 줄 것입니다 :

이 모든 것은 포럼 메시지의 데이터베이스에 의해 포맷 코드로 저장된 다음 해당 대응으로 번역됩니다. HTML CSS 페이지를 볼 때.

그게 도움이 되나요?

이 질문은 농담입니까?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top