본문 바로가기

분류 전체보기

부트스트랩 - Breadcrumb 이번 시간에는 부트스트랩 Breadcrumb에 대해서 알아보자. 사이트 이동 경로(Breadcrumb trail)는 사용자 인터페이스에서 현재 사용자가 어떤 위치에 있는지를 시각적으로 나타내는 기법 중 하나이다. 이 기법의 영어 이름은 《헨젤과 그레텔》에서 집을 찾기 위해 남매가 뿌리는 빵 부스러기에서 유래했다. 출처 : https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EC%9D%B4%EB%8F%99_%EA%B2%BD%EB%A1%9C 위에서 설명한 것과 같이 사용자가 사이트내에서 현재 어느 위치에 있는지를 알려주는 네비게이션이라고 생각하면 쉽게 이해가 갈것이다. 예제에서 사용된 클래스는 breadcrumb / breadcrumb-item / act..
부트스트랩 - Badges 오늘은 부트스트랩에서 사용하는 Badges 대해 알아보고자 한다. 본 글은 부트스트랩 4.3.1 을 기준으로 작성되었다. 적용모습 Example heading New 소스코드 Example heading New 이와 같이 badge class를 사용하게 되면 글옆에 배지를 표시 할 수 있다. 본 예제에서는 Example heading 옆에 new 라는 배지가 출력됨을 볼 수 있다. badge class 종류를 보면 다음과 같다. badge-pill badge-primary badge-secondary badge-success badge-info badge-warning badge-danger badge-light badge-dark alert-link alert-dismissible alert-headi..
부트스트랩-Alerts 부트스트랩에서 Alerts 대해 알아보고자 한다. 본 글은 부트스트랩 4.3.1 을 기준으로 작성되었다. 부트스트랩은 style의 class개념만 잘 이해하면 보고 따라할 수 있게 되어 있으니 하나 하나 따라 해 보시죠... 원하는 메시지 클래스의 alert 와 그하위 alert-primary 를 사용하면 아래와 같이 alert 를 보여줄수 있습니다. 적용모습 Well done! You successfully read this important alert message. 소스코드 Well done! You successfully read this important alert message. 이와 같이 원하는 alert를 만들어 줄수 있다. alert 하위에 있는 class종류를 보면 다음과 같다. ale..
부트스트랩 Borders 부트스트랩에서 border 는 쉽게 박스모양의 스타일을 지정할 수 있게 해준다. 위 코드를 부트스트랩으로 지정하게 되면 다음과 같은 모양을 볼 수 있다. border옵션이 지정된 곳에 라인이 생긴다. ^^ 직각 사각형 모양뿐만 아니라 둥근 모양도 만들수 있다. 실행 결과는 다음과 같다.
부트스트랩 사용 팁 부트스트랩으로 작업할 일이 있어서 이래저래 보다 두손 다 들고, 좀 쉽게 설명해 놓은 글이없나 찾아보다가 발견한 글이있습니다. 부트스트랩에 대해 쉽고 이해하기 좋게 설명해주었네요. 이 글은 국내 개발자분께서 번역해 주신 글입니다. https://brunch.co.kr/@clay1987/131 부트스트랩, 어떻게 사용해야할까? -파트 1 (번역본) 세계에서 가장 인기있는 프론트엔드 라이브러리, 부트스트랩 사용법! | 이 게시물은 Medium, wd stack 채널의 How to bootstrap 이라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있습니다. 원본글 링크 https://medium.com/wdstack/how-to-bootstrap..
Spring MVC 라이프 사이클 Spring MVC의 라이프사이클 브라우저로 부터 요청(Request)을 받고 응답(Response)하기까지 Spring MVC의 처리 흐름은 위와 같다. 1. 먼저 브라우저로부터 요청이 들어오면 일단 Filter을 거치게 된다. Filter에서 하는 대표적인 처리를 보면 Encoding이 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 encoding org.springframework.web.filter.CharacterEncodingFilter encoding UTF-8 encoding /* Colored by Color Scripter cs 2. 다음으로 DispatcherServlet이 Controller에 요청을 전달하기 전에 가로챈다. 요청을 가로챈 후 Handl..
텔레그램 ID 획득하는 방법 구글링으로 검색해서 텔레그램 채팅봇 개발을 한번 해볼려고 이것 저것 하다보니, 텔레그램 가입, 채팅봇​ 가입, 채팅 아이디 찾고 등등 메시지 날려서 링크 클릭 그래서 넘겨받은 JSON 값에서 ID를 찾는 방법을 보았는데요... 에휴.. 뭐가 이리 많은지.. ㅋㅋ 다하고 나니 좀더 쉽게 찾을수 있는 방법이 있었네요.. 내 ID뭐냐 물어보면 바로 답해주는 봇이 있네요. 텔레그램에서 getid로 조회 하니 GetIDs Bot 이라는게 있습니다. 이녀석에게 물어보니 친절하게 답해주네요. 명령어는 /my_id 입니다.
티스토리에 글작성시 코드 편하게 입력하기 티스토리에 글 작성시 프로그램 코드를 입력하는 경우가 많은데 스킨 수정하기는 귀찮고 쉽게 할 수 있는 방법을 소개합니다. Color Scripter(Color Scripter : https://colorscripter.com/)라는 사이트에 코드를 작성하고 Ctrl+C / Ctrl+V 하는 방법으로 처리 하시면 됩니다. 이렇게 작성된 내용을 복사해서 여기에 붙여 넣으면?? 아래처럼 나타납니다. ㅎㅎ 참 쉽죠??? 1 2 3 4 5 6 7 8 9 10 11 $object = simplexml_load_string($response); $totalCount = $object->body->totalCount; //item $items = $object->body->items->item; foreach($ite..