Dev.note(web) 21.08.30

김태훈·2021년 8월 30일
0

대구AI스쿨

목록 보기
45/49

유튜브 카피캣 3일차


작성된 본문


자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.


체크포인트

  • 줄바꿈 속성

글이 길어질 때 마지막 단어의 줄바꿈 속성을 정의할 수 있는데, 본문에서는 word-break: keep-all을 사용했고 이는 단어 기준으로 줄바꿈 하는 속성이다. 다만 word-break: normal에서 CJK(한중일) 문자는 글자 기준으로, 이외의 문자는 단어 기준으로 줄바꿈 되므로 CJK 문자가 아닌 경우엔 word-break: normalword-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 링크 에 업로드 되었다.

profile
태훈입니다.

0개의 댓글