yOu gOOd ?!

한 달 뒤의 내가 이 포스팅을 다시 봤을때 저 간단한걸 왜 몰라 할 수 있기를 바라며 ...  문제상황 : 습관성 width: 100% 로 인한 이슈가 발생하였다.자식 요소가 부모요소 밖으로 튀어나올때!! 어떻게 해결을 보면 좋을까!!뭐가 문제여서 그런걸까!! 을 알자보자 싶어 그냥 이것저것 해보고 기록하는 글이다.  0. 실험 기본 상태0. box-sizing은 기본값이다.1. body의 가로크기는 800px 이다. 2. 부모는 body의 가로크기를 100%으로 받고 패딩 50을 가지고 있다. 3. 자식은 부모의 가로크기를 100%으로 받는다. 여기서도 이슈 발생. 엄마가 오른쪽으로 치우쳤다. 이것은 body의 가로가 800에서 마진이 오토값으로 중앙정렬 되어 있는 상태에서 엄마의 패딩이 50으로 설정..

static은 기본값. relative 는 자기 자리에서 삐져나온다. 다른 요소들이 relative요소가 원래 있던 자리를 그대로 둔다. 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용. 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다. absolute은 다른 친구들이 원래 그 차리를 침범 한다. -> 띨롱 나와서 엄마 곁에서 떨어진다. 부모의 relative요소를 찾아서 그 요소에 절대적인 값으로 위치를 조절할 수 있다. sticky는 자기 자리에 잘 있다가 사용자 눈에 띌라고 아주 발악을 한다 fixed는 문서에서 띨롱 떨어져 나와 고정되어 있다. absolute과 fixed는 원래 있던 자..

stacking context css 포지셔닝 등으로 인하여 요소가 겹쳐 졌을 경우 요소의 쌓임 순서(stacking context)를 정의할 수 있다. 자주 쓰이는 쌓임 맥락의 영향을 받는 요소는 다음과 같다. 문서의 루트 요소 () position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소 position이 fixed 또는 sticky인 요소 flexbox 컨테이너의 자식 중 z-index가 auto가 아닌 요소 grid 컨테이너의 자식 중 z-index가 auto가 아닌 요소 opacity가 1보다 작은 요소 z-index 속성의 값 auto 새로운 쌓임 맥락을 생성하지 않고 현재 쌓임 맥락에서의 위치는 부모 요소와 동일하다. 상수 한 자신만의 쌓임 맥락을 생..

backgrund-size 속성은 backgound-img 속성으로 지정한 이미지의 크기를 조절 할 수 있는 속성이다. 사용자 지정 값으로 설정 할수도 있고 키워드 값을 사용하면 편하게 설정할 수 있다. div 의 크키를 800px의 정사각형으로 만들고, 배경사진을 불러온 상태에서 backgound-size 속성을 키워드로 설정해보자. 설정한 원본이미지는 다음과 같다. auto (기본값) " 문서상으론 고유한 비율이 유지되도록 해당 방향으로 배경 이미지의 크기를 조정합니다. " 라고 되어있다. 이미지 자체에는 리사이징이 되어있지 않지만 컨테이너 크기에 맞게 조정되었다. contain 이미지를 자르지 않고, 부모의 크기 안에서 최대한 커진다. backgound-repeat 속성의 디폴트가 반복 이기 때문에..

인라인 요소 필요한 부분만 공간 차지. 연속 배치시 기본적으로 가로로 나란히 배치됨. 예) , 등 블록 요소 가로로 모두 차지. 연속 배치시 기본적으로 아래에 배치됨. margin, padding, width, height 설정가능. 예) , 등 요약 인라인 요소는 자기부분 조금만 이런 느낌 블록 요소는 가로로 꽉차는 직사각형 느낌이라 보면 된다. 인라인 요소는 기본적으로 크기를 지정할 수 없는데, display: inline-block 을 지정해주면 크기를 설정할 수 있다. 블록 요소 안에 인라인 요소를 삽입하여 인라인 요소를 관리 할 수 있다. 참고 Inline-level content - MDN Web Docs Glossary: Definitions of Web-related terms | MDN ..