HTML로 스타일을 직접해서는 안되는 이유를 설명합니다.

ItamarG3 08/15/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

나는 최근에 가이 사이트 에 따라 html에서 사용되지 않는 것으로 나타났습니다. 스택 오버플로 (Stack Overflow ) 에 대한 대답 에서 CSS로 선택 윤곽을 대체합니다. 변경 사항에 대한 설명은 html이 문서 구조에 관한 것이며 레이아웃과 애니메이션 및 스타일링 등은 CSS에서 수행해야합니다.

이것은 나를 생각하게했다 :

html 태그의 style 속성을 설정하는 것과 CSS와 HTML에 대한 학생들의 이해를 높이기 위해 CSS를 사용하는 것의 차이점을 명시 적으로 가르쳐 주겠습니까?

범위를 좁히기 위해 명시 적으로 가르쳐줌으로써 학생들이 자신의 웹 페이지 스타일을 더 쉽게 만들 수있는 예나 설명을 찾고 있습니다 . 가급적 설명.

"명시 적으로 가르치는 것"이 ​​의미하는 바는 실제로 .CSS를 통해 스타일 지정하는 것과 비슷한 제목으로 수업을 진행하는 것입니다.

필요한 경우 일부 컨텍스트 :

학생들은 HTML, JavaScript (매우 기본), JSP 및 SQL과 같은 기본적인 웹 디자인을 배웁니다. 그들은 이것을 1 년 동안 배우고 연말에는 그들이 웹 사이트를 가지고 있어야합니다. 나는 CSS에 관한 교훈이 더 나은 웹 사이트로 이어질 지 궁금합니다.

5 Comments
3 Puppy 07/30/2017
여기에서 핵심적인 문제는 스타일을 HTML로 직접해서는 안되며 CSS를 사용하는 것이 더 낫다는 것을 가정하고 있다는 것입니다. 그 어떤 것도 사실이 아닙니다.
ItamarG3 07/31/2017
@ 음모 잘, 질문의 부분은 내가 그것을 별도로 가르쳐야하는지 여부입니다. 그렇지 않으면 스타일 시트를 사용하지 않을 것입니다. 하지만 당신은 어디서나 어떤 웹 사이트도 실제로 html로 모든 CSS를 하드 코드한다고 생각합니까? Every div 에는 style 속성에 산이 있습니다.
1 David Spence 07/31/2017
이 사이트는 css를 별도로 유지하는 힘을 보여줍니다. csszengarden.com - 같은 구조, 다른 CSS 스타일 시트.
ItamarG3 07/31/2017
@DavidSpence 좋은. 나는 그것을 확실히 사용할 것이다.
1 no comprende 07/31/2017
당신이 무엇을하든, HTML을 Regex로 파싱하는 것에 대해서는게시물을 보여주지 마십시오. 그 (것)들에게 악몽을 줄 수 있었다!

12 Answers


richard 07/30/2017.

나는 스타일 시트를 몇 개 만들어 학생들이 HTML에 적용하도록하는 것을 좋아합니다. 그런 다음 개별 스타일 시트가있는 능력을 볼 수 있습니다.

그런 다음 스타일 시트 편집을 시작할 수 있으며 하나의 작은 변경의 힘이 모든 제목이나 모든 단락 등을 바꿀 수 있음을 알 수 있습니다.

나는 또한 과거에는 일련의 버튼이있는 HTML 파일을 작성했습니다. 이 버튼들은로드 될 다른 CSS 파일을 트리거합니다. 아주 간단한 JavaScript였습니다.

그들이 분리되어 있어야한다고 대답해야한다.

스타일과 컨텐트를 분리하여 보관하는 것은 W3 및 다른 많은 사람들이 권장합니다. 그것은 우려의 분리와 단일 책임을 구현합니다. 소프트웨어 디자인에서 매우 중요한 패턴.

CSS 파일을 분리하기위한 교훈을 얻으 려한다면 대답하십시오.

예. 이러한 것들을 분리하여 보관하는 것이 중요하다면 학생들에게 분리 된 상태로 유지하도록 가르쳐야합니다. HTML과 함께 사용하도록 교육하지 않아도되므로 시간을 절약 할 수 있습니다 (이 방법을 사용하면 가르치지 않아도되므로 두 번 시간을 절약 할 수 있습니다).


