오늘보다 더 나은 내일

1. css diner https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io - css 선택자 학습 게임 - 예시에 따라 음식과 접시 도시락 상태의 코드를 입력하면 다음스테이지로 넘어 간다. 2. flexbox froggy flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com - css 속성중 레이아웃 관련한 flex속성 학습을 위한 게임 - 예시에 따라 개구리를 연꽃으로 보내면 다음 스테이지로 넘어간다. 3. flexbox defense www.flexb..

1. justify-content : 가로 선상 정렬 - flex-start : 요소들을 컨테이너 좌측 정렬 - flex-end : 요소들을 컨테이너 우측 정렬 - center : 요소들을 컨테이너 중앙 정렬 - space-between : 요소들 사이에 동일한 간격 - space-around: 요소들 주위에 동일한 간격 2. align-items : 세로 선상 정렬 - flex-start : 요소들을 컨테이너 상단 정렬 - flex-end : 요소들을 컨테이너 하단 정렬 - center : 요소들을 컨테이너 세로선상 중앙정렬 - base-line : 요소들을 컨테이너 시작위치 정렬 - stretch : 요소들을 컨테이너에 맞도록 늘린다. 3. flex-direction : 컨테이너 내의 요소들의 정렬방..

1. 라이브러리 : 커스텀이 아닌 많은 요소들이 공유하는 속성값들을 노멀라이즈 다음으로 코드업해주는 것 - .con : 페이지 내 컨텐츠들의 너비가 무한정으로 늘어나는것을 방지해주고 일정의 값을 지정해주는것 /*라이브러리*/ .con { margin:0 10px; width:auto; } /*커스텀*/ .con { max-width:1000px; } - .img-box > img : 이미지를 삽입할때 img(display기본값-inline)에 여백이 생기는 것을 방지하고 부모 요소 너비 만큼 값을 지정하여 여백을 없애주는것 .img-box > img { display:block; width:100%; } - .cell : 모든 셀요소의 정렬을 한줄정렬(float:left) 하고, 박스 사이즈 크기를 고정..

1. max-width - display:block 일때 최대값을 지정하여 너비를 유연하게 하면서도 기준값 이상 커지지 않게 하는 속성

1. float - 상단메뉴 만들때: 한줄에 나오게 하여야한다 1) display: inline-block 텍스트 요소 사이 공백이 생긴다 (정교한 디자인이 어렵다, 하나하나 수치 수정해야한다) 2) float: left 공백이 없다 (너비를 %로 지정하면 자동으로 나눠서 맞춰준다.) * 공백 없애는 방법 1) li엘리먼트 사이 엔터 공백을 하나하나 지운다 2) li엘리먼트 사이 엔터 공백을 주석(/*)을 달아 없애준다 3) CSS font-size-0를 따로 만들어준다 4) li에 float:left;를 준다. - block요소는 float요소를 무시한다 → 자식 요소에 float을 썼다면 부모요소는 자식 요소가 없는 줄 알고 높이가 최소화 된다 그래서 부모요소에 class="row"를 주고 반드시 아..

1. 중간정리: 웹 퍼블리싱 : HTML, CSS, JS HTML 1)태그 - div 계열(block 계열) ex) section, article, nav, ul, li - span 계열(inline 계열) ex) a, img, span 2)관계: 부모자식, 형제 CSS 1) display - inline, inline-block: 글자화(가로) - block: 블럭화(세로) - none: 사라진다 * 중앙정렬: block {margin: 0 auto;} inline-block {text-align:center;} 2) position - static: 사람 - relative: 사람, 유령집 - absolute, fixed(스크롤 따라다닌다):유령, 유령집 2. 좌측 사이드 토글바 만들기

1. position-fixed - 스크롤바를 따라 다닌다 - 유령: absolute,fixed/사람:relative,static 2. ::before/ ::after - 공통되는 데이터가 엘리먼트의 말머리나 말미에 넣어야 할때 CSS 속성을 부여하여 한번에 바꿔줌 - 선택 엘리먼트와는 부모자식 관계이다.(before는 가장 첫째 자식, after는 가장 막내자식) - ul > li::after { content:"님"; } 입력시 모든 div텍스트 뒤에 님이 표시됨 - 기본 display는 inline이다 연예인 1 연예인 2 연예인 3 연예인 4 연예인 5 연예인 6 연예인 7 연예인 8 연예인 9 연예인 10 /* ::after => 새로운 막내자식을 추가한다. */ ul > li::after { ..

1. table 기본 - 기본적으로 table>(thead>tr>th)+(tbody>tr>td)로구성 - : 표의 가로(줄) - : 표의 세로(칸) - : 기준 정보가 되는것은 th로 감싸준다 * 테이블에서 칸수는 반드시 맞춰준다 - HTML 표의 테두리 선 나타내기 - CSS {boder-collapse:collapse;}는 표의 줄들을 한줄로 합쳐준다 만들어준다 2. table정렬 및 병합 - 표 특성 상 좌측상단 첫칸(table>thead>tr:first-child)만 너비를 지정하여도 전체 크기가 바뀐다 - 또는 thead위에 (칼럼)마크업하면 맨 좌측 칸만 크기가 고정된다 - 표의display는 table(block), inline-table(inline-block)있다. - 가로 2칸 병합: ..

1. white-space: nowrap; - 자동 줄바꿈 금지 - 영역이 한정될 경우 텍스트가 영역외로 나가게 된다 2. overflow: hidden; - 영역외로 나간 텍스트를 숨기는 기능 3. overflow: scroll; - 스크롤을 생성하여 보여주게 한다 4. overflow: auto; - 텍스트 길이가 영역외로 나가면 스크롤 생성/ 영역 내이면 스크롤바 작동하지 않음 * 영역내에서만 보이게 잘리고 말미에 ...표시 { white-space: nowrap; overflow: hidden; text-overflow:ellipsis } 5. 3차 메뉴 쉽게 구현하기 1. HTML 입력 nav.menu>ul>li*4>a[href="#"]{1차 메뉴 아이템 $} +ul>li*4>a[href="#"..

보호되어 있는 글입니다.

1. position- absolute 정렬/translate x, translate y - 수평 중앙정렬: block요소 처럼 {margin: 0 auto;} - 수직 중앙정렬: {margin: auto 0;} = 불가능 - 수직 수평 중앙정렬: 1. {top, left: 50%;} → 중앙 쯤이지만 좌측 상단 꼭지점 기준이므로 세부 위치 조정 필요 {transform: translate x: -50%, translate y: -50%; } → 자기 넓이의 반akszma왼쪽이동, 자기 높이의 반 만큼 위로 이동 2. {top:x % left: x % bottom: x % right: x % ;} → 그러나 넓이가 유동적이다 3. {top:x px left: x px bottom: x px right: ..

1. (CSS) display-none - 사라진다 - div:nth-child(2): 두번째자식이면서 div인 엘리먼트 - div:nth-of-type(2): div중에서 두번째 엘리먼트 - a ~ div: 동생선택자(부모, 형 선택자는 없음) - a + div: 인접동생 선택자 버튼 안녕 잘가 a + div { display:none; } a:hover + div { display:block; } 버튼에 커서를 올리면 디스플레이 none이던 내용들이 나타난다 2. (CSS) position static relative absolute fixed 너비 유지 최대한 줄어든다 본질 사람 사람,유령의 집 유령,유령의 집 유령,유령의 집 스크롤바 따라다님 겹침 불가능(주변 영향을 줌) 가능(주변 영향을 주지 ..