border-radius
HTML & Javascript
2015. 3. 7. 12:53
border-radius■ 웹 문서에서 다른 요소와 구분, 또는 정렬 등의 이유로 테두리를 만들어서 사용하는데요. 물론, 이 테두리의 모양 및 색깔과 굵기 등을 지정해서 만들 수 있습니다. 얼마 전에 이와 과련된 글을 정리해 놓은 게 있는데, 참고하실 분들은 참고하시구요. http://godvow.tistory.com/111 ◀ css border 속성 ■ 이번 글에서는 이 테두리의 모서리를 둥글하게 설정하는 속성인 border-radius에 대해서 알아보도록 하겠습니다. 모서리가 직각이면 날카롭고 딱딱한 느낌을 줄 수 있기 때문에 둥글게 만들어 주면 좋은데요. 네 군대의 테두리를 똑같은 모양으로 만들 수도 있고, 각각 다르게 만들 수도 있습니다. ■ 예제를 만들어가면서 속성을 적용해볼게요. 단순하게 메..
font-family
HTML & Javascript
2015. 3. 5. 19:36
font-family ■ 웹 문서에서 가장 많이 사용되는 요소가 텍스트 일 텐데요. 이 텍스트의 스타일을 어떻게 지정해주느냐에 따라서 문서 전체의 분위기가 확 달라지게 되기 때문에 여러 가지 font 속성을 이용하는데요. 이번 글에서는 font-family 속성에 대해서 알아보겠습니다. ■ font-family 속성은 웹에서 사용하는 HTML 문서에 포함된 글꼴을 지정해주는 역할을 하는데요. 형식은 다음과 같습니다. font-family : "글꼴 이름 1", "글꼴 이름 2", "글꼴 이름 3" ■ 위 형식을 보면 속성값에 여러 개의 글꼴을 지정하고 있는데요. 글꼴을 입력할 때는 큰따옴표(")를 사용해도 되고 작은따옴표를 (') 사용해도 관계없습니다. 참고하시구요. 형식처럼 글꼴을 여러 개 지정해놓으면..
css font-weight
HTML & Javascript
2015. 3. 4. 17:33
css font-weight ■ 텍스트 관련 스타일은 여러 종류가 있지만, 이번 글에서는 font-weight 속성에 대해서 알아보겠습니다. 이 속성은 글자의 굵기를 지정해주는 역할을 하는데요. 사용하는 형식은 다음과 같습니다. font-weight : 속성값; ■ 이때 사용할 수 있는 속성값은 다음과 같습니다. 1. normal : 일반적인 글자의 굵기입니다. 2. bold : 진하게 표시하는 속성값이구요. 3. lighter : 원래보다 연하게 표시하는 속성값입니다.4. bolder : 원래보다 진하게 표시하는 값입니다.5.100~900 사이의 숫자 : 숫자를 입력해서 표시할 수도 있는데요. 400이 보통이고 700이 진하게 입니다. ■ 이 속성값들을 하나씩 적용해서 출력되는 굵기를 비교해보겠습니다...
css border
HTML & Javascript
2015. 2. 27. 13:11
css border■ HTML 웹 문서에서 강조하고 싶거나 보기 좋게 구분하기 위해서 그림이나 단락 등의 요소에 테두리를 그려줄 수 있는데요. css의 border 속성을 이용하면 됩니다. 이번 글에서는 테두리 속성인 css border에 대해서알아보겠습니다. 테두리 속성에는 일단 선의 종류가 있을 거고 선의 두께, 마지막으로 선의 색깔 정도를 설정해주면 되겠죠? 먼저 border-style에 해당하는 선의 종류부터 정리해볼게요. none 테두리 없음 hidden 테두리가 나타나지 않음 dotted 점선 dashed 큰 점선 solid 실선 double 이중선 groove 홈이 파인듯한 창틀 모양 ridge 튀어 나온듯한 창틀 모양 ■ 일반적으로 실선을 많이 사용하지만, 다른 선들은 속성값에 직접 넣어서..
css background-color
HTML & Javascript
2015. 2. 26. 16:08
css background-color ■ 웹 문서를 만들 때 문서 전체의 배경색 또는 각 요소에 배경색을 지정할 수 있는데요. 배경색을 지정하는 css 속성은 background-color입니다. 색상값에는 16진수의 값, rgb 값, 색상 이름 등을 넣을 수 있습니다. 이것들 중에서 우리가 선택하기 나름인데요. 배경색의 투명도를 조절하고 싶으면 rgb 값, 섬세한 색상 조절을 하실 거면 16진수, 단색으로 표현하실 거면 black 등과 같은 색의 이름을 입력하시면 되는데요. 간단하게 예제를 하나 만들어보겠습니다. ▲ 본문에 div 태그를 이용해서 적당한 크기의 박스를 만들어봤는데요. 브라우저에서 출력해보겠습니다. ▲ 아직 아무 색도 없는 박스가 만들어졌는데요. 먼저 문서 전체(body)의 배경색을 검은..
html css background-repeat
HTML & Javascript
2015. 2. 25. 17:09
background-repeat ■ 웹문서의 배경을 꾸미는 방법 중에서 background-image 속성을 이용해서 배경을 이미지로 채울 수 있는데요. 이 속성을 이용해서 이미지를 넣으면 배경 요소보다 이미지가 작으면 가로와 세로로 배경 요소의 크기만큼 반복되는 게 기본 설정인데요. 이렇게 반복되는 걸 막아주는 게 background-repeat 속성입니다. ■ 아래 글들은 css background 속성과 관련해서 참고하시면 괜찮은 글들이에요. 둘러보실 분들은 보시구요. http://godvow.tistory.com/108 위치http://godvow.tistory.com/105 크기 ▲ 이 사진을 배경으로 넣어서 예제를 만들어보고 직접 속성값을 입력하면서 적용해볼게요. 이미지 파일은 HTML 파일과..