성2

새로운 display 속성 block 요소의 성질을 가지며, 부모의 속성을 통해 자식을 컨트롤한다 부모 : flex-container 자식: flex-item flex는 자신의 직계한테만 영향을 미친다 display: flex; 전체 display: inline-flex; 콘텐츠만 flex-direction 정렬 방향 결정 .container { display: flex; flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; } justify-content 축을 기준으로 배열의 위치를 조정하거나 아이템 간의 간격을 설정할 수 있다 .container { display: ..

id=100, class=10, tag=1 : class가 10개여도 id보다 우선순위가 낮다 물론, 자신을 직접 선택하는 선택자가 가장 우선된다 /* 우선순위: 110 */ #one .two { color: red; } /* 우선순위: 10 */ .two { color: blue; } /* 우선순위: 1 */ h2 { color: green; } !important > id > class > tag !important : 어떤 경우에나 이것이 우선 적용 되도록 하고 싶을 때 사용 h1 { color: blue !important; } ✅ !important는 최대한 자제하자 : 가중치를 무시하기 때문이다

요소의 콘텐츠가 너무 커다랄 경우 요소를 어떻게 처리할 지 지정 overflow: hidden visible; overflow는 두개의 속성값을 가지지만, 하나로 축약해서 쓸 수 있다 visible overflow 속성의 기본 값으로 콘텐츠를 자르지 않는다 hidden 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다 scroll 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라내는 대신, 잘려진 부분을 확인 할 수 있도록 스크롤 바 제공

body에는 기본적으로 margin이 들어간다 초기 세팅할때 margin: 0;을 주고 들어가면 css 적용이 수월하다 시계 방향으로 값을 준다 body { margin: 0; } h1 { border: solid 1px black; /* 시계방향 */ /* padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; */ padding: 10px 20px 30px 40px; /* top은 10px, right, left는 20px, bottom은 30px */ padding: 10px 20px 30px; /* top, bottom은 10px, right, left는 20px */ padding: 10px 20px; }..

- absolute의 기준이 되는 것은 relative(relative가 없다면 body가 기준) - relative는 자신 위치 기준 .box1 { position: static; background-color: green; color: white; width: 100px; height: 100px; } .box2 { position: relative; left: 40px; top: 30px; background-color: red; color: white; width: 100px; height: 100px; } .box3 { position: absolute; left: 100px; top: 100px; background-color: red; color: white; width: 100px; hei..

다양한 요소를 '띄워서' 정렬하는 속성을 가진다 보통 블록 속성을 가진 객체를 정렬하는 방법으로 사용된다 left와 right밖에 없다 img { width:200px; float:left; } float의 문제점 앞으로 붕뜨는 현상이 일어난다 부모 요소가 float된 자식 요소의 넓이를 캐치하지 못해 발생 👉 float된 요소가 nomarl flow에서 벗어났기 때문(*inline 요소들은 float된 요소들을 알아본다) float 속성을 주면 넓이값, 높이값 등이 사라지기 때문에 넓이, 높이 등을 주어야 한다 .wrap { border: 4px solid blue; } .content{ margin: 5px; height: 20px; border: 2px solid green; } .wrap { bo..

인라인 > 내부 > 외부 1. 인라인 Hello world 2. 내부 hello world 3. 외부 hello world

블록 요소 - 전체 넓이 만큼 차지한다 - vertical-align/ text-align 적용 불가 hello - 요소 목록 https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements 블록 레벨 요소 - HTML: Hypertext Markup Language | MDN HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 developer.mozilla.org 인라인 요소 - 컨텐츠의 넓이 만큼 차지 - height/ width 적용 불가 - 요소 목록 https://d..

테이블을 생성할 때 사용 table>(tr>th*3)+(tr>td*3)*3 = 👈 tr: 테이블의 행을 나눌 때 사용 👈 th: table header이기 때문에 td와 나눠준다 👈 td: 열이 아닌 하나의 데이터다 📌 border-collapse: collaps; 는 충돌되는 border의 값을 잡아주는 역할을 한다 적용 전 table, tr, td, th { border: 1px solid black; } 적용 후 table, tr, td, th { border: 1px solid black; border-collapse: collapse; } colspan: 가로 셀 병합/ rowspan: 세로 셀 병합 👈 thead: tr>th를 묶을 때 사용한다 구분 책이름 책 가격 책 판매량 👈 tbody: ..

고정 크기 단위 px, pt, in, cm, mm (기본 px: 16px) 가변 크기 단위 em, %, rem, vw, vh em 부모가 가진 font-size의 n배 (부모의 크기값 * 자식의 em 값) = 자식이 가지게 될 크기 값 rem 중첩 무시 hello world hello world hello world hello world % 상대적인 크기 지정 부모의 크기 & (자식의 %값/100) = 자식이 가지게 될 px 값 %의 처음 크기는 30px 입니다. %의 크기는 30 * 0.5 = 15px 입니다. p의 크기는 30 * 1.1 = 33px 입니다.