좌충우돌 개발자의 길

채팅에 들어갈 말풍선을 만드는 도중 span태그를 쓰면 word-break가 작동을 안하고 div태그를 쓰면 너비를 설정해야 word-break가 작동했다. 왜 그럴까 알아본 결과! 바로 inline-block으로 설정하면 콘텐츠 너비만큼 div태그의 너비가 설정될 수 있었다! inline-block이 무슨 기능을 하는지 궁금하다면? https://ksumin-dev.tistory.com/84 [CSS] 레이아웃 1. display와 box model의 관계 display width height margin padding border block ㅇ ㅇ ㅇ ㅇ ㅇ inline X X 좌/우 ㅇ(설명) ㅇ(설명) inline-block ㅇ ㅇ ㅇ ㅇ ㅇ - inline : margin은 좌우만 되.. ksu..

- justify-content: center 가 적용이 되지 않을 때 자식요소에 flex를 설정해야지 자식 요소에서 justify-content:center가 적용이 됨 부모요소에서 먼저 flex를 설정하면 적용되지 않음 - align-items: center 가 적용되지 않을 때 해당 요소의 height를 설정하지 않으면 적용되지 않음 -> height를 설정해 줄 것

1. 미디어 쿼리 @media mediaqueries { /* style rules */ } /* @media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻 그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어감.*/ - 미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 구성 미디어 타입 : all, print, screen 미디어 특성 : width는 뷰포트의 너비, 즉 브라우저 창의 너비.(스크린의 크기 x) // orientation은 미디어가 세로모드인지 가로모드인지를 구분 2. syntax media_query_list : S* [media_que..

1. display와 box model의 관계 display width height margin padding border block ㅇ ㅇ ㅇ ㅇ ㅇ inline X X 좌/우 ㅇ(설명) ㅇ(설명) inline-block ㅇ ㅇ ㅇ ㅇ ㅇ - inline : margin은 좌우만 되고 상하는 안됨 - inline-block : 배치는 inline 방식(ex/ 한칸 띄기로 공백 인정, 개행 인정, 한 줄에 배치,,,)이고 박스 모델 속성은 block 처럼 다 가능함 - inline 과 block의 차이점 - inline : 자식에 적용한 box model 속성이 부모에게도 똑같이 적용 X - block : 자식에 적용한 box model 속성이 부모에게도 똑같이 적용 O 2. display:none과 v..

1. id와 class 선택자의 차이점 문서 내에 유일한 요소에 사용 구체성 가장 큰 차이점 : class와 달리 id는 문서 내에서 유일해야 함 클래스 선택자 : 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있었습니다. id 속성값 : 문서 내에 유일하게 사용이 되어야함. 결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐임. 2. 선택자의 조합 /* 요소와 class의 조합 : 이면서 class 속성에 bar가 있어야 적용*/ p.bar { ... } /* 다중 class class 속성에 foo와 bar가 모두 있어야 적용*/ .foo.bar { ... } /* id와 class의 조합 id가 foo이며 class가 bar인 요소에 적용*/ #foo.bar { ... } 3...