예아 반갑습니노
일단 이 글을 쓰게 된 이유는 질문에 답하기 위해 썼음.
일단 DIV 라는게 규정 만들기의 핵심이라보면되는데, HTML의 태그 중 하나임
| <div> 난 DIV 안에 있는 글이야 </div> |
html의 기본규칙은 항상 저렇게 열었으면 백슬러쉬로 닫아줘야한다. 줄바꿈같이 <br> 같은 예외도 있다만, <div> </div>를 기억할것
그럭 이걸 쓰면
요렇게 되는데 뭔차인지 모를것임.
| <div style="border:6px solid rgb(36, 36, 36);border-radius:10px;"> 난 DIV 안에 있는 글이야</div> |
div의 style이란 속성을 넣어봤음. 영어 해석을 해보자면, 선굵기는 6, 선색상은 rgb(36,36,36) , 둥근사각형 10px 라는거임 이렇게해서 똑같이 써보겠음
소스 삽입
요런 느낌임.
대충 감이올것 같은데, DIV를 이용해서 규정을 짠다고 보면된다.
즉 이 DIV 를 두번 이용해서 꾸민다고 보면 된다.
바깥 DIV 내에, 안 DIV를 배치하여 꾸미는 방식인데
| <div style="border:6px solid rgb(36, 36, 36);border-radius:10px;"> 겉틀 안에 글이고 <div style="border:6px solid rgb(36, 36, 36);border-radius:10px;"> 속틀 안의 글임 </div> </div> |
소스 삽입
요렇게 되겠다.
그럼 실제 미식연구회 규정은
겉 DIV는 다음과 같음
| <div style="box-sizing:border-box;max-width:100%;padding:10px;background-repeat:no-repeat;background-position:center -6px;border:6px solid rgb(0, 0, 0);border-radius:6px;background-size:contain;"> </div> |
그리고 속 DIV는 다음과 같음
| <div style="padding:0.4rem;border-style:inherit;border-width:inherit;border-image:inherit;border-color:rgb(255, 29, 28);border-radius:inherit;"> </div> |
이 둘을 위에서 언급한대로 합치면 이처럼 되겠다.
| <div style="box-sizing:border-box;max-width:100%;padding:10px;background-repeat:no-repeat;background-position:center -6px;border:6px solid rgb(0, 0, 0);border-radius:6px;background-size:contain;"> 겉틀 안에 글이고 <div style="padding:0.4rem;border-style:inherit;border-width:inherit;border-image:inherit;border-color:rgb(255, 29, 28);border-radius:inherit;"> 속틀 안의 글임 </div> </div> |
소스 삽입
* 어 챈럼아 근데 왜 여백이 잇냐?
어 왜 여백이 들어갔냐면 padding 값임. 저 padding 값을 조절해주면 되고. 그외 style은 html div 태그에 대해서 공부해야 알 수 있어. 보통 내가 삽입 안해도, 자동으로 들어가는 소스가 생길텐데, 아카에서 자동으로 묻는 소스라고 보시면 되겠다.
간략하게 이정도로 하고... 그림같은거 대충 만들어 안에 삽입하면 된다.
안그래도 타챈에다 이런걸 좀 적어서 풀어낼려고 했었는데, 미식연구회 챈에 질문글 올라온김에 적어보아.
글쓰는 재주도 없고... 설명이 많이 미흡해서 미안하네.
채널 디자인 썰 (3) 규정을 만들자. (이미지 편) - 미요시 타카네 채널 (arca.live)
이런걸 쓴 적이 있는데, 링크 걸어도 되는지 모르겠다. 참고해서 저 DIV라는걸 이용해서 틀을 잡고, 그림을 만들어서
붙여넣는다고 생각하면 됨. 소스같은건 대형챈이나 혹은 마음드는 챈 규정 복사 붙여넣기하면 배껴올 수 있으니까, 뜯어서 자신 취향대로 바꾸어 만들어보아.
공부하는 사이트 : CSS Tutorial (w3schools.com)
미식연구회 채널 소개 및 규칙
