찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다~ 이 포스팅은 며칠 만에 마무리가 될지 모르겠지만 일단 시작해보도록 하겠습니다. 지난번 포스팅에서 제가 박스 모델 관련 padding과 border에 관해서 설명하였는데요~ 2021.12.30 - [마크업/CSS] - box model (박스모델) - border와 padding box model (박스모델) - border와 padding 안녕하세요 찐망고입니다. 오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CSS로 지정해야 할지 잠시 고민했어요.ㅎ 일단 제 포스팅은 박스 모델에 관련하 uiweb.tistory.com 오늘은 박스 모델에서 콘텐츠를 기준으로 border 바깥쪽 여백인 margin에 관해 포스팅을 시작할 겁니다. ..

안녕하세요 찐망고입니다.오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CSS로 지정해야 할지 잠시 고민했어요.ㅎ  일단 제 포스팅은박스 모델에 관련하여 border나 padding이나 margin을 주는 css표기법을 써보려는 포스팅은 아니고요~전체적으로 박스 모델에서 저런 속성들을 사용했을 때 나타나는 특징?그래서 조심해야 하는 부분을 중점적으로 포스팅하려고 합니다. 저번 포스팅에서 제가 HTML에서 사용하는 요소는 inline요소와 block요소로 나뉜다고 했었는데요 그 각 요소마다 특징이 있었죠??예를 들어 inline요소는 해당 텍스트 콘텐츠만큼 width값을 가진다거나block요소는 컨텐츠 크기와 상관없이 브라우저 너비만큼 width를 가진다거나..

오랜만에 포스팅하는 찐망고입니다. 일주일에 한두 번이라도 포스팅하는 게 나름 계획이긴 했는데 쉽지 않네요.. 그저 출퇴근만 할 뿐인데 바빠요.... 더보기 더보기 실은 안 바빠요 그저 게으를 뿐 요즘 MBTI과 몰입 중인데 저는 정말 찐 P인 듯.. ^^; 웹 관련 포스팅이니까 본론으로 돌아와서~ 웹 표준 코딩은 HTML요소의 각 뜻에 따라 뼈대를 짜는 게 가장 큰 목적입니다. 제목 요소에는 h요소를 문단에는 p요소를.. 시멘틱 마크업에 맞춰 시멘틱 요소를 사용하는 것이죠~ 각각의 요소에 대한 설명은 워낙 잘 나와 있는 곳들이 많아 패스하고 저는 바로 박스 모델이라는 부분에 대해 설명하려고 했지만, 일단 그러려면 요소의 기본 특징을 알아야 합니다. HTML에서 사용하는 요소들은 inline요소와 bloc..

안녕하세요 찐망고입니다. slick slider 세 번째 포스팅이네요.. 오늘은 slick API 중 customPaging 이용하여 dots의 모양을 numbering모양으로 변경해 보겠습니다. 더보기 제가 요즘 insta도 시작하고 youtube준비도 해야 하고 수업도 하고 있어서 매일매일 포스팅이 너무 힘듭니다. 어휴 제가 원래 계획 없이 무리해서 일을 저지르는 스타일이라.. 그래도 좋은 내용으로 포스팅하게 노력해보겠습니다 수업 중에는 이렇게 슬라이더를 일일이 하나씩 예제 삼아 하진 않고요. 선생님 이 슬라이드가 만들고 싶습니다!라고 하면 그냥 똑같이 만듭니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 자 코드 펜을 가봐야죠? https://codepen.io/jjinMangKo/pen/LYygOrq 오늘은 slick-sl..

안녕하세요 찐망고입니다. 2021.08.02 - [마크업/플러그인] - 슬라이드 플러그인 Slick - API (1) 슬라이드 플러그인 Slick - API (1) 안녕하세요.. 찐망고입니다. 매일매일 포스팅하는 게 참 쉬운 게 아니네요.. 자료는 많은데 취합해서 포스팅한다는 게.. 말이죠 오늘은 슬라이드 관련 포스팅을 해보려고 합니다. 마크업 퍼블리 uiweb.tistory.com 오늘은 slick-slider 관련 두 번째 포스팅입니다. 생각해보니 이전 글처럼 포스팅을 하면 slick글만 한 20개도 쓸 수 있을 것 같아요..ㅋ 오늘은 슬릭을 이용해서 이미지를 100% 넣는 방법에 대해서 알려드릴 거고요~ dots부분도 한번 건드려 보도록 하겠습니다. https://codepen.io/jjinMang..

