Suyeon BLOG

요즘 반응형 웹을 만들면서 em과 rem을 배운 지식들을 포스팅해 볼 것입니다. 📌 em과 rem을 사용하는 이유 사용자가 임의로 브라우저의 폰트 크기를 변경했을 때, 그 설정에 맞게 웹의 폰트 크기도 변해야 합니다. 그러기 위해 사용하는 것이 em과 rem입니다. (px은 크기가 고정적이라서 저는 반응형 웹을 만들 때 사용하지 않고 있습니다.) (폰트 크기에만 사용하는 것이 아니라 크기를 변경할 때 다 사용 가능합니다.) 📌 em이란 부모의 폰트 크기에 영향을 받는 것이 em입니다. 예를 들어, 부모의 폰트 크기가 16px입니다. 이때 자식 폰트에 2em을 사용하면 16 * 2 = 32px이 됩니다. 가나다라1 가나다라2 가나다라3 📌 rem 이란 브라우저 폰트 크기에만 영향을 받는 것이 rem입니다...

프로젝트를 하던 도중 데스크탑에선 잘 보이던 텍스트가 모바일 화면에선 줄바꿈이 되어 보기 불편해지는 현상이 발생한 경험이 있습니다. 이를 해결하기 위해 after를 활용한 예시를 보여드리겠습니다. 📌 ::after CSS에서 요소의 맨 마지막 자식으로 또 다른 하나의 요소를 만들어 줍니다. 요소에 장식용 콘텐츠를 추가할 때 자주 사용됩니다. 📌 코드 구현 /* CSS */ .store-vegetable-data > span::after {/* 모바일 화면일 때 적용됩니다. */ content: "채식"; font-size: 0.97em; padding: 1px 5px; border-radius: 12px; border: 1px solid var(--main-color); } @media screen an..

프로젝트에서 상대방과 대화하는 창을 만들어야 하는데 style 주기 너무 어려워서 고생하다가 해결해서 포스트 남깁니다! 📌 코드 진행 순서 1. input 태그에 원하는 메시지를 입력합니다. 2. 전송 버튼을 클릭하면 화면에 사용자가 입력한 메시지가 보이게 됩니다. (이때 '' 일 땐 보이지 않게 합니다.) 3. 이렇게 계속 진행됩니다. 📌CSS 코드 해석 1. myChat 클래스: 사용자가 입력한 메시지를 모두 감싸고 있고, 여기서 텍스트 오른쪽 정렬을 합니다. 2. chatBox 클래스: 사용자가 입력한 메시지와 보낸 시간을 감싸고 있고, 보낸 시간은 이 클래스를 기준으로 배치될 수 있도록 position: relative; 를 줍니다. 3. chatTime 클래스: 메시지를 보낸 시간을 감싸고 있고..

1. visible - 기본값 - 요소를 보여준다. 2. hidden - display: none;을 하면 자신의 위치를 0으로 만들어서 다른 레이아웃이 이 자리를 채우지만, visibility: hidden을 하면 opacity:0처럼 보이지만 않는 것이다. (display는 박스 타입을 정하는 속성이다.)

opacity - 투명도와 관련된 속성입니다. - 0이면 완전 투명, 1이면 완전 선명입니다. - 0~1 사이의 값으로 투명도를 조절합니다. .box { background-color: #5959FF; opacity: 0.4; }

float - (물 위를) 떠다니다. 라는 의미. - float를 하면 부모로부터 집나간 아이가 된다. 형제들도 알지 못하게 된다. 따라서 이 공간은 빈공간이 되어버린다. - float를 주면 해당 요소의 display가 block이 된다. 단, 한 줄 전체를 차지하는 것은 아니다. ※ width를 지정하지 않으면 float를 했을 때 최소 너비는 본인이 가지고 있는 content 너비이다. - .red에 float: left를 하니 밑에 있는 .orange가 사라진다. (.red 밑으로 들어갔기 때문이다) - 부모 너비가 400px이고, 자식 3개의 너비가 200px일 때 다 float: left;를 하면 나머지 1개는 자리가 부족하므로 줄바꿈해서 밑에서 왼쪽으로 간다. (자신이 갈 수 있는 공간에서 ..

Box model - margin - border - padding - width x height (content 영역) ※ border-radius로 동그랗게 만들어도 그건 여전히 네모난 상자이기에 텍스트가 동그란 모양에 안 맞을 수도 있다. 이건 당연한 것이다. Box sizing - box-sizing : box의 size를 잡는 방법을 정하는 속성이다. - box-sizing의 값: content-box, border-box - 에 480px X 480px로 크기를 줬는데, padding값을 줬더니 크기가 달라졌다. → 그 이유는 box-sizing : content-box 이기 때문이다. (저것이 모든 요소에 디폴트로 적용된다.) → content-box는 위의 사진에서 본 width X hei..

※ CSS : Cas Cade (폭포처럼 흐르다. -> 위에서 아래 흐름으로 스타일이 적용된다) 1. Type Selector: 태그 선택자. div { width: 100px; height: 58px; background-color: red; } 2. class selector: 클래스 선택자 - 여러 태그에 동일한 스타일을 적용하고 싶을 때 사용합니다. - 한 요소에 여러 클래스를 가질 수 있습니다. /* html */ /* CSS */ .box-1 {} /* class="box-1" */ .box-1.box-2 {} /* class="box-1 box-2" */ 3. ID Selector : 아이디 선택자 - 단 한개만 존재해야 한다. 똑같은 이름의 id는 존재하면 안된다. #box-1 {} /* ..

출처: Do it! HTML + CSS + 자바스크립트 See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen. 만약 버튼을 만들어서 한다면, 버튼을 이모티콘도 좋지만, 여기서 참고해서 필요한 걸 찾아 쓰는 것도 좋을 것 같습니다. https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org

See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen. ※ 이때 높이는 %가 아닌 vh로 줘야 합니다. - % : 태그가 들어있는 element 높이에서 100%라는 의미로, 해당 element의 높이가 12px이면 12px만큼의 높이를 얻게 됩니다. - vh : viewport height라서, element가 아닌, device 높이의 100%를 의미합니다.