HTML, CSS

block 요소의 너비 : 너비를 지정하지 않는 한, 최대한 늘어난다.block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다.block 요소의 줄사용 : 한 줄을 무조건 혼자 쓴다.(세로모드)div, section, nav, article의 기본 di

나를 감싸는 엘리먼트 : 부모 엘리먼트내가 감싸는 엘리먼트 : 자식 엘리먼트같은 부모를 둔 엘리먼트 : 형제 엘리먼트a 엘리먼트는 링크 버튼이다.href 속성은 이동할 주소를 적는다.target 속성은 새 창으로 띄울지 여부를 정한다.br태그는 줄바꿈 엘리먼트이다.(한

br태그는 줄바꿈 엘리먼트이다.(한 줄 줄바꿈) 는 공백 한칸을 의미한다.두칸 이상 띄울 때는  를 사용한다.

마우스를 올렸을 때 변화를 주는 것.html 코드css 코드

img 태그는 열고 닫는 구조가 아닌 하나짜리이다.img는 자식을 가질 수 없다.src="이미지 URL"alt="이미지가 다운로드되지 않을때 보여줄 문구"

박스의 바깥쪽 여백박스의 안쪽 여백html 코드css 코드html 코드css 코드

관계부모/자식형/동생태그인라인 계열span(div에서 display만 inline인 태그, 인라인 계열의 기본 태그)a : 링크img : 이미지블록 계열기본div(구분, 적절한 태그가 생각나지 않을 때, 모르면 div, 블록 계열의 기본태그)nav(내비게이션, 보통 메

선택자:first-child = 첫번 째 태그가 선택자이면선택자:last-child = 마지막 태그가 선택자이면선택자:nth-child(n) = n번 째 태그가 선택자이면선택자:nth-last-child(n) = 뒤에서 n번 째 태그가 선택자이면

젠코딩: \`nav.menu-box>ul>li\*3>a\[href=

id 속성은 고유하다. -> 한 개의 엘리먼트에만 적용 가능하다.class 속성은 여러 태그에 적용 가능하다.html 코드css 코드CSS DINER

모든 보이는 엘리먼트의 부모는 body이고, 그의 부모는 html 이다.h 시리즈 태그에는 기본적인 margin이 들어있다. 그걸 제거하고 써야 한다.

position 속성 정리 |종류|absolute, fixed|relative|static| |:--:|:--:|:--:|:--:| |너비||최대한 줄어든다.|그대로 유지|그대로 유지| |본질|유령화, 유령의 집화|유령의 집화|사람화| |겹침 허용|겹치는 게 가능|겹치

메뉴 박스에는 클래스를 주는 것이 좋다.후손 선택자 사용하기노멀라이즈 먼저 적용하기nav -> 메뉴 박스ul -> 메뉴li -> 메뉴 아이템a -> 메뉴 아이템 텍스트1차 메뉴를 만든 후에 진행 하니까 메뉴 박스 별도로 필요하지 않음.ul -> 2차 메뉴li -> 2차

white-space: wrap;줄 바꿈 해라.white-space의 기본 값.white-space: nowrap;줄 바꿈 하지 않고 한 줄로 쭉 이어지게 나온다. 화면 영역을 넘어가면 스크롤이 생긴다.overflow: auto;넘친 영역에 따라서 가로가 생길 수도 있

transition 속도 -> 0.3~0.5s 가 대중적..side-bar + tab.status-icon + tabdiv\*2 + tabnav.menu-box>ul>li\*4>a\[href=5. .con\` + tablorem\*50 + tab//html 코드 링크\

//앞에 있는 태그의 뒤에 {} 안에 있는 것들을 추가로 붙인다.

flexboxfroggy(https://flexboxfroggy.com/- flexboxdefenseflexbox playground

CSS Unit

icon은 글자 취급을 받기 때문에 color, text-align, font-size 다 적용된다.구글에 '폰트 어썸' 검색 \- 무료 아이콘: icons > free and open-source icons \- html 복사해서 logo클래스를 가진 a태그에