codeGray

bootstrap - container 부트스트랩 컨테이너는 가장 기본적인 레이아웃 요소이고 그리드(테이블) 형식의 시스템을 사용할 때 필요하다. html로 치면 table 태그라고 볼 수 있다. 자세한 내용은 아래 공식 홈페이지에서 알 수 있다. https://getbootstrap.kr/docs/5.1/layout/containers/ 컨테이너 컨테이너는 지정된 기기 또는 뷰포트 내에서 콘텐츠를 포함하고 채우고 정렬하는 Bootstrap의 기본 컴포넌트입니다. getbootstrap.kr 부트스트랩은 기본적으로 반응형을 지원하기 때문에 아래 표대로 원하는 클래스를 사용할 수 있다. 이 표를 쉽게 설명하면 container-sm 속성은 화면 크기가 576px 아래로 내려가면 화면에 100%맞게 그리고 ..

bootstrap - 설정하기 부트스트랩은 웹 디자인을 쉽게 해주는 툴킷이다. 웹디자인이 부담스러운 개발자들이 쉽게 사용해서 디자인 할 수 있다. 가장 좋은 점은 반응형 디자인도 가능하다는 점이다. 부트스트랩을 사용하려면 공식홈페이지에 접속해서 스타터 템플릿을 복사해서 사용하면 된다.https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr 문서 > 시작하기에서 내려보면 스타터 템플릿이 있다. 그대로 복사해서 넣으면 사용 할 준비를 마친 것이다. See the Pen ..

CSS - background, img 태그 차이 img 태그 1. 이미지를 불러왔을 때 경로가 어긋난 경우 엑스박스로 보여진다. 2. 사이즈를 조절하면 정비율로 줄어들고 늘어난다. background css속성 1. 이미지를 불러왔을 때 경로가 어긋나도 엑스박스로 표현하지 않는다. 2. 사이즈를 자유롭게 조절 가능하다. 보통 컨텐츠 UI 카드 등을 img로 하고 배경화면 같은 것을 background css속성으로 넣는다.

Java - mapper / json 변환 자바에서 API를 만들때 Json을 사용하게 된다. Json string 문자열을 내가 원하는 클래스의 형식으로 변환 하고 싶을 때 아래와 같이 사용하면 된다. //mapper ObjectMapper mapper = new ObjectMapper().configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false); Map hdelOfferMap = new HashMap(); //TypeReference로 변환 hdelOfferMap = mapper.readValue(hdelOfferResult, new TypeReference(){}); 여기서 중요한 점은 mapper를 선언 할 때 Deserializat..

CSS - float float 는 객체를 띄우는 기능이다. 쉽게 설명하면 워드에서 이미지와 글자가 공존할 때, 이미지 위치에 따라 글자가 이미지를 피해서 위치하는 것이다. 아마 아래 예제를 보면 바로 이해가 될 것이다. See the Pen Untitled by code_gray (@code_gray) on CodePen. box의 위치에 따라 글자의 위치도 box를 가리지 않도록 변경된다. 마지막에 clear 속성을 하는 이유는 위에서 설정한 float 설정이 계속 살아있기 때문에 다음 아래에 생성되는 것들에게 영향이 있을 수 있어 초기화 시키는 것이다. ( clear를 해줘야 부모의 창에 맞게 float이 적용됨 )

CSS - z-index z-index는 객체의 보여주는 순서를 정할 때 사용한다. 값이 높을수록 우선순위이다. 다만 position 속성을 정의해야 z-index 속성이 반영된다. See the Pen Untitled by code_gray (@code_gray) on CodePen.

CSS 로 레이아웃을 짜다보면 내가 지금 잘 그리고 있는 건지 확인해 보고 싶을 때가 있다. 그럴때 아래의 코드를 추가하면 내가 지금 그리고 있는 box 영역들에 border가 표시되어 쉽게 확인 할 수 있다. !important 속성은 지금 내가 설정한 css값이 최우선적으로 반영 되는 것이다. * { border : 1px solid red!important; }

CSS - display 속성 비교 display - block 블럭 형식으로 아래로 쌓이는 속성 See the Pen Untitled by code_gray (@code_gray) on CodePen. display - inline 우측으로 쌓이지만 크기 속성은 반영되지 않음 ( 글자 크기에 자동으로 맞춰짐 ) See the Pen display-inline by code_gray (@code_gray) on CodePen. display - inline-block 우측으로 쌓인다. See the Pen display-inline-block by code_gray (@code_gray) on CodePen. display - none 개체를 완전히 제거 See the Pen Untitled by cod..

개인 개발연습을 하다보면 github 리모트를 변경 할 때가 있다. github으로 가서 새로운 repository를 생성하면 아래와 같은 창이 나타난다 그 다음 vscode 터미널을 열고 2번째 처럼 똑같이 입력해주면 리모트 저장소가 변경된다. git remote add origin https://github.com/pooh7159/react-board.git git branch -M main git push -u origin main 충돌이 날 경우 잘 merge 해주면 된다.

box-shadow x, y, color x, y, blur, color x, y, blur, spread, color x축이 커지면 왼쪽에서 오른쪽으로 y축이 커지면 위에서 아래로 그림자가 생성된다. blue는 색의 흐림정도이고 값이 커질수록 그림자의 범위가 커지고 색이 흐려짐 spread는 그림자의 크기 background-color: rgba(0, 79, 255, 0.9); red, green, blue, alpha 값을 넣는다. alpha 값은 투명도 이다. See the Pen Untitled by code_gray (@code_gray) on CodePen.