사실 시행착오했던 내용들 모아서 나중에 참고하려고 써둔 글임
코네에서 썼을 때 의도대로 안된다거나 하는 부분들을 모아둔거라,
추가적으로 꾸미고 싶다면 따로 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% 부분에만 그 색이 있고 나머지는 그라데이션이 되어버린다.
