목록프로그래밍기초/HTML CSS (11)
임동까스
/* 폰트적용 시작 */ @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 400; src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff'); } @font-face { font-family: 'LotteMartDream'; fon..
CSS white-space:nowrap; // 줄바꿈 불가 :root{ --side-bar__background-color:#efefef; //변수선언 } var(--side-bar__background-color) //변수 사용 opacity:0; // 투명도 HTML 테이블 만들기 table > tr *(행수) > td>(열수) tr = 행 td = 표 내용 th = 열 제목
codepen.io/dong1414/pen/BaLovbQ
position 속성 정리 종류 absolute fixed, relative static 너비 최대한 줄어든다. 그대로 유지 그대로 유지 본질 유령화,유령의집화 유령의집화 사람화 겹침허용 겹침가능 겹침 불가능 겹침 불가능 이동 top, left, right, bottom으로 이동 - - 인접선택자 a+div{display:none;} a에서 첫번째 div를 선택함 a:hover+div{display:block /* transform : 변형(주변 엘리먼트에 영향을 주지않는) / / translateX(-50%) : 자신의 너비의 반만큼 왼쪽으로 이동 / / translateY(-50%) : 자신의 높이의 반만큼 위쪽으로 이동 / / transform: translateX(-50%) translateY(-..
CSS inherit 부모의 값을 물려받는다. 기본값이 ingerit인 속성 color, font-size,font-weight,letter-spacing margin padding text-align 아닌것 border height width border-radisu background-color:transparent cursor:pointer; 커서를 포인트로 바꿈 body,ul,li{ list-style:none; padding:0; margin:0; } a{ color:inherit; text-decoration:none; } 거의 무조건 깔고가기 HTML ul - li의 부모 li: 목록 표현 ,ol은 순서있는 목록 h1 은 제목 h2는 그다음 등등
block 요소의 너비 : 너비를 지정하지 않는 한, 최대한 늘어난다. block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다. block 요소의 줄사용 : 한 줄을 무!조!건 혼자 쓴다.(세로모드) inline-block 요소의 너비 : 너비를 지정하지 않는 한, 최소한으로 줄어든다. inline-block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다. inline-block 요소의 줄사용 : 가능하면 최대한 한줄을 여럿이서 쓴다. div, section, nav, article의 기본 display 속성값은 block 이다. Css inline에서는 width,height,padding,margin 이 작동하지 않음 div:nth-child(n){} 몇번째인가 3n..
https://codepen.io/dong1414/pen/oNzgVVm
https://codepen.io/dong1414/pen/MWjYLZw MWjYLZw ... codepen.io position 예제
참고: https://codepen.io/dong1414/pen/xxExYxE xxExYxE ... codepen.io