성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는 최대한 자제하자 : 가중치를 무시하기 때문이다

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

고정 크기 단위 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 입니다.

선택자 : 특정 태그를 선택, 해당 태그의 속성을 변경하는 목적으로 사용 div { tag 선택자: 특정 태그를 선택하여 적용; } * { * 선택자: 문서 전체 선택, 초기 세팅 값을 잡을 때 많이 사용; } input[type=text] { 속성 선택자: tag의 속성을 선택하여 적용; } id와 class: html에서 지정 > css에서 속성 설정 #wrap { id: # } .content { class: . } #wrap.content { tag, id, class 혼합 가능 } 후손 및 자손 선택자 👈 👈 div li { 후손 선택 } div > h1 { 자손 선택 } 동위 선택자(+, ~) : 동등한 위치를 판단하여 css 속성 설정 h1~div { h1과 동등한 위치의 태그 중 div란 ..

배경 이미지 background-image: url('이미지 경로'); background-size: 100%; background-repeat:no-repeat; 👈 default는 repeat background-attachment:fixed; 👈 div 값을 무시하고 브라우저 처음부터 이미지 시작 display 속성 display: block; 👈 일반적으로 설정하지 않아도 div를 갖게되는 기본값 display: inline; 👈 개행 불가. 임의로 크기 조절 불가능(최소값만 가진다). margin을 줘도 상하는 고정 display: inline-block; 👈 inline의 성질을 가지고 있지만, 임의로 크기 조절 가능 ✔ display: none; 👈 화면에서 사라진다. 속성 값도 날아간다 v..

자주쓰이는 css 색: color, background-color 사이즈: width, height 폰트: font-size, font-weight, font-style 정렬/간격: text-align, line-height(폰트 크기의 160%가 가장 보기 좋다) 테두리: border(두께, 방식, 색깔) >> border: 5px solid black; ⭐간격: margin, padding⭐ ⭐margin, padding 차이 html 상에서 지정한 class를 꾸며줄 때는 .을 붙여줘야 한다 p { font-size: 30px; } . 👈 big-font { font-size: 40px; } .small-font { font-size: 15px; } 전체 선택: * * { font-family: '..