본문 바로가기

CSS60

css 박스에 색 입히기 css 박스에 색 입히기 네 안녕하세요, 이번 포스팅에서는 박스에 색을 입혀보는 시간을 가져보려 합니다. 보통 박스의 경우에는 테두리를 표시하거나 박스 내에 색을 입히는 작업을 해서 표시하는 경우가 많습니다. 그 이유는 박스에 색을 입히지 않으면 박스의 경계가 어디인지 육안으로는 확인이 불가능하기 때문에 시인성을 높이기 위해 사용합니다. 그래서 이번 시간에는 박스에 색을 어떻게 입힐 수 있는지 알아보려 합니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 박스의 색 기본적으로 css에서 박스에 색을 입힐 수 있는 속성은 이렇습니다. background border 보통 이 정도를 봅니다. 그 외에 margin이나 padding 등은 이 박스나 그 외 다른 속성들 중에 공간을 가지는 태그들의 경계, 그리고 .. 2023. 3. 18.
css 박스 프로퍼티로 박스 제어하기 css 박스 프로퍼티로 박스 제어하기 네 안녕하세요, 이번 포스팅에서는 css 박스 프로퍼티로 박스를 제어하는 것에 대하여 알아보도록 하겠습니다. 앞 포스팅에서 제가 html은 박스로 이루어져 있다고 그랬었죠? 그래서 그걸 우리가 제어를 해줘야만 합니다. 그리고 그걸 css가 담당을 하지요. 그래서 이번 포스팅에서는 박스를 제어하는 css 박스 프로퍼티를 이용하여 박스를 제어하는 방법들에 대하여 알아보도록 하겠습니다. 1. 박스의 크기 박스를 제어하는 가장 기본은 바로 박스의 크기를 제어하는 것입니다. 기본적으로 박스를 제어할 때 쓰는 프로퍼티는 이러합니다. width : 박스의 너비 height : 박스의 높이 margin : 박스의 외부 여백 padding : 박스의 내부 여백 border-width.. 2023. 3. 18.
css 박스 모델의 구성 알아보기(콘텐츠, 패딩(padding), 테두리(border), 여백(margin) css 박스 모델의 구성 알아보기(콘텐츠, 패딩(padding), 테두리(border), 여백(margin) 네 안녕하세요, 이번 포스팅에서는 css로 다루는 모델 중 하나인 박스 모델에 대하여 알아보도록 하겠습니다. html은 사실 여러 개의 박스가 모여 하나의 웹 페이지를 만든다고 봐도 이상하지 않습니다. 그 이유는 본문을 이루는 body 태그 안에 있는 div 태그가 바로 블록 박스 태그이기 때문입니다. 그래서 이번 포스팅에서는 이러한 블록 박스 모델을 어떤 식으로 구성을 하고 있는지에 대하여 알아보도록 하겠습니다. 그럼 지금부터 같이 보시죠. 1. html 태그를 다루는 방법 html 태그는 사각형의 박스로 이루어져 있습니다. 그래서 앞서 말씀드린 것처럼 html은 여러 개의 블록 박스 구역으로 .. 2023. 3. 18.
css font 프로퍼티 이용하여 모든 프로퍼티 속성 한 번에 사용하기 css font 프로퍼티 이용하여 모든 프로퍼티 속성 한 번에 사용하기 네 안녕하세요, 이번 포스팅에서는 저번 시간에 알려드렸던 폰트 사용법을 좀 더 쉽게 활용하는 방법에 대하여 알아보도록 하겠습니다. 폰트의 사용법을 알고 계시다는 전제 하에 진행을 할 예정이니, 폰트 사용법에 대하여 모르시는 분들이라면 이전 포스팅을 먼저 보고 와주시면 좀 더 도움이 되실 겁니다. 사이트는 아래에 달아두도록 하겠습니다. 2023.03.13 - [html, css, 자바스크립트] - css 폰트 사용법에 대하여 알아보기 그럼 지금부터 시작하도록 하겠습니다. 1. 단축 프로퍼티 사용하기 : font 프로퍼티 이용 단축 프로퍼티인 font 프로퍼티는 font 속성 프로퍼티를 한 번에 쓸 수 있도록 해주는 프로퍼티입니다. 이 .. 2023. 3. 18.

티스토리툴바