[CSS] background-size : cover; 사용방법
2022. 11. 28. 16:45
Front/CSS
바로 드가자. 배경 화면을 확인해보자. 방법 분명 다음과 같이 배경화면이 있다. 최대로 축소 했을때 배경화면이다. 조금 두번 확대 했을 때 3번 더 확대 했을 때이다. 다음과 같이 background-size: cover; 배경화면이 자체적으로 커지는 것을 말한다. To be continue..
[CSS] 정 가운데 정렬 시키는 방법
2022. 11. 28. 16:42
Front/CSS
처음에는 아무 생각 없이 Margin 으로만 가운데를 맞춰보려고 했는데 생각해보니까, 32인치 / 27인치 / 24인치 / 이 이하 등등.. 도 있다는 점을 내가 간과했다. 그래서 만약 24인치 위주로 Margin값을 세팅했다면 27인치 / 32인치 등의 모니터에서 제대로 안보이게 될 것이다. 방법 다음 처럼 페이지를 맨뒤로 뺏을 때 가운데에 오도록하려면 body { margin: 0 auto; } 다음을 꼭 선언해주고 HTML이든, CSS든 스타일 잡아주어야한다.... To be continue..
[CSS] z-index의 개념 및 사용방법
2022. 11. 28. 16:35
Front/CSS
안녕하세요. 요근레, 퍼블리시 할일 들이 많아지네요. 그래서 이참에 퍼블리시에 대해서 제대로 알고가려고 하나하나 작성합니다. z-index 👌 z-index는 position : [속성]; 이 필수로 적용되어야 합니다. 그래야 position: 속성을 받은 요소들끼리 z-index 비교하여 앞 뒤를 정하게 됩니다. z-index는 층을 의미합니다. 예를 들어, 다음을 예시를 뜯어보면 다음과 같이 세 가지 요소로 나뉘어진걸 우리는 확인해 볼 수 있습니다. 요소들은 배경 / 글자 / 버튼 이렇게 세가지 요소들이 있다는 것을 저희는 다시 한번 확인 해 볼 수 있죠.. 하지만 만약 배경 레이어가 더 위에 있게 된다면? 다음과 같이 아무것도 없게 보이게 됩니다. 왜냐하면, 배경화면이 가리고 있기 때문이죠. 배경 ..
[CSS] 부트스트랩을 사용하지 않고 반응형 웹 페이지 제작하는 방법
2022. 11. 25. 16:09
Front/CSS
뭐... 개발자끼리 더 말이 필요한가? 우리는 코드로 대화한다. @media 반응형 웹을 만드는데 기본은 @media를 사용하는것이다. 어떻게 사용할까? 바로 @media (max-width: 원하는 픽셀 사이즈) { } Example @media (max-width: 1550px){ // 1550px 보다 작으면 시작 body{ // 바디의 속성 overflow-x: hidden; // x축 (아래 스크롤바를) 없애겠음 } .main_div .productcontent { border-left-width: 10px; // 왼쪽 테두리의 속성은 10px로 바꾸겠음 } .main_property .propertycontent { padding-left: 10px; // 왼쪽으로 padding 10px 주겠..
[CSS] 배경관련된 모든모음
2022. 11. 24. 13:38
Front/CSS
배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat) background-repeat 속성 값 배경 이미지 반복 (repeat) 배경 이미지 한 번만 넣기 (no-repeat) 가로 방향으로 이미지 반복 (repeat-x) 이런식으로 화면을 쭉빼도 계속 이어져서 나온다. 세로 방향으로 이미지 반복 (repeat-y) 배경 이미지 잘리지 않도록 반복 (space) - 공백 배경 이미지 잘리지 않도록 반복 (round) - 빈 공간 없음 배경 이미지 위치 지정하기 (background-position) 배경 이미지 가운데 한 번만 넣기 (center) 배경 이미지 크기 설정하기 (background-size) 이미지가 잘리지 않는 한도 내에서..
[Spring] 오류: 연산자 없음: numeric = character varying Error 해결방법
2022. 11. 16. 10:09
Front
지정된 이름 및 인자 형식고 일치하는 연산자가 없습니다. 명시적 형변환자를 추가해야 할 수도 있습니다. Problem The data went in the columns well as you can see But Then There is a problem "오류 연산자 없음 : numeric = character varying" Why did this problem arise? And what's the matter ? The problem is mean that we have to change Data type as you know as you can see The colum ID's data type is "numeric" So we need to chnage ID to numeric type! We..