저는 한 두명 (수업이 아닌)으로 만 이것을했습니다.

5 comments
ItamarG3 07/30/2017
두 번째 단락은 특히 유용합니다. 하지만 인라인 HTML style 속성 대신 CSS 스타일 시트를 작성해야하는 이유와 방법을 가르치는 데 정말로 헌신해야하는지에 대한 답변이 없습니다.
richard 07/30/2017
If에 대한 부분적인 답변과 왜 그것에 공헌할만한 이유가 추가되었습니다.
1 Buffy 07/30/2017
나는 유엔 가르침이 모든 사람의 시간을 낭비하는 데 특히 동의합니다. 나쁜 습관이 형성되고 강화되기 전에 오해를 잡는 것이 가장 좋습니다.
1 richard 07/30/2017
@tim, 이것은 단지로드 optimisation 입니다. 개념성은 여전히 ​​분리되어 있어야합니다. 그러나 구글은 같은 파일에 넣는 것을 말하고있다. 그들은 각 비트를 개별적으로 스타일을 지정해야한다는 말은 아닙니다. 그들은 CSS 파일에있을 수있는 것을 가져 와서 html의 <style> 섹션에 추가한다고 말합니다.
1 Darren 07/31/2017
학생들에게 코드에 영향을 미치는 다양한 스타일 시트를 제공하는 대신 반대 방법을 시도합니다. HTML로 인라인 스타일을 가르친 후에 스타일에 대한 CSS 문서를 사용하는 페이지를 제공하고 인라인 HTML을 사용하여 배운 것과 동일한 기술을 사용하여 스타일 시트를 만들 것을 요청하십시오. 그들을 한 곳에 모으는 것). 그런 다음 수업에 참여한 모든 사람들이 자신의 스타일 시트를 일반적인 시험 주제 (제공 한 것)에서 비교하고 그 가능성을 볼 수 있습니다.

Buffy 07/30/2017.

단순하고 특별하고 앞으로 변경되지 않으며 한 종류의 장치에서만 볼 수있는 페이지를 만들고 싶다면 HTML 형식으로 직접 스타일을 빌드하십시오. 응답을 얻기 위해 한 장치에서 한 번만 실행되는 프로그램을 작성한 후에도 프로그램이 쓸모 없게됩니다. 따라서 신중하게 코딩 할 이유가 없습니다. "빠르고 더러운"그런 것들을 위해 작동합니다.

However 사물은 변화하고 웹 페이지는 화면 크기가 다양한 장치, 심지어 컬러 모델에서도 볼 수 있습니다. 미래에는 아직 존재하지 않는 장치에서 볼 수 있습니다.

따라서 중요하고 오래 지속되며 향후 유지 관리해야하는 사이트를 구축하려면 CSS를 사용하십시오. 중요한 C 프로그램을 모두 main 프로그램으로 작성하지는 않지만 적어도 동일해야하지만 재사용되어야하는 사항은 제외해야합니다. 간단한 C 프로그래밍에서 우리는이를위한 함수를 배제합니다. HTML에서 우리는 스타일링을 배제합니다. 더 깊은 수준에서 서버 측은 또한 많은 데이터 등을 배제합니다. 이렇게하면 동일한 것으로 간주되고 동일하게 유지되며 다른 수준과는 독립적으로 한 수준의 디자인을 수정할 수 있습니다.

이것은 정확히 똑같은 것은 아니지만 Google의 주요 페이지의 기본 코드를 살펴보십시오. 나는 그것을 함께 모으고 유지하기 위해 그들이 무엇을 사용하는지 모르지만, 그것은 텍스트 편집기 일뿐입니다. 앞 페이지 는 레이아웃이 매우 간단하지만 자주 변경됩니다.

Note to the Instructor 학생의 과제물을 채점 할 준비가되면 화면 해상도가 다른 여러 장치에서 볼 수 있습니다. 그러나 나는 당신이 그들에게 장치 별 CSS를 제공하도록 제안하지는 않는다.

그 점에 관해서는 데스크톱에서 StackExchange 페이지 중 일부를 휴대 전화와 비교해보십시오. 그리고 충격을 줄이려면 일부 페이지의 소스 및 스타일 시트를 살펴보십시오.

