오늘보다 더 나은 내일

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 너비 유지 최대한 줄어든다 본질 사람 사람,유령의 집 유령,유령의 집 유령,유령의 집 스크롤바 따라다님 겹침 불가능(주변 영향을 줌) 가능(주변 영향을 주지 ..

1. (CSS)body 엘리먼트 노멀라이즈 - 컴퓨터가 유저의 편의를 위해 임의로 지정된 스타일이나 기본값을 코딩시작전 평범한스타일로 만들어주는것 - body { margin:0; } - a { color:inherit; text-decoration:none;} 2. (HTML,CSS) Class 속성 - 주로 사용되는 태그(div,nav,section,article)한정되어있기 때문에 특정엘리먼트에 특정 속성값을 줄때 별명(class)을 붙여준다 ex) HTML: CSS: .menu-box{~~~} - 하나의 태그에 무한대 부여가능 - 클래스 속성값은 유저 마음대로 부여가능 - 숫자로 시작하는 속성값은 부여할 수 없음 * HTML작성: 클래스 속성값 여러개 부여 시 , 사용금지! 띄어쓰기 * CSS작성..

1. (css) border-radius - 외곽을 둥글게 만들어주는 속성 2. (CSS) inherit - 부모엘리먼트에 지정된 속성이 자식엘리먼트에 상속되어 나타나는 속성 - 기본 속성값 inherit: color, font-size, letter-spasing, font-weight, text-align - 기본 속성값이 inherit 아닌것: display, margin, padding, backgroud-color(기본값 투명),width(기본값 오토), height(기본값 오토),border, border-radius 3. 상단메뉴 만들기 1. 메뉴박스(nav), 메뉴(section), 메뉴아이템(div), 메뉴아이템 텍스트(a)로 마크업, 이유 : 모든 작업의 시작은 HTML 구조를 세우는 ..