[CSS] 내가 사용해본 CSS에 기능
2022. 11. 28. 16:54
Front/CSS
까먹을까봐 또 미리미리 포스팅하려고 하는 언덕위의 제임스 입니다...... body { font-family : KoPubDotum Bold; // 어떤 폰트를 사용할 것 인가? background-color: #2a2a2a; // 배경 색깔은 어떤거로 사용 할 것인가? } .backimg{ // 배경 이미지 height: 800px; // 배경 이미지의 높이는? background: url(../../img/main2.png); // 배경 이미지 가져오기 background-size: cover; // 배경 이미지 확대/ 축소 기능 position: relative; // z-index의 기준을 잡는 기준점 / z-index 사용시 필수요소임 z-index: 1; // 요소의 몇번째 층으로 사용할 것인..
[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) 이미지가 잘리지 않는 한도 내에서..