2 comments
1 Luke Sawczak 07/31/2017
함수와의 비교가 좋다. 문제의 죄가 소스 HTML에 직접 스타일 속성을 제공하고 있다고 가정합니다. 그렇다면 메서드의 본문을 가져 와서 메서드를 호출 할 곳을 지정하는 것과 비교할 수 있습니다. 극도로 역효과를 가져라.
no comprende 08/01/2017
진정한 충격을 주려면 Microsoft 페이지와 Moodle의 소스와 스타일 시트를보십시오! 수백 줄의 길이가 될 수 있습니다. HTML의 원래 개념은 "아직 존재하지 않는"장치에서 작동한다는 것입니다. 그리고 현재로서는 너무 많은 화면 크기가있어 변수 일뿐입니다.

AnoE 07/30/2017.

다른 CSS 파일을 대체하는 only 으로 CSS 단독으로 무엇을 할 수 있는지 이해하려면 CSS Zen Garden로 이동하십시오 . 각 페이지마다 똑같은 HTML을 사용하고 .css 파일 only 바꾸면 어리석은 야생 페이지가됩니다. 고요한 작은 무로부터 3D 스크롤링 큐브까지 ...

그런 다음 스킬 셋이 HTML을 만드는 데 필요한 것과 스킬 셋 (특히 극단적 인 CSS)이 CSS가 크게 다르다는 것과 HTML이 정보 매체로서 만 기능한다는 것을 설명합니다.

더 좋은 점은 (블라인드를위한) 화면 판독기를 설치하는 것입니다 - 무료 사용제한된 화면 판독기가 있습니다 - 큰소리로 말하면 어떻게 동일한 HTML이 "보이는"지를 보여줍니다.

또한 시각 장애인을위한 도구는 구조화가 잘되어있는 경우 HTML에서 링크 텍스트 등을 추출 할 수 있으며 키보드로만 페이지를 탐색 할 수도 있습니다. 시력이 좋더라도 그렇게 기울어 져 있습니다.

마지막으로 콘텐츠와 스타일을 잘 구분 한 페이지는 휴대 기기에서 작업 할 가능성이 더 높습니다. 핵심 단어는 반응 형 디자인으로 콘텐츠는 자유롭게 원하는 해상도로 자유롭게 이동할 수 있습니다.


thehayro 07/30/2017.

범위를 좁히기 위해 명시 적으로 가르쳐줌으로써 학생들이 자신의 웹 페이지 스타일을 더 쉽게 만들 수있는 예나 설명을 찾고 있습니다. 가급적 설명.

리차드 (Richard)가 말했듯이, 학생들은 스타일의 간단한 편집이 어떻게 모든 요소를 ​​바꿀 수 있는지를 알 수 있습니다.

예를 들어, 학생들이 html에서 스타일을 분리하는 이점을 느끼게 할 수 있습니다. 즉, 그들에게 html로 몇 가지 요소 (예 : 요소 배경색)의 스타일을 지정해야하는 연습을하십시오. 그런 다음 각 요소를 다른 색상으로 변경하십시오. 이 교훈은 HTML에서 스타일을 분리하면이 작업이 훨씬 적은 시간이 소요될 수 있음을 이해하게하는 것입니다. 그런 다음 css에서 한 줄을 변경하는 방법을 보여줄 수 있습니다. 그러면 모든 요소 배경색이 변경됩니다.

4 comments
thesecretmaster♦ 07/30/2017
안녕하세요! 컴퓨터 과학 교육자에 오신 것을 환영합니다!
Puppy 07/30/2017
또는, 정상적인 사람과 같은 코드를 통해 HTML을 생성 할 수 있습니다.이 경우 별도의 스타일 시트없이 모든 요소의 색상을 변경하는 것이 쉽습니다.
1 thehayro 07/30/2017
확실한. 이는 웹 페이지가 표시되어야하는 요구 사항 (모바일 / 데스크톱)에 달려 있습니다. 그러나 내가 이해할 수있는 한 질문은 HTML과 CSS의 분리가 필요한 이유와 이유를 설명하는 방법이었습니다.
no comprende 08/01/2017
CSS를 배울 때 크기가 큰 체스 판 만들기 작업과 머리글과 바닥 글이있는 표준 3 열 페이지 레이아웃을 제공했습니다.

