웹 공부중... 내 코딩 정리노트

align-items justify-content flex-direction flex-basis flex-grow flex-shrink flex-wrap flex align-self

Flexbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다. flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다. - flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content - flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order 그리..

.layer_bg { display: none; position: fixed; left: 0; top: 0; z-index: 900; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); } .layer { display: none; position: relative; z-index: 1000; left: 25vw; top: -70vh; width: 50vw; height: 50vh; border: 3px solid #000; background: #fff; } .layer p { padding: 30px; text-align: left; line-height: 1.6; font-size: 16px; } .layer h2 { padding: 20px; c..

HTML 소스보기 HTML CSS JavaScript 닫기 CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'NexonLv1Gothic'; } a { text-decoration: none; color: #fff; transition: all 0.2s; } li { list-style: none; } img { width: 100%; vertical-align: top; } body { width: 100%; height: 100vh; background-image: url(../img/img_slide01.jpg); background-size: cover; background-position: center center; over..

사용할 폰트 설정해두기 아래는 예시 /* 넥슨고딕 Lv1 */ @font-face { font-family: 'NexonLv1Gothic'; font-weight: 300; font-style: normal; src: url(''); src: url('') format('embedded-opentype'), url('') format('woff2'), url('') format('woff'), url('') format("truetype"); font-display: swap; } @font-face { font-family: 'NexonLv1Gothic'; font-weight: 400; font-style: normal; src: url(''); src: url('') format('embedded-..

'웹 브라우저'마다 default 값이 달라서 스타일이 다르게 적용되기 때문에 동일한 css 적용을 위해 default 값 초기화 @charset "UTF-8"; /* 여백 초기화 */ body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button, figure, figcaption { margin: 0; padding: 0; box-sizing: border-box; } /* 시멘틱 태그 초기화 */ article, aside, details, figcaption, figure, footer, header, ..

*클리어 픽스 *ir 효과 *컨테이너 설정 *간격 세팅 @charset "UTF-8"; /* 클리어 픽스 */ - flot로 영역 깨짐 방지 .clearfix { zoom: 1; } .clearfix::before, .clearfix::after { content: ''; display: block; } .clearfix::after { clear: both; } /* ir 효과 */ - 웹표준 준수를 위한 설정 /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */ .ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트..

화살표가 가르키는 태그만을 선택할 수 있는 CSS 선택자를 위에 입력해야합니다. Level 1 :first-child https://developer.mozilla.org/ko/docs/Web/CSS/:first-child :first-child - CSS: Cascading Style Sheets | MDN CSS :first-child 의사 클래스는 형제 요소 중 제일 첫 요소를 나타냅니다. developer.mozilla.org Level 2 :not() https://developer.mozilla.org/ko/docs/Web/CSS/:not :not() - CSS: Cascading Style Sheets | MDN 부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자..

코드 header-top header-nav banner content1 content2 content3 footer-nav footer-info

코드 header banner content footer