최근 글

CSS / Reference / quotes

중첩 인용에 사용할 여닫는 부호를 지정하고 문자로 입력한 따옴표와 구분합니다. 인용 깊이, 마지막 쌍의 재사용과 none의 동작을 비교합니다.

CSS / Reference / word-wrap

긴 단어의 긴급 줄바꿈과 최소 내용 너비를 비교합니다. anywhere·break-word의 min-content 차이와 Flex·Grid에서 필요한 최소 크기 조정을 확인합니다.

CSS / Reference / word-break

한국어·영문 예문에서 normal·keep-all·break-all의 줄바꿈을 비교합니다. 사용 중단된 break-word와 overflow-wrap의 차이도 구분합니다.

CSS / Reference / text-align

문단 안의 인라인 내용을 정렬하고 블록 자체의 배치와 구분합니다. start·end의 쓰기 방향과 양끝·마지막 줄 정렬을 비교합니다.

CSS / Reference / line-height

단위 없는 줄 높이와 고정 길이의 상속 결과를 비교합니다. 부모·자식 글자 크기를 바꾸어 계산값과 실제 줄 상자의 차이를 확인합니다.

CSS 강좌 / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.

CSS / Tutorial / 마름모 만드는 방법

CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.

CSS / Tutorial / 원 또는 타원 만드는 방법

CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.

CSS / Tutorial / 삼각형 만드는 방법

CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.

CSS / Tutorial / 구분선 만드는 방법

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.