SpiritBH 07/31/2017.

자문 해보십시오 : 왜 우리는 어떤 형태로든 코드를 분리합니까?

거의 모든 단일 프로그래밍 / 스크립팅 언어에는 분리 및 위임이 있습니다. 우리는 모든 코드를 더 쉽게 추적 할 수 있고 문제를 더 쉽게 식별 할 수 있도록하기 위해 이렇게합니다 (프로그래머가 오류가 없기 때문에 필연적으로 새어 나올 것입니다)

그래서 저는 CSS에 대한 헌신적 인 교훈이 무엇인지에 대한 이해를 돕기 때문에 좋은 생각이라고 생각합니다. 소스를 볼 때 모든 HTML이 올바르지 만 모든 메이크업이 뒤죽박죽이어서 CSS를보아야한다는 것을 이해하는 데 도움이됩니다.

게다가 CSS는 크고 유연하며 사물 주위에 좋은 경계를 두는 것보다 훨씬 많은 작업을 수행 할 수 있습니다. 클래스가 할 수있는 일과 수행 할 수있는 작업의 복잡성을 보여주기 위해 HTML과 CSS를 너무 깊이 혼용하는 것이 현명하지 않은 방법으로 더 많은 것을 집으로 몰고 갈 것입니다.

결국, HTML (또는 그 문제에 대한 코드)에서 CSS의 분리는 개발 atticate; 그것의 창작에 대해 더 쉽고 쉽게 제어 할 수있는 개발자에 대한 기능을 (더 잘) 기능하는 것이 아닙니다.

그 메모에서 각자 다른 사람들이 일하는 것을 확인하고 싶다면, 팀에서 일할 때 위임 된 코드를 갖는 것이 얼마나 중요한지를 알 수 있습니다.

1 comments
ItamarG3 07/31/2017
당신은 매우 흥미로운 점들을 제기합니다. 감사! 컴퓨터 과학 교육자 환영

gabe3886 07/31/2017.

DRY 코드 (직접 반복하지 마십시오)를 도입하는 것이 약간 다를 수 있습니다.

CSS를 사용하여 스타일링을 수행하면 HTML 요소에 클래스를 추가하기 만하면 스타일이 유지됩니다. 수동으로 모두 추가해야하는 경우 한 부분을 변경해야하는 경우 많은 부분을 변경해야합니다.

W3 학교 에서 일러스트레이션 아이디어를 훔치려면 단락의 배경색을 다르게하고 싶다면 다음과 같이하면됩니다.

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

하지만 주문을 변경하여 2,4,3,1이지만 채색을 유지하려면 각 태그에 내장 된 모든 스타일을 변경해야합니다. 그것이 여러 페이지에 걸쳐 있다면, 작업량이 엄청나게 커질 수 있습니다.

내가 CSS에서 해낸다면, 다음과 같이 할 수 있습니다 :

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

이제 더 이상 내용이 무엇인지 신경 쓰지 않고, 내가 좋아하는 방식으로 주문할 수 있으며 스타일은 여전히 ​​작동합니다. 많은 노력이 변경되었습니다. 순서를 무시하고, 더 현명한 색상으로 변경하여 쉽게 읽을 수있게하려면 CSS의 값을 한 번 변경하고 각 일치하는 DOM 항목에 적용합니다.

그 너머 (CSS가 헤드 태그의 HTML에 임베드 될 수 있음)를 넘어서 파일로 분리하여 포함 시키면 (더 현명한) CSS를 여러 파일로 반복 할 필요가 없음을 의미합니다. 내가 가진 페이지. 헤더에 CSS 파일을 포함하고 스타일이 적용됩니다. 이제 색상을 변경하거나 스타일을 추가해야하는 경우 인라인 스타일을 사용하지 않았을 때와 중복되지 않아도 동일한 이점이 있습니다.

분리 된 책임으로부터 분리 된 별도의 파일을 갖는 또 다른 이점은 성능입니다. 브라우저는 파일을 캐싱하는 능력이 뛰어나므로 한 번 (한 번 이상 축소 된) CSS 파일을 한 번 다운로드해야 재사용 할 수 있으므로 다른 페이지를 다운로드하는 것이 더 쉽지 않습니다. 성능은 항상 사람들을위한 고려 사항이며, 특히 모바일 검색의 증가와 관련됩니다. 웹 페이지에 많은 CSS가 있으면 소스가 자연스럽고 커집니다. 다운로드 및 / 또는 사용할 수있게되는 데 시간이 오래 걸리므로 대기 시간이 오래 걸릴 수 있습니다.


