안녕하세요 찐망고 입니다. 오늘은 웹내비게이션에 대해 알아보려 합니다. 웹사이트에 접속한 사용자가 현재 위치와 이동경로를 파악할 수 있도록 돕는 내비게이션은 매우 중요합니다. 이는 사용자가 빠르게 원하는 목적을 달성할 수 있도록 도와주죠. 내비게이션은 그 구성에 따라 여러 단계로 나누어집니다. 예를 들어 사이트는 노란색 컬러에 해당하는 1단 메뉴를 눌렀을 때 빨간색에 해당하는 2단 메뉴가 나오고 빨간색을 기준으로 파랑계열의 3단 메뉴가 나옵니다. 이처럼 3단계 내비게이션은 깊이가 있지만, 너무 많은 단계는 사용자에게 혼란을 줄 수 있어 피하는 게 좋습니다. 반응형 사이트를 설계할 때는 PC와 모바일에서 내비게이션을 어떻게 표현할지 고민해야 합니다. 때로는 한 개의 내비게이션을 공유하고, 때로는 두 개의 ..
안녕하세요 찐망고입니다. 오래간만에 swiper관련 포스팅을 하네요. 오늘은 pagination의 블릿 모양 대신 텍스트로 나오게 작업을 해볼까 합니다. 마녀공장을 클론코딩한 학생의 swiper슬라이더인데요. 텍스트를 클릭해서 화면을 넘기고 싶은 거죠 ㅎㅎ 여러 방법이 있으나 저는 배열을 이용해서 작업했습니다. const bullet = ['마녀공장', 'GS25']; const swiper01 = new Swiper ('.work-slider, { loop: true, pagination: { el: '.work-slider .swiper-pagination', clickable: true, renderBullet: function (index, className) { return '' + (bulle..
브라우저에서 보이는 스크롤 자체를 css로 커스텀 할 수 있는데요. 요즘은 일부러 스크롤을 안보이게도 하던데.. 사용자경험 측면에서 스크롤이 없는게 과연 맞는것일까 잠깐 생각해보았습니다 ㅎㅎ https://m.manyo.co.kr/main/index.php m.manyo.co.kr 마녀공장 모바일 사이트 인데요 네비게이션 부분에 스크롤이 보이지 않아요 CSS로 커스텀 하는 경우 IE에선 소용이 없지만 그분은 운명하셨으므로 한번 써볼까요? ㅎㅎ /* 스크롤바 커스텀 css */ .navi-scroll::-webkit-scrollbar { width: 0; /* 스크롤바 너비 */ } .navi-scroll::-webkit-scrollbar-thumb { height: 100%; /* 스크롤바 길이 */ b..
안녕하세요 찐망고입니다. 오늘은 html문서에 이미지를 불러와볼 건데요. 문서에 이미지를 불러오는 요소들을 모두 포스팅해볼게요.. 이미지 맵은 따로 포스팅하도록 하겠습니다. 어떤 요소를 사용하든 이미지를 불러오려면 역시 경로가 중요합니다. 상대경로와 절대경로 안녕하세요 찐망고입니다. 오늘은 경로를 포스팅해볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나 이미지를 띄울 때 많이 사용합니다. 경로가 틀어지지 않아야 링크도 잘 uiweb.tistory.com 1. 요소 이미지요소는 경로를 통해 문서에 이미지를 불러올 때 사용하는 가장 기본적인 요소인데요. alt속성을 꼭 같이 넣어줘야 합니다. 웹접근성에 어긋나지 않기 위해서죠. 스크린리더기에서 해당 이미지를 alt속성에 사용한 값으로 읽어줍..
안녕하세요 찐망고입니다. a요소는 문서와 문서를 연결하거나 이미지를 클릭하여 페이지가 넘어가거나 메일을 보내거나 같은 페이지끼리 위아래로 연결하려고 할 때도 사용합니다. a는 인라인 요소지만 블록요소를 포함할 수 있는 요소이며 블록요소를 포함할 땐 css를 이용하여 display: block; 혹은 inline-block을 지정해서 width, height, margin, padding을 적절히 잘 넣는 게 중요합니다. 일단 문서끼리 연결을 하려면 경로를 이해해야 하는데 경로 모르면 안 되니까 이전 포스팅 보고 오시길 바랍니다 상대경로와 절대경로 안녕하세요 찐망고입니다. 오늘은 경로를 포스팅해볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나 이미지를 띄울 때 많이 사용합니다. 경로가 틀..
안녕하세요 찐망고입니다. 오늘은 경로를 포스팅해볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나 이미지를 띄울 때 많이 사용합니다. 경로가 틀어지지 않아야 링크도 잘 걸리고 이미지도 잘 보이겠죠 ㅎㅎ 당연히 css문서나 js문서를 연결할 때도 매우 중요하고요 상대경로의 기준은 현재 작업하고 있는 문서의 위치를 기준으로 연결한 문서들을 찾는 거고요 절대경로의 기준은 현재 경로를 걸기위한 문서 위치의 시작을 찾는 거예요. 예를 들어서 D드라이브에 찐 망고폴더에 문서와 이미지폴더가 있는데 문서에 이미지폴더안에 있는 이미지를 연결하고 싶다라고 하면 상대경로는 문서를 기준으로 이미지폴더를 찾는 거라 이런 식으로 경로를 넣어주면 되지만 절대경로는 누구나 다 알고 있는 동일한 위치를 기준으로 시작을..
안녕하세요 찐망고입니다. 오늘은 강조를 뜻하는 인라인요소인 요소와 요소를 포스팅해볼 건데요 html마크업을 하면서 주의할 점은 요소의 의미를 파악하는 것입니다. 브라우저에서 글자가 두꺼워지고 기울어지고 여백이 생기고 하는 것들은 css로 수정이 가능하니까요. 요소와 모두 강조의 의미를 뜻할 때 사용하는 요소인데요. 각각 다른 방식으로 강조를 나타내요 요소는 주로 중요한 텍스트의 의미를 나타내는데, 해당 텍스트가 문서의 중요한 부분임을 강조하는 데 사용합니다. 예를 들어, 금융상품의 가격이나 경고메시지와 같이 중요한 정보를 강조하는 데 사용하죠 그리고 스크린 리더등 보조기술을 사용하는 사용자에게 중요한 내용임을 전달합니다. 주의: 이 상품은 한정된 수량으로만 제공됩니다. 요소는 텍스트에서 강조해야 할 부분..
안녕하세요 찐망고입니다. 수업중에 만들어본 boxmodel 테스트 문제인데요. 친구들이 풀면서 고생하길래 블로그에도 공유해봅니다. 아직 초보자 이신 분들 한번 풀어보세요. 아래 문제가 테스트 문제구요~ 제목요소 menu01 menu02 menu03 이용약관 ©copyright 결과이미지를 보고 똑같이 만드는 작업입니다 답은 여기요! 더보기 제목요소 menu01 menu02 menu03 이용약관 ©copyright 2021.12.30 - [WEB/CSS] - box model (박스모델) - border와 padding box model (박스모델) - border와 padding 안녕하세요 찐망고입니다. 오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CS..
안녕하세요 찐망고입니다. html요소 중 인용에 해당하는 두 요소가 있는데요 긴 인용문은 요소를, 짧은 인용문은 요소를 사용합니다. 는 블록레벨요소이고, 다른 웹페이지나 문서에서 인용한 텍스트를 표시할 수 있습니다. 홍범도 한말의 독립운동가. 만주 대한독립군의 총사령군이 되어 일본군을 급습하여 전과를 거두었다. 독립군 본거지인 봉오동 전투에서 독립군 최대의 승전을 기록하였으며, 청산리 전투에서는 제1연대장으로 참가하였다. 그 후 항일단체들의 통합을 주선하여 대한독립군단을 조직, 부총재가 되었으며, 고려혁명군관학교를 설립했다./p> [네이버 지식백과] 홍범도 [洪範圖] (두산백과 두피디아, 두산백과) 요소에는 제목요소인 h요소나 문단요소인 p요소와 같은 블록요소를 자식으로 포함할 수 있고, 시멘틱요소들도 ..
안녕하세요 찐망고입니다. 오늘은 문단을 정의하는 p요소에 대해 포스팅할 건데요. P는 Paragraphs를 뜻하고, 단락이라고 하죠? 블록요소입니다. 문단, 단락은 문장이 모여 문단이 된다고 하죠? 하나의 중심 생각을 나타내는 덩어리라고 생각하면 될 건데요. 우리는 책을 쓸건 아니니까, p요소가 실제 웹사이트에서 어떻게 쓰이는지 봐야겠죠? 나는 문단이다아아아아 라고 대놓고 보이는 곳이라면 당연히 p요소를 주저 없이 쓸 수 있을 테지만 아무래도 웹사이트는 그러지 못한 경우 가 많다 보니 고민을 해봅니다. 빨간 박스로 쳐놓은 부분이 저 정도는 p요소를 사용해도 무방하다는 뜻이고요 웹표준 코딩이란 게 요소의 의미에 맞춰 마크업을 하는 걸 뜻하니 다른 요소들을 대입해 보고 대입하기 애매한 요소들에게 p요소들을 ..
- Total
- Today
- Yesterday
- 시멘틱마크업
- 프로그래밍기초
- 반응형웹
- padding
- 슬라이드플러그인
- CSS3
- 웹디자인
- boxmodel
- css
- 크로스브라우징
- JavaScript
- 자바스크립트숫자카운트
- 스마트폰해상도
- 포토샵합성
- Slick
- Border
- css4
- slickAPI
- uxdesign
- 디자인팁
- uiux
- margin
- 웹접근성
- uidesign
- UI디자인
- 피그마플러그인
- 웹표준
- JavaScriptTips
- css그리드
- 코딩교육
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |