css

[css] overflows

width, height, max-width, max-heigh 등을 사용하다보면 내용물이 들어갈 공간이 부족한 경우가 발생한다. 이럴 때 사용하는 것이 overflow이다. overflow에는 몇가지 옵션이 있다. 1. visible visible값을 사용하면 넘쳐나는 내용물이 그대로 보인다. 따로 설정해주지 않으면 이것이 기본값이 된다. /* css */ p { border: 1px solid blue; width: 300px; height: 200px; overflow: visible; } Lorem ipsum dolor sit amet, eu nam essent disputando, idque officiis has ut. Ei vide molestie oporteat nec, reque diss..

[css] width, height

width : 가로길이 설정 height : 세로길이 설정 /* css */ p { border: 1px solid blue; width: 400px; height: 300px; } Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh v..

[css] Padding, Margin

요소는 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. Padding은 내용과 테두리 사이의 여유공간이고, Margin은 요소 주위의 여백. 즉, 테두리 밖의 공간이다. Padding 패딩을 주는 방법에는 여러가지가 있다. 1. /* css */ p { border: 1px solid blue; padding-top: 20px; padding-bottom: 40px; padding-left: 120px; padding-right: 60px; } Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, ..

[css] 폰트 굵기설정(font-weight) / 텍스트 꾸미기(text-decoration)

font-weight /* css */ #p1 { font-weight: 400; } #p2 { font-weight: 700; } #p3 { font-weight: normal; } #p4 { font-weight: bold; } Hello World! Hello World! Hello World! Hello World! HTML 삽입 미리보기할 수 없는 소스 font-weight는 폰트의 굵기를 설정해주는 속성이다. 사용가능한 범위는 100~900까지로 100단위별로 사용할 수 있으며, 100이 가장 얇고, 900이 가장 굵다. font-weight: normal;은 font-weight: 400;과 같고, font-weight: bold;는 font-weight: 700;과 같다. 100단위로 사용..

[css] 텍스트 색 지정(RGB, HEX)

css에는 텍스트색을 지정하는 방법이 3가지 있다. 색이름 /* css */ h2 { color: blue; } Hello World! 색 이름을 그대로 color: 에 적어주는 방법이다. 모든 색 이름을 지원하지는 않는다는 단점이 있다. RGB값 /* css */ h3 { color: rgb(83, 237, 65); } Hello World! 모든 색을 빨강, 초록, 파랑의 조화로 나타내는 방법이다. 아래 사이트에서 원하는 색을 찾을 수 있다. https://htmlcolorcodes.com/color-picker/ HEX(16진법)값 /* css */ h3 { color: #53ED41; } Hello World! RGB값을 16진법으로 변환한 값이다. 이것을 색 이름으로 사용할 수 있다.

[css] CSS의 기본 속성

폰트크기 /* css */ h2 { font-size: 72px; } Heading 1 Heading 2 HTML 삽입 미리보기할 수 없는 소스 폰트크기를 정하는 단위는 여러가지가 있는데, 그 중에서 px가 가장 많이 사용된다. 텍스트 정렬 /* css */ h1 { text-align: left; } h2 { text-align: right; } h3 { text-align: center; } Heading 1 Heading 2 Heading 3 HTML 삽입 미리보기할 수 없는 소스 텍스트 정렬에는 text-align을 사용하며, left는 왼쪽, right는 오른쪽, center는 중앙 정렬을 할 수 있다. 텍스트 색 /* css */ h1 { color: lime; } h2 { color: hot..