【dl인가 ul】뉴스계(신착 정보) 디자인의 코딩 패턴

뉴스계 디자인이란, 웹 사이트에서 자주 보이는 「신착 정보」라든지를 게재하고 있는 디자인입니다.



이런 느낌의 디자인
템플리를 기억해 버리면 낙진인데, 처음부터 코딩을 하려고 하면, 「응??

뉴스계 디자인의 이해를 보다 깊게 하기 위해서도, 여러가지 패턴을 조사해 보았다.

뉴스계 디자인의 코딩 방법

dl 태그로 뉴스 기반 디자인 코딩

See the Pen wLXZzp by kei ( ㅎㅎㅎ )
on CodePen .

간단하게 쓰려면 "float : left"를 사용하는 방법이 있습니다.

float를 사용하면 dd가 자연스럽게 회전하고 dt의 오른쪽에 배치됩니다.

margin을 사용하여 여백을 조정하면 괜찮습니다.

다음에 라벨을 추가합니다.

See the Pen VJdNbm by kei ( ㅎㅎㅎ )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

라벨은 dt 안에서도 태그도 좋기 때문에 추가하고 마크 업합니다. 그리고 margin과 padding으로 여백을 정돈합니다.

レスポンシブにはしてませんので、あとはメディアクエリで調整していく感じでしょうか。

参考
무난한 뉴스리스트

다른 사이트의 코딩 패턴 알아보기

좋은 부분은 받으면서 자신의 코드 패턴을 늘리는 것이 좋다고 생각합니다.

코딩의 참고로 다른 사이트의 뉴스계의 디자인을 보면서 실제로 코드를 작성해 보았습니다

총리 관저 (div로 둘러싸고 flex로 나란히)

li의 각 자식 요소는 div로 마크업하고 flex로 정렬됩니다.

See the Pen mZKgzp by kei ( ㅎㅎㅎ )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

Y!mobile(inline-block으로 나란히)

li 태그 안에, a 태그로 둘러싸인 span 태그와 p 태그를 넣어, inline-block로 옆으로 늘어서 있습니다.

See the Pen ydEWyL by kei ( ㅎㅎㅎ )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

타임즈 카 렌탈(가짜 요소를 사용한 NEW 라벨)

라벨이 2개 있는 패턴!

디자인을 본 느낌이라면 「어려울 것 같다」라고 생각해 버리네요.

보기 어려운 것처럼 보이지만, 이것도 조금 더하는 방법은 동일합니다.

라벨은 의사 요소를 사용하여 만들어졌습니다.

See the Pen PravQg by kei ( ㅎㅎㅎ )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

패턴은 알아야 한다.

이번에 보았듯이 다양한 코딩 방법이 있습니다.

즉, 코딩에 정답은 없지만, 패턴을 알아두면 편하게 코딩할 수 있다는 것.

많은 사이트를 보면서 코딩 패턴을 훔치고 자신의 사이트를 만들어 봅시다.