CSS 배경색 넣기와 테두리 만들기 - background, border 사용법

HTML&CSS 시작하기

1. 컬러와 사이즈

CSS colors

CSS에서 색을 다루는 첫걸음은 두 가지입니다. 요소에 배경색을 깔아주는 background, 그리고 요소의 외곽선을 그리는 border.
이 둘만 알아도 눈에 보이지 않던 HTML 요소들의 영역이 화면에 드러나기 시작합니다.

CSS 배경색 넣기 - background

HTML 요소에 배경색을 넣을 때는 background 속성을 사용합니다. 값으로는 색상명(color name), HEX 코드 등을 넣을 수 있습니다.

<h1>블락요소에 배경색 넣기</h1>

h1 {
    background: lightblue;
}

h1은 블록 요소라서 브라우저 가로 전체에 하늘색 배경이 깔립니다. 글자 뒤에만 깔리는 게 아니라 한 줄 전체에 깔리는 이유는 블록 요소의 width 기본값이 auto(가로 전체)이기 때문인데, 이 부분은 너비와 높이 편에서 자세히 다룹니다.

축약 입력: VSCode에서 bg + Tab을 누르면 background가 자동완성됩니다.

CSS 테두리 만들기 - border

테두리는 굵기, 스타일(실선 · 점선), 색상을 한번에 작성할 수 있습니다.
border-width, border-style, border-color를 따로 따로 쓰지 않고 bd + Tab 키로 입력한 축약 속성을 사용합니다.

/* 이렇게 세 줄로 쓰지 않고 */
h1 {
    border-width: 1px;
    border-style: solid;
    border-color: lime;
}

/* 한 줄로 축약해서 씁니다 */
h1 {
    border: 1px solid lime;
}

순서는 굵기 → 스타일 → 색상입니다. solid는 실선이고, dashed로 바꾸면 점선 테두리가 됩니다.

참고로 border는 배경색이 없어도 요소의 영역을 눈으로 확인할 수 있게 해줘서, 레이아웃이 어떻게 잡혔는지 확인하는 디버깅 용도로도 자주 씁니다. "이 박스가 어디까지지?" 싶을 때 임시로 border: 1px solid red;를 넣어보는 습관은 실무에서도 그대로 쓰입니다.

직접 연습하기

section, article, h1, p 요소를 만들고 각각 배경색을 지정해 보세요. 색상명으로 indianred, orange, gold, lightgreen을 쓰면 요소마다 영역이 한눈에 보입니다. 같은 요소들에 이번엔 배경색 대신 border 테두리를 지정해 보면, 배경과 테두리가 요소의 영역을 드러내는 방식의 차이도 비교할 수 있습니다.

#CSS기초 #CSS배경색 #background #CSS테두리 #border #웹퍼블리싱 #HTML기초 #프론트엔드 #코딩독학