반응형 HTML5, CSS23 [css] word-break 사용 단어별 줄바꾸기 html에서 가로 길이보다 더 많은 텍스트를 입력 하게 될때 글자 하나 하나 줄바꿈이 되지만 word-break를 사용하면 단어별로 줄바꿈이 된다. 구조 .box{word-break:keep-all;} box라는 클래스를 가진 문장에 적용 한 것입니다. 예시 적용 안했을때 .box{width:100px;border:1px solid #000;} 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 적용 했을때 .box{width:100px;border:1px solid #000;word-break:keep-all;} 적용했을때는 단어별로 줄바꿈이 됨을 볼 수 있다. 2023. 1. 16. [css] align 속성 중앙 정렬 왼쪽 오른쪽 정렬 css의 align속성과 margin:auto를 이용하는 방법 소개해드립니다. align 구조 .text1{align:left;} //왼쪽정렬 .text2{align:center;}//중앙정렬 .text3{align:right;}//오른쪽정렬 기본적으로 정렬을 할때 텍스트 정렬을 할때는 align을 사용 하신다고 생각하시면 됩니다. HTML 부분 1번 텍스트 2번 텍스트 3번 텍스트 text_box 클래스를 가진 div 안에 텍스트 3문단을 넣어놓은 상태입니다. CSS 부분 .text_box{width:300px;height:150px;border:1px solid #000;} .text1{font-size:18px;text-align:left;} .text2{font-size:18px;text-alig.. 2022. 12. 9. [css] float 사용방법 html은 위에서 아래로 출력되지만 옆으로 붙여서 정렬할때 float를 사용합니다. 구조 div{float:left;} div{float:right;} div{float:none;} left : 왼쪽으로 붙음, right : 오른쪽 으로 붙음 none : float을 none함 (float된 것을 없앰) html 부분 1번 박스 2번 박스 3번 박스 css부분 .box1{float:left;width:200px; height:200px;text-align:center; line-height:200px;background:red; color:#fff;border:1px solid #000;} .box2{float:left;width:200px; height:200px;text-align:center; li.. 2022. 12. 6. [HTML] 테두리 둥글게 만들기 border-radius 테두리 둥글게 하는 방법입니다. css 구조 border-radius:30px (전체 방향) border-radius:30px 30px 30px 30px (사각형 으로 왼쪽부터 크기 설정 가능) px단위가 커지면 커질수록 더 둥글게 나온다. 예시 css .box1{width:200px; height:200px;text-align:center; line-height:200px;background:red; color:#fff;border-radius:10px;} .box2{width:200px; height:200px;text-align:center; line-height:200px;background:blue;color:#fff;border-radius:30px;} .box3{width:200px; hei.. 2022. 10. 28. 이전 1 2 3 4 ··· 6 다음 반응형
