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

안녕하세요 찐망고입니다. 오늘은 폰트 단위 관련 포스팅을 시작해볼게요 HTML에서 단위는 상대적인수치와 절대적인수치로 나뉘는데요. div { width: 200px; height: 200px; font-size: 16px; } div > span { display: block; width: 100%; height: 80%; font-size: 1em; } span이 div의 자식이라고 가정할 때 %는 부모요소의 크기를 기준으로 들어갑니다. width와 height모두 200px이 되겠죠? 본인이 absolute인 경우엔 relative의 크기를 상속받기도 합니다. 참고로 height요소를 %로 지정할 경우 무조건 상속받을 부모에게 높이값이 존재해야 합니다. px말고 가장 많이 사용하는 폰트 단위는 em과..

안녕하세요 찐망고입니다. 오늘도 간단한 그리드레이아웃을 연습한 샘플을 보여드릴게요.일단 그리드 레이아웃이 처음이라고 한다면 이전글을 보고 오시고..  CSS Grid Container 속성CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는uiweb.tistory.com  CSS Grid Items 속성CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는uiweb.tist..

안녕하세요 찐망고 입니다. 오늘은 모바일 뷰포트 관련 이야기를 포스팅 해볼게요 vw와 vh는 뷰포트 너비와 높이를 이야기합니다. 폰트나 여백이나 길이의 단위를 뷰포트 단위를 사용하게 되면, 아무래도 브라우저 사이즈에 영향을 받겠죠? 1vw는 뷰포트 너비를 기준으로 100분의 1인데 만약 브라우저 사이즈가 1850px이라면 1vw는 18.5px이라고 생각하면 됩니다. 1vh는 뷰포트 높이를 기준으로 100분의 1이고 브라우저 높이에 따라 변하겠죠? 요소 높이에 100vh를 주게 되면 전체 높이에 꽉 차게 작업을 할 수 있는데 모바일에선 이슈가 좀 있습니다. 모바일 주소 표시줄 영역 때문인데요. 저렇게 주소표시줄 때문에 밀리는 현상 많이 보셨나요? ㅎㅎ 그래서 풀페이지 사이트 만들 때도 저런 현상들 때문에 ..

안녕하세요 찐망고입니다.오늘은 마우스 hover시 텍스트에 밑줄이 들어가는 작업을 해볼 거예요 https://hobancf.or.kr/ 호반문화재단Creating culture, connecting hearts.www.hobancf.or.kr  https://www.yesan.go.kr/chusa.do 추사기념관추사 김정희의 지혜와 고고함이 배어있는 예산군 추사고택 추사기념관www.yesan.go.kr   저런 밑줄 효과를 주기 전에 기본적으로 css를 이용하면여러 가지 방법으로 밑줄을 나오게 할 수 있는데요.아래 네 가지 방법이 있습니다.text-decorationborder-bottom::before나 ::after 사용background-image를 이용한 그라디언트 사용 첫 번째 방법인 text-..

CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션 uiweb.tistory.com CSS Grid Layout-2 안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입 uiweb.tistory.com 안녕하세요 찐망고입니다. 오늘은 그리드 아이템 속성만 따로 정리하는 포스팅입니다 ㅎ Grid Items 속성 Grid Items 속성 뜻 grid..

CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션 uiweb.tistory.com CSS Grid Layout-2 안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입 uiweb.tistory.com 안녕하세요 찐망고입니다. 이전에 그리드 레이아웃에 대한 포스팅을 올렸는데요. 오늘은 그리드컨테이너 속성만 따로 정리하는 포스팅입니다 ㅎ displ..

안녕하세요 찐망고입니다.요즘 버튼모양 테두리에도 그라디언트가 들어가는 디자인을 보게 되는데요.쉽게 테두리에 그라디언트를 적용해 보겠습니다.   그라디언트는 원래 image의 영역이에요.그래서 본디 배경색에 그라디언트를 넣는 경우에도 background-image로 적용했거든요.  See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 a요소의 테두리만 그라디언트로 보이기 위해a요소 자체에 배경이미지로 그라디언트를 넣고,span요소에도 배경색을 넣고 width와 height를 2px씩 줄여서 테두리처럼 보이게 만드는 방법이 있습니다 ㅎㅎ  물론 지금은 border자..

안녕하세요 찐망고 입니다.css로 줄임말 만드는 포스팅을 했던것 같은데 글이 없어서 포스팅을 시작해봅니다.때마침 한줄 줄임말과, 여러줄 줄임말이 딱 보이는 예제를 해서 😊  css 한줄 주석/* 한줄 줄임말 */width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; overflow: hidden; 적용시 width값은 필수 white-space: nowrap; 이용하여 해당 텍스트들이 한줄로 나오게 처리text-overflow: ellipsis; 말줄임표시 css 여러줄 주석 /* 세줄 줄임말 */width: 100%;overflow: hidden;text-overflow: ellipsis;word-break: break-wo..

안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 합니다. 수업 중에는 하나의 섹션을 uiweb.tistory.com 바로 시작해봅시다!! 컬러들이 많죠? 지금 저 레이아웃 같은 경우엔 줄은 세줄 칸은 네 칸으로 나눌 수 있겠죠? 저번 포스팅에서 area에 이름을 지정해서 작업해 봤으니까 오늘은 display: grid가 적용된 그리드 컨테이너의 각 자식들에게 start와 en..

안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션을 Flex로도 짜고, Grid로도 짜서 비교해 보긴하는데 포스팅을 그렇게 하면 너무 길어질 테니까 각각의 속성을 알아보고 그리드로 짜는 템플릿을 좀 보여드릴까 해요. 그리드를 이용한 반응형 예제로 하단의 두 섹션을 작업한 포스팅을 올려볼까 해요 기대되죠?? ㅎㅎ 자 일단 저런 걸 해보려면 그리드의 기본 속성들을 알아봐야 합니다. 아 참고로 우리나라 웹 사이트 레이아웃 형태상 전체를 그리드로 짜는 건 저는 비추.. 그런 건 블로그 형태의 템플릿이나 웹진같이 좀 간단한 형태면 모를까 추천하지 않아요 그래서 연습도 그런 걸로 ..