안녕하세요.. 찐망고입니다. 매일매일 포스팅하는 게 참 쉬운 게 아니네요.. 자료는 많은데 취합해서 포스팅한다는 게.. 말이죠 오늘은 슬라이드 관련 포스팅을 해보려고 합니다. 마크업 퍼블리싱 블로그인데.. 요소는 시멘틱 요소만 해놓고.. 플러그인이라니... 요즘 제가 자주 쓰는 플러그인이 두 가지인데요 하나는 slick이 있고 또 하나는 swiper입니다. 머 나름 다른 것들도 많이 쓰긴 했지만요.. bx라거나 owl 이런 옛날 옛적 플러그인은 안녕..~ 마크업을 할 때 사용하는 플러그인들은 더 강력한 애니메이션을 만들기 위한 도움을 줍니다 그들이 제공하는 API만 잘 사용하면 더 디테일한 슬라이드 작업이 가능하죠. 솔직히 제가 블로그를 만든 가장 큰 이유 중에 하나가 그런 것들을 제공하기 위해서도 한몫..

안녕하세요.. 날씨만큼 익어가는 찐망고입니다. 웹 표준, 크로스 브라우징, 시멘틱 마크업... 이젠 끝날 줄 알았는데 Outline이라니 😅 오늘은 시멘틱 요소들을 가지고 본격적으로 틀을 잡는 코드를 보여드릴까 해요.. 참고로 오늘의 찐망고의 코드고요. 내일의 찐망고는 다르게 마크업 할 수 있다는 걸 명심! 또 명심해주시길... A일수도 있고, B일 수도 있는데.. A와 B가 서로 본인 게 맞다고 싸우면 안 된다는 소리예요.. 일단 이전 글 두 개를 첨부하고 시작하겠습니다. 2021.07.25 - [마크업/HTML] - 웹 표준,크로스브라우징, 시멘틱마크업에 대한 이해 2021.07.26 - [마크업/HTML] - 웹표준, 시멘틱 마크업?? 시멘틱 마크업이라는 게 의미가 잘 전달되게 마크업을 하자는 거잖..

안녕하세요!찐망고입니다.오늘은 HTML카테고리에 두 번째 쓰는 글이 되겠네요..원래 웹 표준에 대해 설명하고, 웹 접근성으로 넘어가려고 했는데이전 글에 말이 많아져서, 시멘틱 마크업을 포스팅 못하는 바람에.... 2021.07.25 - [마크업/HTML] - 웹 표준, 크로스 브라우징, 시멘틱 마크업에 대한 이해 웹표준,크로스브라우징, 시멘틱마크업에 대한 이해안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서uiweb.tistory.com   각설하고 시작해 보도록 하겠습니다.  시맨틱(Semantic)이란 "의미론적인"의 뜻이며, 마크업(Mar..

안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서.. 기본적인 것에 대해 접근을 해보도록 하겠습니다. 그중 첫 번째는 웹 표준 그러니까 크로스 브라우징에 관련된 포스팅입니다. 일단 웹 표준을 말하기 전에 브라우저에 대해 이야길 해봐야 하는데요. 제가 수업시간에 자주 접속하는 사이트가 하나 있어요 https://gs.statcounter.com/ StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share Tracks the Usage Share of Sear..

안녕하세요~드디어 3일차 글을 쓰게 된 찐망고입니다. 오늘은 웹에서 사용하기 편한 웹아이콘을 적용하는 방법에 대해서포스팅을 해보려고 합니다. 제가 예전에 자주 쓰던 사이트는 폰트어썸이고...https://fontawesome.com/ Font AwesomeThe world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.fontawesome.com 이번에 포스팅 할 사이트는 https://xpressengine.github.io/XEIcon/ XEIcon, 문자를 그리다XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이..