css
-
[css] viewportcss 2021. 1. 6. 23:32
what is viewport? viewport는 브라우저에서 사용자에게 보이는 부분을 viewport라고 한다. 우리가 사용자의 경험을 증진시키기 위해서 신경써야 하는 부분 중 하나이다. 만약 사용자가 우리 웹사이트의 컨텐츠보다 작은 화면을 가지고 있다면, viewport보다 content가 더 크기 때문에, 스크롤하여 화면을 봐야 하는 불상사가 일어난다. 이럴 경우에는 사용자 입장에서 매우 불편하기 때문에 핸드폰이라면 viewport에 맞게 만드는게 좋다. viewport 이용하기 viewport를 이용해서 mobile 기기에 맞는 웹사이트를 제작할 수 있다. html tag중에 meta tag를 이용하면 된다. 그럼 meta tag는 뭘까요? head tag 안에서 사용하는 link, base, s..
-
css 용어 정리css 2020. 12. 31. 20:36
CSS 용어 정리 CSS(Cascading Style Sheet) Box Model box model은 css가 레이아웃을 설정하는데 사용하는 모델이다. 간단하게 말하면 그냥 요소들의 크기를 지정하는데 쓴다. 다음 사진과 같다. 자세한 설명 reset CSS html tag에 기본적으로 들어가있는 margin, padding, color, border 등의 스타일적인 요소를 초기화 시키는 css code or library이다. 너무 잘 정리해주신 블로그를 찾았습니다. 감사히 쓰겠습니다. float html 요소 위치를 변경하는 css 요소 중 하나. BFC(Block Formatting Content) 이라는 박스에 의해서 위치가 지정된다. float: left | right | none; // Lef..
-
css box modelcss 2020. 12. 26. 19:54
서론 Box Model이라는 것을 매우 오랜만에 들어보았다. 후배가 나에게 질문을 했을 때 단지 대답을 하면 되는 것이였지만, 난 그러지 못했다. 생각해보니 css, html에 대해서 제대로 공부해 본적이 없는 것 같다. 만약 면접 질문에 이런게 나오면 난 어떻게 대답해야 하는가? 또 이런 후배나 다른 사람들이 질문하면 어떻게 해야하는가? 다른 html적인 부분과 css는 어떤가? 이런 생각이 내 뇌를 천천히 잠식하면서, 점점 불안감에 싸이기 시작했다. 인간은 자신이 모르는 것을 다른 사람들이 알면 2가지 반응을 보인다. 불안해지거나, 의지에 불타거나. 나는 후자가 되고 싶었다. Box Model? 프론트를 어느정도는 해보았던 사람이라면 무조건 써보았을 것이다. Box Model은 html 요소의 크기를..