All50 [CSS] 김버그의 HTML&CSS는 재밌다 | Screen Only 스크린리더기를 사용하는 이용자를 위해 HTML 정보로는 필요하나 시각적으로 보이지 않게끔 하기 위해서 CSS로 작업한다. .sr-only { display: absolute; z-index: -100; width: 1px; height: 1px; overflow: hidden; opacity: 0; } display: none; 으로 하면 HTML이 정보로써의 가치가 없다고 여기기 때문에 아예 읽히지 않고 또한 width나 height의 값을 0으로 주면, 안에 있는 컨텐츠 자체를 없다고 여긴다. (+) 최근에는 'sr-only'라는 표현보다 'visuallyHidden'이라고 쓰이더라. 2021. 4. 29. [CSS] 김버그의 HTML&CSS는 재밌다 | Background [Background] .background { background-color: #0066ff; /* hex rgb rgba */ background-image: url (); /* 이미지경로 넣기 */ background-repeat: no-refeat; background-size: cover; /* contain | cover | custom */ background-position: center center; /* x y */ } 2021. 4. 29. [CSS] 김버그의 HTML&CSS는 재밌다 | Typography [Typography] .text { font-size : 16px; /* px em rem */ line-height: 1.5; letter-spacing: -0.01em; /* px em */ font-family: "Poppins". sans-serif; font-weight: 400; /* regular: 400; bold: 700; */ color: #0061ff; /* hex rgb rgba */ text-align: left; /*left center right */ text-indent: 10px; text-transform: none; /* none capitalize uppercase lowercase */ text-decoration: none; /* none underline lin.. 2021. 4. 28. [CSS] 김버그의 HTML&CSS는 재밌다 | Media Query [Media Query] 반응형 웹 ; Responsive Web을 만들기 위해서 HTML 태그 안에 위와 같은 meta 태그를 선언해야함. @media screen and (min-width: 768px){ } 모바일, 태블릿, 데스크탑 순서로 viewport가 점점 커지는 형식으로 작업을 하는 것이 더 수월하다. 예를 들어 모바일에 맞는 CSS를 적용했을 시, 그 아래 media query를 선언하고 먼저 선언한 스타일코드와 다른 부분을 적으면 된다. .banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffc82c; } @media screen and (min-width: 768px) { .banner { bot.. 2021. 4. 28. re:start 나는 열정이 있는 삶을 원한다. 마음이 설레는 일을 하고 싶다. 자유롭게, 그리고 떳떳하게 살고 싶다. 인생이라는 짧은 여행의 마지막 여정까지, 그렇게 철이 덜 난 그대로 걸아가고 싶다. 내 삶에 단단한 자부심을 느끼고 싶다. / 유시민, 어떻게 살 것인가 저울질만 하며 결정을 내리지 못하고 있던 내가, 하기로 마음을 먹고 행동으로 옮기기로 했다. 새로운 걸 도전할 수 있는 현재의 환경에 항상 감사하며 멘탈을 단디 붙잡고 공부를 시작한다. 어중간하게 간만 볼 거라면 아예 시작을 하지 않는 게 낫지 않을까. 한 번 사는 인생, 도전해보고픈 건 하자는 생각으로 해본다. 나의 멘탈을 붙잡는 여러 문장들을 읽으며 이제 진짜 시-작! 2021. 4. 28. 이전 1 ··· 7 8 9 10 다음
