자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.
글이 길어질 때 마지막 단어의 줄바꿈 속성을 정의할 수 있는데, 본문에서는 word-break: keep-all
을 사용했고 이는 단어 기준으로 줄바꿈 하는 속성이다. 다만 word-break: normal
에서 CJK(한중일) 문자는 글자 기준으로, 이외의 문자는 단어 기준으로 줄바꿈 되므로 CJK 문자가 아닌 경우엔 word-break: normal
과 word-break: keep-all
은 같다.
반대로 CJK 문자의 경우엔 word-break: break-all
이 글자 기준으로 줄바꿈 하는 속성이므로 word-break: normal
과 같다. 이외에 initial
(기본값), inherit
(부모요소 상속)이 있지만 잘 쓰진 않을 것 같다.
본문에서는 width: calc(100% - 48px)
으로 사용되었다. 이 방법을 쓸 때는 반드시 +
나 -
좌우에 공백이 있어야 하며, 괄호 안이 0보다 작을 수는 없다. 만약 width: calc(5px - 10px);
와 같이 0보다 작을 경우엔 0으로 계산된다.
아직 부족한 점이 많은데 벌써 웹페이지 만들기라니 긴장된다. 집중해서 더 많이 공부해야 될 것 같다.
오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.