쏘 개발로그

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

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

오늘은 표를 만들 때 사용하는 테이블 태그에 대해 알아보자. 1. 테이블 태그테이블 태그에는 아래와 같은 것들이 있다.태그설명table표 삽입tr표에 행 추가 (table row)th표에 제목 추가 (table heading)td표에 데이터 추가 (table data) 2. 테이블 태그 실습그럼 실제로 이걸 활용해서 표를 어떻게 만들 수 있는지 확인해보자.결과 사진을 먼저 보여줄테니, 이 결과를 얻기 위해선 위에서 본 테이블 태그를 어떻게 활용하면 좋을지 먼저 고민해보자. 아직은 살짝 어설퍼 보이는 표이지만, 우선 아래와 같이 작성하면 된다. 이름 나이 직업 홍길..