ncmathsadist 08/01/2017.

웹 페이지에는 구조, 모양 및 동작이라는 세 가지 레이어가 있음을 알 수 있습니다. 구조는 잘 구성된 HTML5 마크 업으로 작성된 DOM에 의해 결정됩니다. HTML에 대해 배울 때 즉시 문서 트리 그리기를 시작하므로 페이지의 요소가 서로 관련되는 방식을 이해할 수 있습니다.

모양은 페이지에 서식을 지정하고 스타일을 지정하기 위해 DOM에 액세스하는 CSS에 의해 결정됩니다. 이것은 관련 파일 그룹이 공유 할 수 있도록 별도의 파일에 보관됩니다. HTML은 idclass 사용하여 임시 상황을 처리합니다. 이 속성을 사용하는 항목의 스타일은 CSS 파일의 one place 에서 이루어지기 때문에 이러한 기능을 사용하면 페이지를 더 쉽게 유지할 수 있습니다.

세 번째 계층은 JavaScript 파일에 나타나는 비헤이비어입니다. 이벤트 처리 코드에서 함수를 호출하기 위해 저장 never 않고도 JavaScript를 페이지에 표시 할 필요가 없습니다. 이것조차도 JS 파일에 첨부 될 수 있습니다. 학생들이 load 이벤트에 대해 알게하고 페이지 load 시간이 일찍 발생하면 페이지 요소가 존재할 때까지 코드 호출을 지연시킬 수 있습니다.

Node를 설치하면 명령 줄에서 JS 코드 테스트를 실행하고 작성한 함수에 대한 테스트 스위트를 개발할 수 있습니다.

3 개의 레이어를 분리하면 일을 깔끔하게 유지하고 코드 재사용을 극대화합니다.


user1639154 07/31/2017.

여기에있는 많은 해답들은 스타일링에 대한 상속의 문제를 다루지 않는 것으로 보인다. 이것은 또한 가르쳐 져야하기 때문이다. 기본 규칙은 마지막에 읽은 내용이 적용됩니다.

첫 번째로드는 일반적으로 문서 머리 부분의 외부 시트입니다. 문서 머리 부분에 링크 된 스타일 시트는 html 본문에 인라인으로 배치 된 스타일에 의해 오버 라이드되며, 차례로 해당 스타일은 DOM 요소에 직접 배치 된 스타일에 의해 무시됩니다. ! important 태그를 사용하여이 동작을 변경할 수도 있습니다.

대다수는 유지 관리가 쉽고 업데이트 / 변경시 많은 작업이 필요하지 않으므로 모든 CSS를 자체 파일에 저장합니다.

편집 : 조금 더 명확히하기 위해, 하나의 인라인이 외부 시트의 클래스에없는 텍스트에 밑줄을 그 으려면 스타일을 추가하는 경우, 서로 충돌하거나 오버라이드 할 클래스에서만 일치하는 특정 스타일입니다. 예를 들어 추가 스타일을 추가하기 만하면됩니다. 클래스는 서로를 직접 바꾸지 않고 서로 병합합니다.

5 comments
1 ItamarG3 07/31/2017
와우. 컴퓨터 사이언스 교육자에 오신 것을 환영합니다. 이것은 내가 정말로 고려하지 않은 것입니다. 그것을 보여주는 몇 가지 예나 설명을 추가 할 수 있다면 그것을 좋아할 것입니다. (나는 그들 자신을 쓸 수 있지만, 나는 당신이 생각할 수있는 것을 보는 것에 더 관심이있다). 이것은 정말 흥미로운 대답입니다 :)
1 ItamarG3 07/31/2017
관련 없음 : 우리 여행을 왜 가져 가지 않습니까? 재미있을 거라 확신합니다.
user1639154 07/31/2017
나는 약간 틀린 것, 그것의 외부 스타일 쉬트를 먼저 가지고, 그 다음에 문서 스타일을 그리고 나서 요소에, 나의 두뇌는 월요일 아침에 결코 100 %가 아니다. :)
ItamarG3 07/31/2017
용서하고 잊어 버려라.). 당신은 당신의 대답을 편집 할 수 있습니다. 답변 바로 아래에 edit 버튼 \ 링크가 있습니다. 여러분이 그곳에 계실 때, 답이 무엇을 다루고 있는지 보여주기 위해 몇 가지 예를 들어 주시겠습니까? 정말 더 나은 대답으로 만들 것입니다. D
user1639154 07/31/2017
불행히도 나는 지금 시간이 없다. 나는 css의 중요한 부분이기 때문에 CSS의 상속을 언급하기를 원했다.

