본문 바로가기

전체 글221

css border 속성으로 테두리 한 번에 꾸미기 css border 속성으로 테두리 한 번에 꾸미기 네 안녕하세요, 이번 포스팅에서는 이전 시간에 알려드린 테두리 꾸미는 걸 한 번에 하는 방법에 대하여 알아보도록 하겠습니다. 테두리 꾸미는 것도 그 기능들을 각각 다 쓰려면 정말 번거로운 일인데, 그걸 한 번에 하는 방법이 있습니다. 그래서 이번 시간에는 그 방법을 알아볼 것입니다. 그리고 테두리를 꾸밀 때 쓰는 프로퍼티를 잘 모르시는 분들이라면 제가 아래에 테두리를 꾸미는 방법에 대한 글을 써 둔 링크를 기재를 해둘 테니, 거기를 방문하시기를 추천드립니다. 2023.03.18 - [html, css, 자바스크립트] - css border 속성 이용하여 테두리 꾸미기 css border 속성 이용하여 테두리 꾸미기 css border 속성 이용하여 테두.. 2023. 3. 19.
css border 속성 이용하여 테두리 꾸미기 css border 속성 이용하여 테두리 꾸미기 네 안녕하세요, 이번 포스팅에서는 테두리를 꾸미는 방법에 대하여 알아보도록 하겠습니다. 박스를 꾸밀 때는 특히 박스의 내부보다는 테두리를 주로 꾸미는 경우가 많습니다. 박스의 내부를 다채롭게 채우는 것 보다 테두리를 꾸미는 것이 오히려 더 깔끔하고 예뻐 보이기 때문입니다. 그래서 이번 시간에는 테두리를 어떻게 꾸밀 수 있는 지 한 번 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 테두리의 두께, 모양, 색 꾸미기 : border-width, border-style, border-color 이용 테두리는 패딩과는 다르게 박스의 경계부를 지칭하기 때문에 색과 스타일을 지정할 수 있습니다. 그 쓰임은 이렇습니다. 아래에 보여드리는 예시는 기본.. 2023. 3. 18.
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.
css 폰트 사용법에 대하여 알아보기 css 폰트 사용법에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 폰트를 사용하는 방법에 대하여 알아보도록 하겠습니다. 폰트는 우리가 사용하는 글꼴을 결정짓는 요소인 만큼, 글의 분위기나 독자가 느끼는 감정 등을 좌지우지하기 때문에 중요합니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 폰트 사용하기 : Serif, Sans-Serif, Monospace css에서 폰트는 우리가 평소에 컴퓨터에서 사용하는 여러 가지의 글씨체와 똑같습니다. 그리고 예전에는 라는 태그를 써서 폰트를 입력했는데, 요즘에는 css에서 폰트 프로퍼티를 이용해서 폰트를 입력을 하게끔 만들었습니다. 오히려 미리 css 스타일 시트를 이용하여 선언을 하고 들어가니 좀 더 편해진 셈입니다. 그리고 css에서 폰트를 되게 다양하게 .. 2023. 3. 13.
css 표준 단위에 대하여 알아보기 css 표준 단위에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 css에서 사용을 하는 표준 단위에 대하여 알아보도록 하겠습니다. 아무래도 우리가 직접 쓰는 프로그래밍 언어이기 때문에 그 표준 단위를 모르고 쓸 수는 없어서 한 번 작성을 해보기로 했습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. css의 표준 단위 우리가 css로 스타일 시트를 작성을 하다 보면 사이즈를 적절한 비율로 조절을 하여 구성을 해야만 합니다. 그렇지 않으면 css로 만들어낸 것들이 다 뒤죽박죽이 되어버리고, 오히려 css로 인해서 엉망이 될 수도 있습니다. 그렇기 때문에 단위의 지정은 정말 중요하다고 할 수가 있습니다. 그래서 제가 주로 많이 사용하는 css의 표준 단위를 표로 한 번 정리를 해봤습니다. 단위 의미 사.. 2023. 3. 13.

티스토리툴바