![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b9S5BV/btsEm9i5UwE/ZKt6KYukXYpIYf5ndCUCEk/img.png)
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..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b9yukf/btsEhUg2Qb5/bep3T4ufyUPblhozaxVk20/img.png)
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..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nhEqo/btsDUeyx7QB/6FHMna54PI6LVlLvjfiuK0/img.png)
안녕하세요 찐망고입니다. 요즘 버튼모양 테두리에도 그라디언트가 들어가는 디자인을 보게 되는데요. 쉽게 테두리에 그라디언트를 적용해 보겠습니다. 그라디언트는 원래 image의 영역이에요. 그래서 본디 배경색에 그라디언트를 넣는 경우에도 background-image로 적용했거든요. HTML 삽입 미리보기할 수 없는 소스 a요소의 테두리만 그라디언트로 보이기 위해 a요소 자체에 배경이미지로 그라디언트를 넣고, span요소에도 배경색을 넣고 width와 height를 2px씩 줄여서 테두리처럼 보이게 만드는 방법이 있습니다 ㅎㅎ 물론 지금은 border자체에 border-image가 적용 가능 하므로 HTML 삽입 미리보기할 수 없는 소스 그라디언트가 들어가는 게 보이죠? border-image-slice는 ..
안녕하세요 찐망고입니다. 오늘은 정의형요소 dl요소와 dt, dd요소에 대해서 포스팅 하겠습니다. 요소는 description list 요소는 description term 요소는 description description의 약자인데요. 요소는 로 지정된 용어와 그에대한 설명을 나타내는 요소로 구성 됩니다. 사전을 예로 들으면 좀 쉬울까요? 사전에 정의된 제목을 dt로 그에대한 설명을 dd요소로 넣을 수 있겠죠 dl요소 안에 들어가는 dt와 dd의 구성은 다양한 방법이 가능합니다. 1. 하나의 항목에 두개의 값 이름-값 그룹을 나타내며 "Authors"에 대한 값으로 "John"과 "Luke"가 포함되어 있습니다. "Editor"에 대한 값은 "Frank"입니다. 이 예제에서는 목록의 순서가 중요하며, ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/d8cMfV/btsDBRd1ddt/NsOT8oWkQag1ODrbnnHX11/img.png)
안녕하세요 찐망고 입니다. 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: b..
안녕하세요 찐망고입니다. 전에 ios에서 동영상 재생 관련 포스팅을 했었는데요. 읽어보시는 걸 추천합니다. iOS 에서 동영상 재생이 안되나요? 안녕하세요 찐망고입니다. 아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요. 요즘 기업사이트 추세가 메인 비주얼 섹션에 영상을 많이 넣더라구요. 거의 국룰이랄까.. uiweb.tistory.com 요소는 웹 페이지에 비디오를 표시하는 데 사용됩니다. 영상을 업로드할 때는 사용하는 코드 이 controls속성은 재생, 일시중지, 볼륨과 같은 비디오 컨트롤을 추가합니다. width 및 height속성을 포함하는 것이 좋은데, 높이와 너비가 설정되지 않으면 비디오가 로드되는 동안 페이지가 깜박일 수 있기 때문입니다. 요소를 사용하여 비디오 타입을 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/DskXm/btsAKb5SIsM/flg7jz9y1ujpXEul4QX5p0/img.png)
안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 합니다. 수업 중에는 하나의 섹션을 uiweb.tistory.com 바로 시작해봅시다!! 컬러들이 많죠? 지금 저 레이아웃 같은 경우엔 줄은 세줄 칸은 네 칸으로 나눌 수 있겠죠? 저번 포스팅에서 area에 이름을 지정해서 작업해 봤으니까 오늘은 display: grid가 적용된 그리드 컨테이너의 각 자식들에게 start와 en..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/2jlQa/btsAIJvwPbw/KcovB0dTeUQT1vLFxVOnQ1/img.png)
안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션을 Flex로도 짜고, Grid로도 짜서 비교해 보긴하는데 포스팅을 그렇게 하면 너무 길어질 테니까 각각의 속성을 알아보고 그리드로 짜는 템플릿을 좀 보여드릴까 해요. 그리드를 이용한 반응형 예제로 하단의 두 섹션을 작업한 포스팅을 올려볼까 해요 기대되죠?? ㅎㅎ 자 일단 저런 걸 해보려면 그리드의 기본 속성들을 알아봐야 합니다. 아 참고로 우리나라 웹 사이트 레이아웃 형태상 전체를 그리드로 짜는 건 저는 비추.. 그런 건 블로그 형태의 템플릿이나 웹진같이 좀 간단한 형태면 모를까 추천하지 않아요 그래서 연습도 그런 걸로 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/8IK4U/btsB3trx2Gj/ARaBaYJPGtoiBSxH0UZW3k/img.png)
안녕하세요 찐망고입니다. 디자인 어렵죠? 이론적인 게 머리에 충만해도 막상 흰 창을 보면 머부터 시작해야 할지 막막하고 그래서 조금 쉽게 풀어보고자 해요. 제품상세페이지디자인! 상세디자인이라고 하는 그 이미지들. 기억나네요.. 2006년인가 지마켓에 옥수수 판매 상세페이지를 만들어달라던 농부님.. 그때 당시엔 뭣도 모르고 내 눈에 이쁘고 내 눈에 이쁘면 그만이지 하는 마음으로 작업했는데.. 지금 생각해 보면 참.. 그 이후로 상세디자인 작업을 종류별로 참 많이 해봤는데요.. 이번 포스팅엔 전체적인 구성을 기획하여 작업하면 좋을지에 대해 포스팅해볼게요.. 레퍼런스는 각종 채널에서 확인이 가능하죠? 저는 와디즈와, 네이버스토어, 쿠팡을 많이 보는데요. 특히 와디즈 베스트 펀딩 상세페이지들은 정말 좋은 레퍼런..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dqfPug/btsBBpb1vFQ/gsz7swe6MOjyHgAcb8RLO1/img.png)
안녕하세요 찐망고입니다. 가끔 이벤트 상세디자인이나 배너들을 보다 보면 어떤 폰트를 사용했는지 궁금한 디자인들이 있더라고요 저만 그런 거 아니죠? 저 폰트는 뭘까 하고 고민하면서 구글링 해보니 비슷한 폰트를 찾아주는 사이트가 있어 포스팅해 봅니다. https://www.sandollcloud.com/#schpop 산돌구름 폰트가 필요할 때 언제 어디서나! www.sandollcloud.com:443 링크에 접속하면 이미지를 업로드하거나 url을 입력하라는 창이 뜹니다 저기에 이미지를 업로드하고 해당 폰트 영역을 선택하면~~~ 짠~~ 이렇게 리스트 형태로 뜹니다. 이 이미지를 업로드해서 쿼터 이상 구매 시라는 텍스트 박스를 눌러봤거든요. 프리텐다드 폰트가 딱? 물론 정확한 폰트가 아닐 확률이 더 높긴 하지..
- Total
- Today
- Yesterday
- 자바스크립트숫자카운트
- 웹접근성
- boxmodel
- 포토샵합성
- margin
- uidesign
- 크로스브라우징
- Slick
- 시멘틱마크업
- JavaScript
- UI디자인
- 웹디자인
- CSS3
- uiux
- css그리드
- css
- 프로그래밍기초
- 반응형웹
- 웹표준
- Border
- 피그마플러그인
- 디자인팁
- 슬라이드플러그인
- padding
- slickAPI
- 코딩교육
- css4
- JavaScriptTips
- uxdesign
- 스마트폰해상도
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |