사실 시행착오했던 내용들 모아서 나중에 참고하려고 써둔 글임

코네에서 썼을 때 의도대로 안된다거나 하는 부분들을 모아둔거라,

추가적으로 꾸미고 싶다면 따로 html 공부를 하거나 gpt한테 시켜보는걸 추천함

1. div와 style의 사용법 - 기본편

div는 쉽게 말해서 글상자이다.

아래와 같이, 테두리와 배경색을 가진 상자를 만들 수 있다고 생각하면 된다.

기본적으로는 코드에 다음과 같이 쓰면 사용할 수 있다.

<div>
    내용
</div>

이렇게 하면 일단 글 상자가 만들어 지기는 하는데, 위와는 달리 테두리나 배경색은 없는 상태일 것이다.

이 때 필요한게 stlye 문법이다.

<div style="border: 5px solid red; background: green;">
    내용
</div>

border는 테두리를, background는 배경을 의미한다.

즉 위의 코드를 적용시키면 아래와 같이 된다.

추가로 쓸만한 기본적인 코드를 적용시키면 다음 정도를 꼽을 수 있을 것이다.

<div style="border: 5px solid red; border-radius: 20px; background: green; text-align: center;">
    내용
</div>

border-radius는 테두리를 둥글게 해주는 문법이다.

text-align은 텍스트 정렬 기능으로, 개인적으론  center(가운데 정렬)를 많이 사용하는 편이다.

2. 코네에서의 문제점 1 - 이미지 간의 간격이 너무 큼

위의 상자들을 보다보면 알겠지만, 이미지의 위와 아래로 큰 간격이 있다.

이 간격은 내가 넣은게 아니고, 이미지를 넣으면 강제로 생겨버린다.

또한 글을 쓰는 중에는 이 간격을 볼 수가 없기에 더 거슬린다.

이를 해결하기 위한 방법은 아래 코드와 같다.

<div style="font-size: 0px; border: 5px solid red; border-radius: 20px; background: green; text-align: center;">
    내용
</div>

바로 font-size: 0px; 이다.

원래는 글자의 크기를 줄이는 문법인데, 이게 위에서 말한 강제 공백에도 영향을 준다.

따라서 글 작성 후에도 강제로 공백이 생기지는 않는다.

하지만 이러면 다른 문제가 발생하게 된다.

위 사진은 배경이 투명한데다 가로 길이가 짧아 별 탈이 없지만,

이렇게 칸이 꽉 차 버리는 사진을 넣게되면 사진이 테두리 밖으로 튀어나와버린다.

이를 해결하기 위한 방법은 두가지가 있는데,

<div style="padding: 5px; border: 5px solid red; border-radius: 20px; background: green; text-align: center; font-size: 0px;">
    내용
</div>

<div style="overflow: hidden; border: 5px solid red; border-radius: 20px; background: green; text-align: center; font-size: 0px;">
    내용
</div>

첫 번째는 padding을 통해 테두리 부분에만 간격을 만들어주는 것이고,

두 번째는 overflow: hidden 을 통해 튀어나온 부분을 지워주는 것이다.

개인적으론 첫 번째 방법이 보기에 좋다고 생각하는데, 일단 둘 다 쓰기는 하는 편이다.

3. 코네에서의 문제점 2 - 이미지의 정렬이 고정되지 않음

아래와 같이 div 안에 여러개의 이미지를 넣을 때에도 문제가 발생할 수 있다.

보다시피, 단순히 이미지를 여러개 넣는다면 정렬이 지맘대로 된다.

데스크톱에서는 두줄에 위줄에 5개, 아래줄에 1개로 보일건데,

창 크기를 줄이면 정렬이 또 바뀌어 버릴 것이다.

모바일처럼 좁은 창에서는 아예 1개짜리가 6줄이 생겨버린다.

이를 방지하기 위해 내가 쓰는 방법은 다음과 같다.

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); border: 5px solid red; border-radius: 20px; background: green; text-align: center; overflow: hidden; padding: 5px; font-size: 0px;">
    내용
    내용
    내용
    내용
    내용
    내용
