쏘 개발로그

글을 작성하면서 매번 콘솔로만 찍어서 보여주기도 애매했고, 그렇다고 매번 PC에서 하긴 귀찮았는데, 웹에서 코드 입력 시 바로 보여주는 사이트를 찾았다 !! JS BinSample of the bin:jsbin.com 아래는 내가 예시로 작성해 본 건데 한 줄 칠 때마다 실시간으로 우측에서 반영돼서 넘 편하당 !! alert도 잘 뜬당 !! 글에 첨부할 사진과 같이 간단한 코드를 작성할 때에는 꽤나 유용하게 쓰일 것 같다 ㅎㅎ q(≧▽≦q)

CSS에서 display라 하면 보통은 요소를 보이게 할지 말지를 정하는 속성 정도로만 알고 있을 것이다.그러나 실제로는 보일지 말지 뿐만 아니라 요소가 레이아웃 흐름 안에서 어떤 성격으로 존재할지를 결정하는 핵심 속성이기도 하다. 따라서 display를 제대로 이해하지 못하고 사용하면, 'margin-top이 왜 적용이 안 되지?', '분명 width를 줬는데 왜 안먹지?'와 같은 문제 상황들을 마주하게 된다. 그러므로 이번 글에서는 display의 대표적인 값인 none, block, inline, inline-block을 중심으로 각각이 어떤 렌더링 특성을 갖는지, 언제 어떤 선택을 해야 하는지를 정리해보자. 1. display란display는 요소가 화면에 그려지는 방식과 레이아웃 참여 방식..

CSS에서 border는 겉보기엔 박스에 선을 둘러주는 속성처럼 보이지만, 실제로는 요소의 박스 모델을 구성하는 한 축이고, 동시에 시각적 위계를 만드는 가장 단순하면서도 강력한 도구이다. 아마 다들 프로젝트를 진행하다 보면 '왜 테두리를 주면 요소 크기가 커져 보이지?', 'outline이랑 border는 뭐가 다르지?' 등의 궁금증을 가져 봤을 것이다.따라서 오늘 글에서는 border가 어떤 공간을 차지하고, 어떤 방식으로 그려지고, 어떤 문제들을 조심해야 하는지 등을 정리해보고자 한다. 1. border 기본 문법우선 기본적인 사용법부터 보면, 아래와 같다. 그럼 다음과 같이 테두리가 생기는 것을 확인할 수 있다. 아니면 다음과 같이 펼쳐서 작성해도 동일한 결과가 나온다. (나는 개인..

CSS를 배우다 보면 가장 먼저 만나는 레이아웃 관련 속성이 margin과 padding이다.둘 다 여백을 준다는 공통점이 있긴 하지만, 실제로는 여백이 생기는 위치가 다르고, 그 차이 때문에 화면의 배치 결과도 크게 달라진다. 처음에는 단순히 `margin = 바깥 여백`, `padding = 안쪽 여백`이라고 외우고 넘겼겠지만, 실제로 레이아웃을 만들다 보면 '왜 간격이 내가 생각한 대로 안 벌어지지?', '왜 배경색이 여기까지 칠해지지?' 같은 문제를 경험해본 사람들이 많을 것이다. 오늘 글에서는 이런 헷갈림이 생기지 않도록 margin과 padding을 박스 모델 관점에서 확실히 짚고 넘어가보고자 한다. 1. 박스 모델이란HTML 요소는 브라우저에서 박스로 취급된다.그리고 그 박스는 보통 아..

CSS에서 단위는 얼마나 크게, 얼마나 넓게 같은 값을 표현할 때 사용한다.이때 문제는 단위를 하나만 쓰는 게 아니라, 상황에 따라 단위가 다르게 동작한다는 점이다. 그래서 처음 접할 땐 px이 제일 익숙하니까 px만 쓰는 경우도 꽤나 있는 것 같아 보이는데, 실제로는 em이나 % 같은 상대 단위를 이해해야 반응형 레이아웃과 접근성까지 깔끔하게 처리할 수 있다. 따라서 오늘 글에서는 가장 많이 쓰는 단위인 px, %, em, rem을 중심으로 하나씩 정리해보고자 한다. 1. pxpx는 픽셀로, 아마 우리에게 가장 익숙한 단위이지 않을까 싶다.대부분의 경우 어느 정도인지 감이 오기 때문에 크기를 정확히 지정할 수 있어서 직관적이라는 장점이 있다. 예를 들어 아래와 같이 높이와 너비를 200px로 지정..

CSS를 처음 배울 때 가장 먼저 마주하는 개념은 아마 선택자일 것이다.CSS는 어떤 스타일을 어떻게 적용할지 정의하는 언어인데, 이를 위해서는 어디에 적용할 것인지를 정확히 찝을 수 있어야 한다.같은 색, 같은 크기, 같은 여백을 주더라도 적용하는 대상이 달라지면 화면은 완전 다른 모습이 되기 때문이다. 이처럼 CSS는 선택자를 통해 특정한 HTML 요소를 정확히 집어낸 뒤에 스타일을 적용하기 때문에 선택자를 이해하지 못하면 CSS가 왜 예상과 다르게 동작하는지 알기 어려우므로 한 번 간단하게 정리하고 가는 게 좋다. CSS선택자는 매우 많기 때문에 자세한 거는 아래의 링크로 들어가 간단히 훑어만 보고, 사실상 이걸 다 외워서 사용한다는 건 말이 안 되니 오늘 포스팅에서는 자주 쓰이는 선택자 4개만 살..