Front/CSS18 [CSS] 정 가운데 정렬 시키는 방법 처음에는 아무 생각 없이 Margin 으로만 가운데를 맞춰보려고 했는데 생각해보니까, 32인치 / 27인치 / 24인치 / 이 이하 등등.. 도 있다는 점을 내가 간과했다. 그래서 만약 24인치 위주로 Margin값을 세팅했다면 27인치 / 32인치 등의 모니터에서 제대로 안보이게 될 것이다. 방법 다음 처럼 페이지를 맨뒤로 뺏을 때 가운데에 오도록하려면 body { margin: 0 auto; } 다음을 꼭 선언해주고 HTML이든, CSS든 스타일 잡아주어야한다.... To be continue.. 2022. 11. 28. [CSS] z-index의 개념 및 사용방법 안녕하세요. 요근레, 퍼블리시 할일 들이 많아지네요. 그래서 이참에 퍼블리시에 대해서 제대로 알고가려고 하나하나 작성합니다. z-index 👌 z-index는 position : [속성]; 이 필수로 적용되어야 합니다. 그래야 position: 속성을 받은 요소들끼리 z-index 비교하여 앞 뒤를 정하게 됩니다. z-index는 층을 의미합니다. 예를 들어, 다음을 예시를 뜯어보면 다음과 같이 세 가지 요소로 나뉘어진걸 우리는 확인해 볼 수 있습니다. 요소들은 배경 / 글자 / 버튼 이렇게 세가지 요소들이 있다는 것을 저희는 다시 한번 확인 해 볼 수 있죠.. 하지만 만약 배경 레이어가 더 위에 있게 된다면? 다음과 같이 아무것도 없게 보이게 됩니다. 왜냐하면, 배경화면이 가리고 있기 때문이죠. 배경 .. 2022. 11. 28. [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 주겠.. 2022. 11. 25. [CSS] 배경관련된 모든모음 배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat) background-repeat 속성 값 배경 이미지 반복 (repeat) 배경 이미지 한 번만 넣기 (no-repeat) 가로 방향으로 이미지 반복 (repeat-x) 이런식으로 화면을 쭉빼도 계속 이어져서 나온다. 세로 방향으로 이미지 반복 (repeat-y) 배경 이미지 잘리지 않도록 반복 (space) - 공백 배경 이미지 잘리지 않도록 반복 (round) - 빈 공간 없음 배경 이미지 위치 지정하기 (background-position) 배경 이미지 가운데 한 번만 넣기 (center) 배경 이미지 크기 설정하기 (background-size) 이미지가 잘리지 않는 한도 내에서.. 2022. 11. 24. [CSS] Using border tools Today we will learn about difficult tools so listen carefully guys, Let's get it. class는 .과 같이쓰고 id는 #과 같이 쓴다는 것을 잊지말자. 김덕배김덕배김덕배김덕배 김덕배김덕배김덕배김덕배 김덕배김덕배김덕배김덕배 김덕배김덕배김덕배김덕배 김덕배김덕배김덕배김덕배 김덕배김덕배김덕배김덕배 border는 테두리를 정해주는것을 말하는것 같다. 말그대로, border는 모퉁이를 말하며, radius는 사각형을 둥굴게 하는 기능을 가진다. border-radius: 20px /* 모퉁이를 둥글게 만듬 퍼센트로도 사용가능 */ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; bo.. 2022. 1. 19. [CSS] <ul> , <span> Using background-color tools This time we try to using about , . Let' s start it 특별히 유의할 내용은 없다. 잘 사용하지는 않을것 같은데 알아는 두자. aaa bbb das beta 알파 베타 aaaa bbbb block은 세로로 나열, inline-block은 가로로 나열 한다. 김덕배 제임스 송지아 박순신 잘보면 검정색 버튼이 없어진걸, 볼수가 있다. 예전에는 무언가를 만드는데, Table을 많이 활용했지만 요즘은 , 이런것을 많이 활용한다. span, li { display: inline-block; width: 100px; padding: 15px; } 김제동 암탉 수탉 마당을 나온 만약 로 닫아주게 된다면 가운데에 공백에 생기게 되는것을 명심하자. To be continue 2022. 1. 18. [CSS] CSS Background tools I think you just need to know that there are things like this. To be continue 2022. 1. 17. [CSS] Using CSS background tools Let's start CSS background tools 더보기 배경색 변경 배경색 변경 배경색 변경 배경색 변경 배경색 변경 배경색 변경 배경색 변경 배경색 변경 첫번째부터 색상,채도,밝기 배경색 변경 2022. 1. 15. 이전 1 2 3 다음