rackandboneman 08/03/2017.

결과가 same document 의 두 가지 완전히 다른보기 인 프로젝트를 만듭니다. 예를 들어 큰 모니터에서는 멋지게 보이고 iPhone에서는 멋지게 보이는 버전이 좋습니다.

정적 웹 페이지가 아니라 컴퓨터에서 생성 된 업데이트 가능한 문서를 사용하면 문서 생성기에 스타일 정보를 포함 시키면 시각적으로 더 복잡해질 수 있기 때문에 포인트를 더 많이 확보 할 수 있습니다. 스타일을 망치는 유일한 옵션은 문서 generator 를 관련된 모든 번거 로움 또는 의도 한 것과 정확히 일치하는 stylesheet . 더 나은 방법 : 문서 생성 및 스타일 시트 파트를 수행 할 two 그룹을 방의 개별 구석에 지정하고 둘 사이에서 사양이 전달되는 방식을 조절합니다.

4 comments
ItamarG3 08/03/2017
이건 굉장해. 와우.
rackandboneman 08/03/2017
음, 그럼 믿을만한 만들어.
ItamarG3 08/03/2017
그것은 내가 (학교 물건) 공개 할 수없는 상황에 대한 문제를 해결하기 때문에 그것은 믿을 수 없지만, exactly 문제를 해결하지 않습니다 ...
1 rackandboneman 08/03/2017
아, 저는 교사가 아니라 IT 전문가로서 토론에 간섭하고 있습니다. 제가 설명했던 것은 실제로 당신이 가르치려는 이론처럼 말입니다. :)

Chris M. 08/02/2017.

많은 좋은 답변이 여기에 있습니다. 지금까지 보지 못한 한 가지 점은 콘텐츠와 디자인이 개별 팀이나 팀에 의해 만들어지기 때문에 각각의 고유 한 도구와 언어로 정의하면 필요한 별도의 워크 플로가 가능하다는 것입니다.

4 comments
ItamarG3 08/02/2017
와우. 나는 그걸 생각하지 않았다. CSS 스타일 시트 사용에 대한 별도의 교훈으로 이것을 어떻게 설명 할 수 있을지 조금 더 설명해 주시겠습니까?
Chris M. 08/02/2017
나는 비유를 사용한다. 자동차 기술자는 자동차 색상을 선택하지 않습니다. 시나리오 작가는 일반적으로 의상 디자인을하지 않습니다.
ItamarG3 08/02/2017
내가 참조. 대답을 편집하여 답안에 그러한 유추를 포함시켜야 할 수도 있습니다.
1 Buffy 08/03/2017
실제로 그것은 그것보다 더 나쁩니다. 중요한 웹 사이트가있는 대기업에는 콘텐츠 팀과 레이아웃 팀 모두에 표준 팀이 있습니다. 레이아웃이 표준에서 한 픽셀 떨어져 있다면, 당신은 그것을 끝냅니다. 1 픽셀.

thesecretmaster 08/03/2017.

인라인 스타일이 나쁜 이유는 코드 가독성과 평범함 및 단순성입니다. 이 경우, 귀하의 요점을 증명할 수있는 한 가지 예가 충분합니다.

  
The Title
This is a super great article

비교 대상 :

  
The Title
This is a super great article

이 예제 이외에도 클래스와 ID를 사용하지 않고 DOM을 자바 스크립트를 사용하여 조작하기가 훨씬 더 어렵게 만들고 의사 요소와 :nth-child():first-child 와 같은 멋진 CSS 선택기를 사용할 수 없도록 만듭니다 :first-child , 몇 가지 예를 :first-child .


Puppy 07/31/2017.

스타일링은 HTML로 직접 수행해야합니다.

