김버그 - css는 재미있다 강의 정리

Box Box 모델의 4개의 영역 1) Content > 말 그대로 content가 들어있는 상자 가로 : width, 세로 : hieght 2) Padding > content와 border 사이의 공간 3) Border > 말 그대로 테두리를 나타냄 b

Float Float를 사용하면 무슨 일이 일어날까? Float를 하게 되면 집나간 자식 요소가 붕 뜨고 부모 box 위로 붕 뜨게 된다. 따로 부모의 height를 선언하지 않을 경우, 자식 요소의 height 합 = 부모의 height 이다 하지만 자식 요

Float로 망가진 것을 고치는 방법 1. 개꿀 방법 - overflow: hidden; 원래 자식이 float를 하게 되면 부모는 집나간 자식을 찾지 못해 이렇게 height가 0으로 쪼그라들게 되었다. 하지만 overflow: hidden;을 주게 되면 부모가

float-01 연습 초기 코드 li 성형시켜주기 list-style-type li를 쓰면 항상 이렇게 못생긴 점들이 생긴다. 로 설정을 해주면 이렇게 네모가 된다. 얘를 아예 없애주고 싶다면 으로 설정해주면 된다! li는 항상 옆에 padding이 생

<구현할 점>세 줄간의 간격 조정이미지 동그랗게이미지 / 텍스트 가로 구현여백 넣어주기Tip! margin-top과 margin-bottom 둘 중 하나만 통일성있게 사용하도록 하자!읭?? 적용이 안된다아.. strong 태그가 display: inline이여서

Position-02 연습 초기 코드 index.html styles.css body에 background-color: black;을 주면 화살표가 숨겨져 있다. css 코드 추가하기 card 사이즈 수정 이미지 자체 사이즈 때문에

index.htmlstyles.css줄 간격 조절길이 제한input이랑 버튼 꾸미기가운데 정렬여백 넣기x 버튼 배치모달이 화면의 정 가운데에 위치하도록 배치아직 배우지는 않았지만, text-align을 사용!길이 제한을 해 주었기 때문에 block의 오른쪽에 자동으로

앞으로는 flexbox만 사용할 것이라고 함....원리 이해도 필요 없고,잘 사용하는 방법에 대해서만 학습하면 된다고 한다.flexbox를 쓸거면 쓴다고 말을 해 줘야 할것임flex도 일종의 box의 타입이다.block이랑 비슷하지만 block은 할 수 없는 magic

정렬을 할 때, Main axis를 기준으로 정렬 -> justify-content,Cross axis를 기준으로 정렬 -> align-items, align-content를 사용하면 된다.index.htmlstyles.css빨강이, 노랑이, 파랑이 셋을 감싸고 있는

이미지 동그랗게, 사이즈 조절이름 / 출신지 가운데 정렬정보들 가로 배치display: block; 으로 설정하는 것을 까먹지 말자!빼암....이전과 마찬가지로 profile에 대해 별도의 width 값이 정해지지 않았기 때문이다.(display: block; 이라서

Media Query 반응형 웹을 만들기 위해 반드시 필요한 것 HTML5 에서 > viewport meta CSS3 에서 > Media Query viewport > position: fixed;에 대해 배울 때 언급했었다. browser의 화면 크기를

작은 것에서 부터 (모바일) 큰 것 으로 키워나가는 것이 좋다!position: fixed의 경우, viewport를 기준으로 위치를 잡게 된다.landing-link의 경우, anchor 태그이므로, display: inline이므로, width, height 값이