![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhB917%2FbtrSnWqxfNh%2FcghRBUkzfGavT8SIoTKDyk%2Fimg.png)
[CSS] background-size : cover; 사용방법
2022. 11. 28. 16:45
Front/CSS
바로 드가자. 배경 화면을 확인해보자. 방법 분명 다음과 같이 배경화면이 있다. 최대로 축소 했을때 배경화면이다. 조금 두번 확대 했을 때 3번 더 확대 했을 때이다. 다음과 같이 background-size: cover; 배경화면이 자체적으로 커지는 것을 말한다. To be continue..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcUXLSI%2FbtrSplwRGvq%2F4kKVfHKy2FYqwKD1JmH1ak%2Fimg.png)
[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..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbXnLPH%2FbtrSnXbWNch%2FUSzDMGmzUSZwvJDGy9hVtk%2Fimg.png)
[CSS] z-index의 개념 및 사용방법
2022. 11. 28. 16:35
Front/CSS
안녕하세요. 요근레, 퍼블리시 할일 들이 많아지네요. 그래서 이참에 퍼블리시에 대해서 제대로 알고가려고 하나하나 작성합니다. z-index 👌 z-index는 position : [속성]; 이 필수로 적용되어야 합니다. 그래야 position: 속성을 받은 요소들끼리 z-index 비교하여 앞 뒤를 정하게 됩니다. z-index는 층을 의미합니다. 예를 들어, 다음을 예시를 뜯어보면 다음과 같이 세 가지 요소로 나뉘어진걸 우리는 확인해 볼 수 있습니다. 요소들은 배경 / 글자 / 버튼 이렇게 세가지 요소들이 있다는 것을 저희는 다시 한번 확인 해 볼 수 있죠.. 하지만 만약 배경 레이어가 더 위에 있게 된다면? 다음과 같이 아무것도 없게 보이게 됩니다. 왜냐하면, 배경화면이 가리고 있기 때문이죠. 배경 ..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmMOT9%2FbtrR8xsWg7L%2FgaP8eFimLN1Xa72Tz5FZR1%2Fimg.png)
[Toefl] 토플단어 (5)
2022. 11. 27. 00:41
Toefl
plausible 그럴듯한 (a) counterpart 동등한 것 (n) pronounced 현저한 (a) exceedingly 대단히 (ad) chancy 위험한 (a) discern 알아차리다. 알아보다 precious 귀중한 (a) conducive ~에 좋은 menance 위협하다 penetrate 관통하다, 꿰뚫어보다. prosper 번창하다. 성공하다. tuned to ~와 일치된
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbVDJTh%2FbtrR8IHi8Km%2F6kkncfNDk77XSbfkWaKptK%2Fimg.png)
[Toefl] 토플단어 (4)
2022. 11. 26. 00:20
Toefl
fortify 강화하다. blur 흐릿한, 흐릿하게하다. scrupulous 세심한, 꼼꼼한 repel 물리치다. bustling 붐비는 (a) cumbersome 다루기 힘든 (a) anomaly 변칙 (n) (I don't know this picture is anomaly kkk) To be continue..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FciHnH9%2FbtrSs0zKeMS%2FCCiOqQ01NRtwgGxSyawL3K%2Fimg.png)
[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 주겠..