</div>

display: grid;를 이용하면 창 크기와 관계 없이 정렬을 고정시킬 수 있으며,

창 크기가 이미지 크기보다 작으면 이미지 크기를 창에 맞게 줄여주는 기능 또한 존재한다.

grid-template-columns 와 grid-template-rows 는 각각 행과 열의 개수로,

뒤의 repeat(n, 1fr)의 n 부분에 원하는 행과 열의 개수를 써주면 된다.

다만 이처럼 하면 한 div 내에서 가로줄마다 이미지 개수를 다르게는 하지 못한다.

그럼 이미지 개수를 다르게 하고 싶으면 어떻게 해야할까?

<div style="border: 5px solid red; border-radius: 20px; background: green; text-align: center; overflow: hidden; padding: 5px; font-size: 0px;">
    내용
    <div style="text-align: center; font-size: 0px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr);">
        내용
        내용
        내용
    </div>
    <div style="text-align: center; font-size: 0px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(1, 1fr);">
        내용
        내용
    </div>
</div>

div 하나 안에서 할 수 없다면 div를 여러개를 쓰면 된다.

위에서 말했지만, div는 테두리나 배경을 지정해주지 않으면 그냥 코드상으로만 존재하는 상자이기 때문이다.

안쪽에 쓸 div에는 테두리와 배경, padding, overflow는 빼고, 텍스트 정렬과 폰트 크기 설정은 유지해야 한다.

4. 쓸데 없는 심화편 - 그라데이션

여기부터는 딱히 코네랑은 상관 없고, 내가 꾸밀 때 쓰려고 찾아놓은 문법이다.

<div style="border: 5px solid transparent; border-radius: 20px;
background: linear-gradient(#ffadb3 20%, black 80%) padding-box,
linear-gradient(#5bffde 20%, #b01c37 80%) border-box;
text-align: center; font-size: 0px; overflow: hidden; padding: 5px;">
    <img src="https://api.kone.gg/v0/article/cQGgS45kGhMAf0xbESU5Ob/media/bPB6YL9lbEO0z_wGdelPSb/preview" loading="lazy">
</div>

먼저, border의 색상을 transparent로 해두면 테두리를 투명하게 할 수 있고,

background를 색상1 padding-box, 색상2 border-box로 해두면 내부와 테두리의 색을 따로 지정해줄 수 있다.

테두리를 단색을 쓸 경우 쓸데 없는 문법이지만,

위처럼 linear-gradient를 이용하여 배경뿐만 아니라 테두리에도 그라데이션을 줄 수 있다.

linear-gradient 안에 있는 부분은 해당 색상이 있는 위치이다.

위처럼 linear-gradient(색상1 20%, 색상2 80%)으로 하면,

0%~20% 부분은 색상 1, 80%~100% 부분은 색상 2이고,

그라데이션은 20%~80% 부분에서 발생한다.

<div style="border:5px solid transparent; border-radius:20px;
background: linear-gradient(120deg, #000000 49.7%, white 50%, #cf0000 50.3%) padding-box,
linear-gradient(120deg, #5bb28e 49.7%, white 50%, #000000 50.3%) border-box;
text-align: center; font-size: 0px; overflow: hidden; padding: 5px;">
    <img src="https://api.kone.gg/v0/article/cQGgS45kGhMAf0xbESU5Ob/media/bPB6YL9lbEO0z_wGdelPSb/preview" loading="lazy">
</div>

색상은 2개 이상을 넣을 수도 있으며, 맨 앞에 각도를 붙여서 기울일 수도 있다.

이거는 거의 실선을 그은 것처럼 하고 싶어서 이렇게 했는데,

중간 색상을 좀 유지하고 싶으면 (색상1 20%, 색상2 40%, 색상2 60%, 색상3 80%)와 같이 중간 색을 여러번 써주는게 좋다.

그러지 않고 (색상1 20%, 색상2 50%, 색상3 80%)같이 중간색을 한번만 써준다면 50% 부분에만 그 색이 있고 나머지는 그라데이션이 되어버린다.