HTML의 조합 방법은 이해하기 힘들죠.도대체 어떻게 생각해야 좋을까?

HTML을 조립하는 것은 나 자신이 상당히 고생한다.패턴이 무한해 보이는데 오류가 없어서 어떻게 개선해야 할지 모르겠어요.1년여 전에 Progate에서 해봤는데 잘 모르겠어요.나는 이런 사람이 매우 많다고 생각한다.
이러다 안 돼!따라서 반년 이상 매일 계속 표시
기본적으로 표기의 조합 방법 체계가 형성되어 있기 때문에 남겨 두기로 했다.
이 기사는 과거와 나처럼 HTML에 고생했던 사람들을 대상으로 쓴 것이다.

HTML에서 중요한 아이디어

매일 꾸준히 표시를 해서 나는 매우 중요하다는 것을 발견했다.
그것은 층의식이다.

뭐?분층 의식?그게 뭐야?

층은 층이다.HTML의 레이어 = 태그입니다.
어떻게 된 일인지 말하자면, div>div>div는 3층 구조이다.
각 층의 작용을 의식하여 풍격을 정확하게 알아맞히다.
처음엔 어려웠으니까 이제 여기서'아, 그렇구나'를 틀어주세요.

예를 들겠습니다.

Lesson1HTML에 대한 생각
Lesson2block계와 inline계의 구분 사용
Lesson3 준비: 맞추는 방법

Lesson1HTML에 대한 생각

"div div... 태그가 어디까지 늘어날지 몰라요".
그게 가장 큰 문제죠.
어떻게 div 등 계층을 세웁니까?같이 생각해 봅시다!

이미지 및 텍스트가 포함된 레이어
위로 묶은 층
위로 묶은 층
위로 묶은 층
....etc
그렇군요.
우선 텍스트와 이미지를 직접 묶은 층(녹색)을 고려한다.
그 묶은 층을 구성 요소로 삼아라.
예를 들면 카드 스타일.
위의 그림은 카드 스타일이군요.
네, 이 구성 요소의 층을 찾으려고 합니다.

Lesson2block계와 inline계의 구분 사용

구성 요소를 찾으면 구성 요소 내용의 배열을 고려해 보세요!
'이미지 옆에 있는 텍스트'로 배열해 봅시다.

우선, 텍스트가 어지럽기 때문에div로 정리하자.
이렇게 하면 스타일을 div에 붙이기만 하면 안에 있는 텍스트를 동시에 이동할 수 있다.
div
figure
img
div(추가)
p
p
※ 이런 div는 나팔로 읽습니다.
　Card__txt-wrapper와 같은 느낌의 클래스를 사용합니다.
음...구성 요소의 내용을 모두 가로로 확장합니다.
이렇게 하면 나란히 할 수 없다.왜죠?
안에 있는 요소가 덩어리니까.
※ Progate에 블록을 설명하는 수업이 있죠?
적목은 가로로 확장된다.
그럼,figure와div중width40%나 50%는 병렬이 되나요?
아니요.왜죠?
그게 블록이니까.겉모습은 축소됐지만 실제로는 축소되지 않았기 때문이다.
각각 인라인 블록으로 바꾸세요.width를 조정하면 가로로 배치해야 합니다.
※ 참고로 50%는 나란히 할 수 없죠?왜죠?
그건 직접 확인하세요.눈썹과 꼬리를 만들 때 사용하기 때문이다.

Lesson3 준비: 맞추는 방법

여기까지는 대체적인 조립 방법을 배웠다.
그럼 실제로 조립해 보세요!
여기에는 XD의 UI 키트가 사용됩니다.
아래에서 다운로드하십시오.
https://xdresources.co/resources/responsive-resize-kit

일단 대충 잡아주세요!
머리글
※ 이번에 제목에 영웅을 넣은 것은 계층의식을 갖기 위한 의도입니다.
그럼 구성 요소를 찾아보자!
① 영웅(top 눈에 띄는 이미지 주변)에 텍스트와 버튼이 배열되어 있다.
div.Hero
　p.txt1
　p.txt2
　button
② 영웅의 오른쪽에서도 조립층이 발견됐다!
이번에는 본문을 총결할 뿐이다.총결산을 하려면, 우선 나는 나팔이라고 명명할 것이다!
div.Hero-Txt-Wrapper
　 p.txt1
　p.txt2
히어로 주변에 있기 때문에 Hero-Txt-Wrapper를 선택했습니다.
③ 주요 카드가 배열되어 있는데... 카드가 구성 요소가 된다!
div.Card
　p.txt1
　p.txt2
④ 응?카드 묶는 층도 갖고 싶어요.그리고 줄을 서세요, 리스트입니다!
ul.Card-List
　　li.Card-List_item
　　　　p.txt1
　　　　p.txt2
　　li.Card-List_item
　　　　p.txt1
　　　　p.txt2
혹은
ul.Card-List
　　li.Card
　　　p.txt1
　　　p.txt2

그래서 저희가 HTML을 먼저 해야 돼요.

어느 정도 조립된 후에 구성 요소와 그 내용에 대해 각각 CSS를 진행한다.
카드를 한꺼번에 놓고... 그렇게 생각하면 어려워요.
줄을 설 때,float,inline,flex는 무엇이든지 가능
일단 카드를 잘 만드는 게 나을 거예요.
포장기에서 건드리면 너무 딱딱해져서 유용할 수 없다
잘 모르는 CSS의 완성.
이해하기 쉬운 구성 요소 레벨을 조합하면 CSS는 예뻐지고 여분의 층도 없다.
설계에 따라 필요한 최소 레벨의 도면층을 이동합니다.

문외한: 구성 요소 내용

"조립품도 포장기 아닌가요?"눈치 챈 사람도 있겠지.
예.
그리고 구성 요소의 내용은 원자입니다.
더 나아가 원자력의 내용은 기본 입자다.
이 부근의 말은 CSS 디자인 수준이니 앞으로 다시 쓰겠습니다.
결국 AtomicDesign FLOCCSS BEM을 통합한 CSS 설계입니다.
나는 순서대로 이것을 쓸 계획이다.
다음엔 BEM.
BEM의 블록 중첩... 곤란하죠
그래서 다음은 BEM의 블록 중첩 대응 모드입니다.
패턴에 대한 선택 데이텀을 개별적으로 작성합니다.