전체 글120 자료구조(1) 리스트 배열 추상자료형(ADT) : 구체적 능의 완성과정을 언급하지 않고, 순수하게 기능이 무엇인지를 나열한 것 (카드의삽입, 동전의 삽입, 지폐의 삽입 등등)을 가르켜 ADT라고한다.) 컴퓨터 공학적 측면에서 단순 구조체(데이터값만 있는)의 정의만으로 wallet이라는 자료형의 정의가 완성되는 것이 아니다. wallet을 기반으로 하는 연산의 종류를 결정하는 것도 자료형의 정의로 일부(지폐의 삽입같은 기능)로 보아야 하고, 이러한 연산의 종류가 결정되었을 때 자료형의 정의는 완성된다. 최소한 구조체 wallet의 의는 ADT에 포함시켜야하는가? ㄴㄴ 물론 필요하다면 포함시켜도 된다. 중요한 정보라면 무엇이든 추가할 수 있으며, 그 방법에는 제한이 없다. 하지만 불필요한 것을 포함시키는 것은 바람직하지 않다. wal.. 2022. 3. 16. CSS 기법들 알면 좋은 것들 일반적으로 footer태그 영역안의 링크들은 nav로 하지않는다. section태그에는 반드시 h1~h6태그들이 포함되어야한다. inline구조엔 패딩의 위쪽이 안먹음(inline-block ㄱㄱ) 공백 대신 이미지 스프라이트 기법 (CSS background-position 속성 이용) background-image를 확대하고 줄여도 가운데 고정시키기 header { background: url(../img/header_bg.jpg) repeat-x center top; } 말풍선(화살표) -추가 li왼쪽에 circle bullet li { position: relative; padding-left: 8px; box-sizing: border-box; } li:before: { cont.. 2022. 3. 16. 유용한 CSS @supports (브라우저의 css 지원여부를 체크) @supports (display: grid) { div { display: grid; } } @supports not (display: grid) { div { display: flex; } } scrollsnap (사용자가 터치, 휠 스크롤 조작을 마쳤을 때 오프셋 설정 가능) .parents { scroll-snap-type: y mandatory; } .children { scroll-snap-align: center; } is pseudo selector (쉽고 강력한 선택자를 제공) before header button, nav button, form button { background-color: tomato; } after :is(he.. 2022. 3. 16. CSS 미디어 쿼리 min-width, max-width 차이 min-width: 1000px, 1000px 이상인 경우에 적용 max-width: 1000px, 1000px 이하인 경우에 적용 작성 순서 (모바일 퍼스트) 기본 CSS 작성 (모바일, portrait) 모바일, landscape 태블릿 데스크톱 대형 뷰포트 데스크톱 모바일 퍼스트(min-width) /* Default CSS */ /* Mobile - Portrait */ /* Mobile - Landscape */ @media (min-width: 576px) {} /* Tablet */ @media (min-width: 768px) {} /* Desktop */ @media (min-width: 992px) {} /* Desktop (Large) */ .. 2022. 3. 16. CSS rem, em em은 상위 요소의 폰트 사이즈가 기준이 됩니다. .parent { font-size: 42px; } .children { font-size : 1em; // 42px } rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환됩니다. html { font-size : 12px; } div { margin: 1rem; // 12px } rem, em 차이 (em은 부모, 부모의 부모가 em을 가졌다면 자식은 곱x곱으로 계산됨) html { font-size : 10px } div.parent { margin: 2em; } rem div.childrenRem { margin : 2rem; // 10px * 2 = 20px } em div.childrenEm { font-size : 2em.. 2022. 3. 16. CSS Flex 부모에게 적용하는 것들 display flex-direction flex-wrap flex-flow (flex-direction + flex-wrap) justify-content align-items // baseline : items의 크기가 다를때 중간으로 맞춰줌, align-items: center와 다름(center는 전체 height에서 중간에 배치 한다는뜻) align-content: item의 줄이 여러 개 일때 사용 space-between center : 모든 라인을 중앙에 배치 자식에게 적용하는 것들 order * 기본 0 * flex-grow : item보다 부모 컨테이너 크기가 커졌을때, item들도 같이 커짐, 크기가 커질때 비율을 정할 수 있음 예) 1 0 0 (참고로 item.. 2022. 3. 16. 이전 1 ··· 17 18 19 20 다음
