전체 글

[JS] 온라인 컴파일러

https://www.programiz.com/javascript/online-compiler/ Online JavaScript Compiler (Editor) www.programiz.com

TIL 23 :: Tailwind CSS

보호되어 있는 글입니다.

[Error] VSCode Extension , Sass 에러 해결하기

문제 HTML, CSS할 때까지만해도 아무 문제없던 Extension들이 Sass를 하면서 갑자기 동작하지 않았다. 캡처해둔 에러는 이것뿐이지만 open.live.server~~~ 이러면서 emmet도 안되고 open live server도 안되는 상황이었다. 자동완성이 안되니 태그 하나하나를 일일히 써야했다. 해결 방법 1. 정확한 문제 파악하기 - 다른 폴더에서는 잘 됐었기때문에 특정 폴더에서만 생긴 문제라는걸 알았다. 그래서 폴더 별로 옮기면서 어느쪽에 문제가 있는지 찾았고 Sass폴더가 문제였다는걸 발견했다. 2. extension 변경 - 기존에 사용했던 extension 삭제하고 다른 extension 설치하기 다른 블로그에서 캡처한걸 보고 소리쳤다,,, 읽자마자 이게 내 문제를 해결해줄 답인..

TIL :: 22 Sass_2

보호되어 있는 글입니다.

[CSS] 11 float + 실습 피드백

보호되어 있는 글입니다.

TIL 21 :: Sass

보호되어 있는 글입니다.

TIL 19 :: em? rem?

공부할 때 참고한 자료들 https://www.youtube.com/watch?v=AfxL9OKBBCU&t=3s https://www.youtube.com/watch?v=xWMKz9NCD0k 반응형 이미지와 동영상을 공부한 후 미디어쿼리에 대해서 배우고 그걸 실습하는 과정에서 em과 rem에 대해 궁금해졌다. 회고팀 스터디에서 분명 단위에 대해 한 번 더 공부했음에도 막상 쓰려고하니 여전히 헷갈려 정리해보려고한다. 먼저 em과 rem은 상대값이다. px이나 cm처럼 고정적인 크기가 아니기에 상황에 따라 다른값을 가진다는 의미이다. 절대값 상대값 cm em mm rem px vw vh % em : 현재 폰트 사이즈를 나타내는 단위로 부모요소를 기준으로 size가 지정된다. 만약 부모 폰트 사이즈가 10px..

TIL 18 :: 반응형 이미지, 비디오

이미지 포맷의 종류 GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능합니다. 애니메이션 처리가 가능합니다. JPG/JPEG (Joint Photographic Expert Group image): 매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다. PNG (Portable Network Graphics) : 왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다. SVG (Scalable Vector Graphics) : SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능합..

TIL 17 :: IR(Image Replacement) & Image Sprite

IR(Image Replacement) 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법을 배워봅니다. 이미지 대체텍스트 제공을 위한 CSS 기법으로 이미지 대체 텍스트를 제공할 수 있으며, 이 중 다음과 네이버를 기준으로 소개하고자 한다. 1. 다음 ir-pm 1) PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할 때 .ir_pm{ display:block; overflow:hidden; Font-size:1px; line-height:0; text-indent:-9999px; } text-indent는 들여쓰기(양수)와 내어쓰기(음수)를 할 수 있는 속성으로 기본값은 0이다. 값을 -9999px;을 주었는데 그렇다면 왼쪽으로 9..

[CSS] checkbox

로그인 상태 유지 input을 아예 다른 태그들로 만들 때 input이 아닌 태그들로 만들게 되면 웹접근성이나 SEO에 영향이 없나? - checkbox는 선택이라는 용도로 input type="checkbox"하는 이유는 체크박스를 구현하는 것이니 그에 맞게 html 코드를 추가해 주는 것이다. 참고) input과 label의 순서는 바뀌어도 상관없고 for이랑 id 연결만 신경쓰면 된다. .form-login .labl-hold{ display: block; height:22px; margin:17px 0 21px; text-align: left; font-weight: 500; font-size: 16px; line-height: 20px; color:#767676; cursor: pointer; ..