📕 Goal Creating a bulletin board using SpringBoot Studying how the web works by creating a bulletin board. Continuously studying Java language, frameworks, MVC pattern, and databases afterwards. 🔧 Development Tool Language JAVA FramgeWrok SpringBoot IDE IntelliJ community ver Database MariaDB View templete Thymeleaf DB access JPA (Java Persisitence API) 📃 Table of Contents Setting up development..

⭐ Reason 1 As a web developer, studying frameworks is essential. Especially in Java, learning both Spring and Spring Boot is crucial. This time I chose Spring Boot because it provides many features necessary for web development and helps make development faster and more efficient. With simple configurations, it enables quick start of development, boasts excellent integration with the Spring fram..

📕 Problem https://leetcode.com/problems/flood-fill/description/ 💡 My Solution This is very basic problem for Flood Field. #leetcode #733. Flood Fill # similar wiht find island problem from collections import deque import copy def bfs(y,x,image): q = deque() q.append((y,x)) directy = [-1, 1, 0, 0, 0] directx = [0, 0, -1, 1, 0] while q: y, x = q.popleft() for i in range(5): dy = y + directy[i] dx ..

▷ Bootstrap CSS 프론트엔드 프레임워크(Toolkit) 미리 만들어진 다양한 디자인 요소들을 제공하여, 웹사이트를 빠르고 쉽게 개발할 수 있도록 한다 트위터가 처음으로 만들었다 https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 한글은 버전업이 느릴 수도 있어서, 영어로 된 문서를 보는게 더 좋다. - Do..

1. 구조, 스타일링 2. 레이아웃, 배치, 공간 배분, 정렬(position, flexbox) 3. Toolkit

📕 Problem https://leetcode.com/problems/binary-search/ 💡 My Solution This is very basic problem for binary search method. # leetcode # 704. Binary Search # nums = [-1,0,3,5,9,12] # target = 9 nums = [-1,0,3,5,9,12] target = 9 # sort the list first nums.sort() star = 0 end = len(nums) - 1 flag = 0 index = 0 while True: mid = (star + end)//2 if nums[mid] == target: flag = 1 index = mid break elif ..

Margin collapsing (마진 상쇄) 두 block 타입 요소의 martin top 과 bottom이 만나 더 큰 margin으로 결합되는 현상 웹 개발자가 레이아웃을 더욱 쉽게 관리할 수 있도록 도와준다 각 요소에 대한 상,하 margin을 각각 설정하지 않고, 한 요소에 대해서만 설정하기 위한 것이다 노란색 박스 margin-bottom 10px 설정하고 회색 박스 margin-top 30px을 설정했을 때, 둘 중에 큰 값으로 margin이 결정된다.

border border-width, border-style, border-color를 한번에 설정하기 위한 속성 작성 순서는 영향을 주지 않는다 margin 4방향의 속성을 각각 지정하지 않고, 한번에 지정할 수 있는 속성 padding 4방향의 속성을 각각 지정하지 않고, 한번에 지정할 수 있는 속성

Inline-block inline과 block 요소 사이의 중간 지점을 제공하는 display값 기본적으로는 inline의 특성을 가진다 추가적으로 block 요소의 특징을 가진다 - 너비와 높이를 지정할 수 있다. (width, height) - padding, margin 및 border를 사용해서 다른 요소들을 밀어낼 수 있다. 요소가 줄 바꿈 되는 것을 원하지 않으면서, 너비와 높이를 적용하고 싶은 경우에 사용한다. inline inline-block inline-block만 적용시켰을 때 inline-block + text-align 같이 적용했을 때 더보기 Lorem ipsum dolor sit amet inline-block adipisicing elit. Animi iusto enim o..

Inline Block a, img, span h1~h6, p, div 텍스트 align을 사용해서 정렬하기 수평정렬 margin control하기 어딘가에 들어갈 수 있는 박스 다른 요소를 수평방향으로 밀어낼 수 있지만, 위아래로 밀어낼 수는 없다. (이미지는 예외) 무언가를 막는 박스 block을 컨트롤 하려면 수평방향을 컨트롤 해야한다. 본인의 컨텐츠 영역만큼만 공간을 차지한다. 너비와 높이를 지정할 수 없다. (width, height) 새로운 행으로 나뉘지 않는다 수직방향 : padding, margins, borders가 적용되지만 다른 요소를 밀어낼 수는 없다 수평방향 : padding, margins, borders가 적용되어 다른 요소를 밀어낼 수 있다 항상 새로운 행으로 나뉜다 너비와 ..