본문 바로가기

개발34

word-break 으로 문장 줄바꿈 하기 1. word-break? 문장 줄바꿈에 사용되는 속성으로 단어 또는 글자 단위로 줄바꿈 할 수 있다. 2. word-break 속성 [word-break: normal] 기본값으로 한글, 한자, 일본어는 글자 단위로 줄바꿈 되고 영어는 단어 단위로 줄 바꿈 된다. [word-break: break-all] 글자 단위로 강제 줄바꿈 된다. [word-break: keep-all] 단어 단위로 강제 줄바꿈 된다. 3. 적용 예시 word-break: break-all은 글자 단위로 줄바꿈이 되기 때문에 텍스트 박스 영역을 최대한 채울 수 있어 많은 내용을 넣어야 할 경우에 사용하면 좋을 것 같고 word-break: keep-all은 단어 단위로 줄바꿈이 되기 때문에 텍스트를 읽기 편하다. 그래서 가독성을.. 2022. 9. 7.
border 알아보기 1. border? border은 테두리에 효과를 주는 것으로 선 두께, 스타일, 색상을 지정할 수 있다. CSS에는 { border: border-width(선 두께) border-style(선 스타일) border-color(선 색상) } 순으로 넣어 사용하면 된다. 2. border 속성 [border-width(선 두께)] medium / thick / thin / length / px 값을 넣어 선 두께를 나타낸다. [border-style(선 스타일)] solid(실선) / dotted(점선) / dashed(짧은 선) / double(이중 실선) / groove / ridge / inset / outset / none / hidden 값을 넣어 선 스타일을 나타낸다. 3. 적용 예제 2022. 9. 6.
display: none 과 visibility:hidden 공통점, 차이점 display: none과 visibility:hidden 비교 display: none과 visibility:hidden은 요소를 보이지 않게 만드는 공통점이 있다. 하지만 이 두 속성에는 큰 차이점이 있는데 display: none의 경우는 공간 차지 없이 눈에 보이지 않게 되는 것이고, visibility:hidden은 눈에 보이지는 않지만 공간은 차지한다는 점이다. [display: none] 위의 이미지는 display: none의 적용 전, 후를 나타낸 것으로 2번 박스에 display: none를 적용했을 경우 2번 박스의 이미지도 사라지고 공간도 사라져 밑에 있던 3번 박스가 2번 박스 자리를 차지하게 된다. [visibility:hidden] 위의 이미지는 visibility:hidden.. 2022. 9. 6.
블록 요소와 인라인 요소 차이점 1. 블록 요소와 인라인 요소 [블록 요소] 블록 요소는 혼자 한 줄을 차지하는 요소로 너비가 100%이다. 즉, 블록 요소의 옆에 다른 요소가 올 수 없는 것을 의미한다. 블록 요소 안에는 텍스트와 인라인 요소가 포함될 수 있으며 다른 블록 요소 또한 포함될 수 있다. 패딩이나 마진 등을 이용해서 크기를 정하려면 블록 요소여야만 가능하다. [인라인 요소] 인라인 요소는 줄을 차지하지 않는 요소로 화면에 차지하는 만큼 영역을 차지하고 나머지 공간에 다른 요소가 올 수 있다. 즉, 한 줄에 여러개 인라인 요소가 표시될 수 있다. 인라인 요소 안에는 텍스트와 인라인 요소가 포함될 수 있지만 블록 요소는 포함될 수 없다. 종류 태그 블록 요소 , , ~ , , , , , , , , , 등 인라인 요소 , , .. 2022. 9. 1.

티스토리툴바