css 썸네일형 리스트형 [HTML/CSS] 1차, 2차, 3차 드롭 다운 메뉴 바 구현하기 안녕하세요 인포돈 입니다. 백엔드를 학습하고 있는 입장에서 정말 css를 구성하는 것만큼 귀찮은 작업은 없다고 생각합니다 ㅜㅜ 그러나 테스트를 위해서, 간단한 메뉴 바 정도는 정말 빠르게 만들 수 있도록 틈틈이 연습해 두시면, 도움이 되는 것을 알아두세요! 때문에 이번 포스트에서는 1차, 2차, 3차 드롭 다운 메뉴 바를 만든는 법을 이해해봅시다. 1차 드롭다운 메뉴 바 HTML 코드 더보기 아이템 1 아이템 2 아이템 3 css 코드 더보기 /* 초기화 작업 */ body, ul, li{ margin : 0; padding : 0; list-style : none; } a{ text-decoration: none; color:inherit; font-weight : bold; } .box { text-.. 더보기 [HTML/CSS] display와 positon의 이해 안녕하세요 인포돈 입니다. 기업에는 CSS에서 가장 기초지만, 많이 사용하고 모르면 CSS를 다루기 힘들어지는 display와 position에 대해 이해해 보자 Display css를 활용하기 위해서 display의 개념을 확실히 이해하는 게 좋다. display에 넣을 수 있는 값들이 굉장히 많지만, 전문적인 frontend를 꿈꾸고 있지 않는 이상, 많은 개념을 알 필요가 없다. 크게 2가지만 알고 있으면 된다. 1) display : block 해당 block의 기능은 아래 특성만 기억하면, 완벽하다. - 설정되어 있지 않으면, 너비는 최대한으로 넓어진다. - 설정되어 있지 않으면, 높이는 최소한으로 줄어든다. - 세로 배열로 정렬된다. - 이를 블록화라고 부른다. 정말 별로 어렵지 않다. 너비가.. 더보기 [타임리프]org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing 안녕하세요 인포돈 입니다. 타임리프 템플릿을 랜더링 할 때, 자원을 찾지 못하는 오류 프로젝트에서 타임리프를 활용하면서, Model에 값을 넣어주어 활용하였다. 오류가 나는 부분은 아래와 같다. 오류 내용 org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/chatbot/chat.html]") Caused by: org.attoparser.ParseException: Could not parse as expression: "favoriteKeyword : ${favoriteKeywords}" (template: "cha.. 더보기 React v6 카드 목록 작성하기(4*4 상품 페이지 만들기, 쇼핑몰) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. 실행코드 ide는 vscode를 활용합니다! 리액트 이전에 html, css, js에 대한 기본 지식이 있어야 합니다. 4*4 상품 목록 카드 작성하기 저희가 일반적으로 카드 목록을 작성하게 되면, 아래 글과 같이 상품들이 나열되는 목록을 보여줘야 할 때가 있습니다. 이러한 목록을 만들어주는 방법을 소개해드리겠습니다! - HTML 기본적으로 저희는 아주 간단하게 코드를 작성하였습니다. 카드에 들어갈 내용은 이미지, 상품 제목, 상품 내용 요약, 가격, 상품 상세페이지 보러 가기 총 5가지의 정보를 담고 있는 카드를 만들어 보겠습니다. function App(){ return( 상품 목록 카드 작성하기 상품 제목 상품 내용.. 더보기 React v6 변화한 router 사용하기 (Link, Routes, Route 태그) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. 실행코드 ide는 vscode를 활용합니다! 리액트 이전에 html, css, js에 대한 기본 지식이 있어야 합니다. React Router란 웹 프런트엔드를 개발하다 보면 항상 document를 활용해 페이지를 넘겨주는 작업이 귀찮고, 사이트가 방대해질수록 점점 복잡한 구조 때문에 어려움을 겪기 일상입니다. 우리는 이러한 문제점을 보다 쉽게 해결하기 위해서 React에서 제공하는 Router를 사용하면 이러한 어려움을 해결할 수 있게 됩니다. 리액트에는 이러한 페이지 이동을 보다 쉽게 해주는 많은 라이브러리가 있지만, 대중적으로 가장 많이 사용하는 라이브러리가 바로 React Router입니다. 이러한 router는 .. 더보기 초보자를 위한 기초 7일 완성, 자바스크립트 강좌(Javascript) - 1 (JS란?, event, onclick, onchange, onkeydown, 웹에서 js사용하는 법) 안녕하세요 인포돈 입니다. 초보자를 위한 자바스크립트입니다. 코딩 초보자, 일반인, javascript를 처음 접하시는 분들에게 추천드립니다. 시리즈 별로 조금씩 학습해보면 일주일 안에 javascript가 무엇인지 알게 되는 경험을 할 수 있습니다. 지금 바로 시작합니다. * 참고사항 - 개발환경은 Atom을 기준으로 작성되었습니다. - 웹 브라우저는 크롬을 기준으로 작성되었습니다. - javascript 시리즈는 웹에서의 활용을 집중적으로 다루어 나갑니다. 1. javascript가 무엇인가? 인터넷 상에 있는 수많은 웹들은 html을 기반으로 만들어졌다. 그러나 html은 컴퓨터 프로그래밍 언어라기보다는 컴퓨터 언어라고 볼 수 있다. 여기서 프로그래밍이라는 단어의 의미는 '순서'라고 볼 수있다. h.. 더보기 HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 7(홈페이지제작) 안녕하세요 ~ 인포돈 입니다. 오늘부터는 이전에 배웠던 css, html을 활용하여 원하는 홈페이지를 제작해보도록 하겠습니다. 대부분의 사람들은 발표를 맡게 될 때 ppt를 작성하게 됩니다. 저 같은 경우에는 ppt를 작성할 때 겉표지, 예쁜 템플릿을 먼저 찾게 됩니다. 홈페이지도 똑같습니다. 예쁜 템플릿을 찾아봐야 합니다. 물론, 그 템플릿을 직접 만들어 볼 수도 있습니다. 그러나 저희는 누구든 쉽고 빠르고 간단하게! 더 깊숙이 css와 html을 학습하고 싶으신 분들은 직접 템플릿을 만들어보시는 것도 추천드립니다. 그럼 무료로 템플릿을 다운로드할 수 있는 곳을 몇 곳 추천해드리겠습니다. 1. free-css www.free-css.com/free-css-templates Download 3166 Fr.. 더보기 HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 4(CSS) 안녕하세요 인포돈 입니다. 이전 시간까지 HTML 문법에 대해 알아보았습니다. 이번 시간에는 HTML과 상호보완적으로 많이 쓰이는 CSS에 대해서 알아보도록 하겠습니다. 물론 HTML만으로도 홈페이지를 만들 수 있지만 저희는 좀 더 이쁘게 만들고 싶지 않으신가요??? 그렇다면 CSS의 일부분을 배우면 저희가 보는 이런 웹사이트들처럼 저희도 엔지니어가 될 수 있습니다. 이전에 HTML 태그를 연습했던 1.html 파일로 그대로 연습해보셔도 되고, 새롭게 파일을 만들어서 진행하셔도 무방합니다 바로 본론으로 들어가 css에 대해서 알아보겠습니다. HTML에서는 가운데 정렬, 배경 이미지 등 예쁘게 꾸미기 위해서 만들어진 게 CSS라는 문법입니다. 하나의 예시를 보여드리겠습니다. HTML 해당 코드는 css가 .. 더보기 이전 1 2 다음