주된 문제점은 스타일링이 HTML 구조와 독립적으로 원격조차되지 않는다는 것입니다. 물리적으로 분리 된 파일에 스타일을 쓰는 것만으로 변경되지 않습니다. 좋은 예는 모바일 장치 지원입니다. 이론 상으로는 모바일 CSS 파일을 만들 수 있습니다. 그러나 실제로는 모바일 장치에서 좋은 경험을하기 위해 완전히 분리 된 UI 디자인이 필요하고이를 지원하는 별도의 HTML 구조가 필요하며 별도의 스타일 집합이 필요할 수 있습니다. "버튼을 똑같지 만 조금 작게"하는 것은 가장 작은 조각에 대해서만 작동합니다.

올바른 UI를 생성하려면 필요한 스타일을 지원하는 HTML 구조를 생성해야합니다. 두 사람은 사실상 친밀하게 결합되어 있기 때문에 함께 배치하면 일을 이해하기 쉽고 한 곳에서 쉽게 할 수 있습니다.

또한 코드를 통해 HTML을 생성하고 있기 때문에 중복 된 스타일로 HTML을 생성해도 문제가 없습니다. 코드 생성기가 하루 종일 스타일을 낼 수 있기 때문입니다.

원시 CSS를 사용하면 스타일이 완전히 무작위이며 전역 범위에 있고 재사용하기가 어렵 기 때문에 엄청난 문제가됩니다. 다른 누구도 사용하지 않았 으면하는 희망 아래에서 수업 이름을 만듭니다. 이 요소를 내부적으로 중첩하여이 문제를 조금 해결할 수 있지만 이제는 올바른 DOM 구조가 아닌 다른 곳에서 이러한 클래스를 다시 사용할 수 없습니다. 그런 다음 페이지의 완전히 다른 부분에있는 임의의 친구가 나에게 알리지 않고 수업을 사용했고 이제는 스타일을 변경하여 부러워한다는 것을 알게됩니다. 그리고 유형 검사, IDE 지원 등을 얻는 것도 도움이됩니다. 매개 변수화 된 클래스를 만들거나 전역 적으로 대체품을 적용하는 것도 어렵습니다. 예 : display: flex with display: flexdisplay: -webkit-flex -iOS 용 display: -webkit-flex .

스타일을 다루는 올바른 방법은 다른 코드와 같이 처리하는 것입니다. 일부 코드에서는이를 캡슐화합니다.

5 comments
1 thesecretmaster♦ 07/31/2017
안녕 강아지, 컴퓨터 사이언스 교육자에 오신 것을 환영합니다! 다른 강아지를 만나고 싶다면 채팅 에서 불독 인 Buffy 에게 인사 할 수 있습니다. 흥미로운 답변입니다. 여기에 의견을 공유해 주셔서 감사합니다.
2 richard 07/31/2017
나는 네가 말하는 모든 것에 동의하지 않는다. 나는 너의 요점을 보았다. 특히 마지막 줄 (나는 이것을 확장해야한다고 생각한다). 어떻게해야한다고 생각하는지 보여주십시오. 우리가 100 % 동의하지 않더라도, 우리는 뭔가를 배울 수 있습니다.
no comprende 08/01/2017
당신의 대답은 제가 질문 한 시간을 상기시켜 주며, 누군가가 "라틴어로 미사를 읽으면"이라고 말했습니다. 생성하는 HTML을 사용하여 작업을 수행하는 '올바른'방법이 많으며 관점에서 볼 때 실제로 차이가 없습니다. 그러나 대부분의 강사들은 대부분의 프로그래머가 컴파일러를 작성하는 방법을 배우지 않는 것처럼 생성 된 HTML을 가르치지 않습니다. HTML 파일 유지 관리를 쉽게하기 위해 추가하는 레이어는 쓸데없는 HTML과 함께 불필요합니다. 나도 사물을 만들고 싶지만, 나는 방대한 소수 민족입니다. 어쩌면 도메인 특정 언어에 대해 이야기 할 수 있을까요?
Puppy 08/01/2017
생성 된 HTML을 가르치지 않는 강사는 유용한 HTML을 가르치지 않습니다.
ItamarG3 08/02/2017
@Puppy 그래서?

Related questions

Hot questions

Language

Popular Tags