좌충우돌 개발자의 길

채팅에 들어갈 말풍선을 만드는 도중 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..

width: auto와 height: auto = 자동 크기 맞춤 -> width: auto와 height: auto는 내용물의 크기에 맞혀 자동 크기 조절의 의미를 가진다.

width: 90%; /*1000px의 90% 너비*/ max-width: 1000px; height: 80%; /*700px의 80% 너비*/ max-height: 700px; 최대 높이, 너비를 설정하고 그 안에서 크기를 설정할 수 있음

https://hansolcha.tistory.com/4 [Css] margin auto, 중앙정렬하기 margin: 0 auto; 위는 대표적인 중앙정렬 속성이다. 그런데 어떻게 동작되길래 중앙정렬이 되는 것일까? 1. '0' 여기서 0값은 위 아래 여백을 주지 않는다는 의미이다. 즉, margin: __;에서 __값은 좌우위 hansolcha.tistory.com - 중앙정렬하는 방법은 여러가지가 있지만 magin으로 정렬하는 법이 있다. margin: 0 auto 자세한 설명은 위의 주소를 참고

- 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. 타이포그래피의 구조 •em 폰트의 전체 높이 •ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이 •Baseline 소문자 x를 기준으로 하단의 라인 •Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y ) •Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l ) 2. generic-family family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줌. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는..

1. 절대 vs 상대 길이 절대 길이 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음 px ( 1px = 1/96th of 1 inch ) 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적임. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장 상대 길이 상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변함 % : 부모의 값에 대해서 백분율로 환산한 크기 em : font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합 rem : roo..

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...