오늘보다 더 나은 내일

보호되어 있는 글입니다.

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 DINER 1. a: 타입이 a인 요소 모두선택 2. #id: 특정 아이디(#id)를 가진 특정 요소 선택(하나의 아이디만 생성 가능) 3. a b: 자손선택자. a요소 내부의 자식 및 후손(자식의 자식)까지 범위의 모든 b요소선택 4. #id a: 아이디가 #id이면서 a선택자를 가진 요소 선택 5. .classname: 특정 클래스(.classname)를 가진 모든 요소 선택(무한대의 클래스 생성 가능) 6. A.className: a이면서 .classname을 가진 모든 엘리먼트 선택 7. a,b: a와 b요소 선택 8. *: 모든 요소 선택 9. a *: a내부의 모든 요소 선택 10. a + b: a의 인접동생 b 선택 11. a ~ b: a의 모든 동생 b 선택 12. a > b:..

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 구조를 세우는 ..

1. (CSS) block요소의 가운데 정렬 - div는 text-align:center 속성값을 지정하여도 display기본속성이 block이기 때문에 적용되지 않는다. * 가운데 정렬하는방법 - width 속성값 지정 시: margin-left,right값 auto - width, margin-left, right값 auto - margin left,right값 모두 적용하는 방법: width값 auto (참고) margin:0 13px → 위아래0 왼쪽오른쪽13 2. (css) class와 id 태그가 a인 엘리먼트 선택: a{~~~} class가 a인 엘리먼트 선택: .a{~~~} id가 a인 엘리먼트 선택: #a{~~~}

- ctrl+T: 브라우저 새탭 생성, ctrl+W: 탭 삭제 - CSS 작성: HTML 작성 순으로, 띄어쓰기 금지. 되도록 >사용해주기 - a, img, span은 display 기본 속성값이 inline이다. 1. (CSS) padding과 margin - padding: 박스의 안쪽 여백을 주는 속성(옆을 밀어내는게 아니라 자신의 몸집이 커지는 것) - margin: 박스의 바깥쪽 여백을 주는 속성 - display inline속성값에서는 margin,padding 불가 ex) display의 기본속성값이 inline인 a엘리먼트에 margin이나 padding 속성을 설정하려면 display 속성을 반드시 변경해주어야 한다 2. (CSS) img - 이미지를 삽입하는 속성. br태그와 같이 셀프..

- display 속성: block, inline-block, inline - inline-block과 inline은 글자화되는것은 비슷하나, inline 속성은 너비값을 지정 할 수 없다. - 자식엘리먼트는 부모엘리먼트의 속성을 따른다(text-align,font weight 등) (CSS) normalize - 코딩시작하기에 편의를 위해 특정 선택자에 기본 속성값을 주는것 ex) body, ul, li{ padding:0; margin:0; list-style:none; }

1. (HTML) - 텍스트간 공백을주는 속성 ex) |&nbsp ;&nbsp ;사과&nbsp ;&nbsp ;| ↓ | 사과 | 2. (CSS) text-decoration - 텍스트에 밑줄이나 하이퍼링크에 밑줄 제거 ex) BNX 하이퍼링크 연결시 밑줄이 나오게 되는데, CSS a{text-decoration:none;} 속성값 입력시 밑줄 제거 됨

1. 키보드 사용법 Home : 줄에서 맨 앞으로 이동 End : 줄에서 맨 뒤으로 이동 Ctrl + Home : 맨 위으로 이동 Ctrl + End : 맨 아래으로 이동 Ctrl + C : 선택영역 복사 Ctrl + X : 선택영역 잘가내기 Ctrl + V : 붙여넣기 Ctrl + A : 전체선택 Ctrl + Z : 이전 히스토리로 한 단계 이동 Ctrl + Y : 이후 히스토리로 한 단계 이동 Shift + 키보드 이동 : 글 선택 Cabs Lock/Insert : 절대 사용하지 않는다. Shift + 영문 소문자 입력 : 대문자 입력 2. (HTML)앵커태그, br태그 : 줄바꿈 태그 셀프클로즈드 태그 : 하이퍼링크 연결태그 : 하이퍼링크 연결 새창 태그 (기본속성 inline) 3. (HTML,C..

1. 웹페이지 3대 구성요소- HTML, CSS, JS의 역할 1. HTML(배우): 전체적인 레이아웃과 컨텐츠 구성(글내용) - 구성: 여는태그 +컨텐츠 글내용+닫는태그= 하나의 엘리먼트 ex) 안녕하세요 - 태그는 화면에 나오지 않는다. - 웹문서를 만들어내고, 웹문서들이 모여 웹페이지를 구성한다. 2. CSS(스타일리스트): 세부적 디자인(글꼴, 글색 등) - 구성: html선택자, 대괄호, 설정값 ex) content{color:red;} - 공통으로 적용할 선택자는 { }앞에 여러개 사용가능 - 개별 선택자가 생길 경우 새로운 태그를 생성하여 설정값을 추가 - 입력한 선택자와 설정값은 지우지 않고 아래에 계속 추가 3. JS(감독) 2. (CSS)Display 속성 주로 사용하는 태그 - ..