HTML/CSS

대부분의 요소는 Heading 요소가 필수header : 콘텐츠의 개요를 나타낼 때 사용h1~h6 : 제목을 명시할 때 사용하는 요소, 숫자가 클수록 중요도가 작음nav : 페이지 네비게이션 콘텐츠를 담는 요소, a태그와 함께 사용ul : 순서가 필요 없는 목록을 담는

왼쪽에 Awesome Programming Company 오른쪽에 2020 - Now 라고 적혀있다.float으로 좌우 정렬hidden으로 묶어주기~~ 플로트를 묶어주면 다른 요소랑 겹치지 않는다. ~~

새 탭 열기 ctrl + N파일 열기 ctrl + O저장 ctrl + s다른 이름으로 저장 ctrl + shift + S화면확대 ctrl + +화면축소 ctrl + -행 잘라내기 ctrl + X행 복사 ctrl + C행 붙여넣기 ctrl + V행 삭제 ctrl + sh

CSS 기초 html은 뼈대! css는 꾸미기!CSS selector(CSS 선택자)\* : 문서 내의 모든 엘리먼트를 선택. ClassIdclass, id이름은 간단명료하게 부여!class보다 id가 우선순위!헷갈리는 선택자

가상 클래스 선택자(Pseudo class selector).foo:first-child : class="foo"인 엘리먼트 중 첫번째 자식인 엘리먼트를 선택.foo:last-child : class="foo"인 엘리먼트 중 마지막 자식인 엘리먼트를 선택.foo:nth

부정 가상 선택

선택자 우선 순위id > class > tag 순으로 적용!!!!!

가상 요소 선택자

Flex 새로운 display 속성이다. Block 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 한다. flex는 자신의 직계자식까지만 영향을 미친다. float보다 flex를 사용하는 추세다.(스타트업에서) > 예시그림 flex는 한번에 정렬할 때 편한 것 같다! 게임하면서 익숙해져야겠다..! > 참고자료 [1분코딩](htt...

회고 아직 너무 생소하다. 이번주 주말은 꼭 손코딩해야지.. 복습하기도 벅찬 오늘..ㅠㅠ

Keyframe 속성 애니메이션이 만들어지는 부분이다! from, to나 0% ~ 100%로 애니메이션 스타일을 설정하면 된다. 0%과 100% 사이에는 여러 개의 중간 프레임을 설정할 수 있다. > 애니메이션으로 상자 돌아오게 만들기 > 스타벅스 빌딩 세우기

미디어쿼리특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용하도록 만들어주는 기능이다.노트북, 아이패드, 아이폰, 갤럭시 등 화면 크기에 따라 스타일이 바뀔 수 있도록 적용할 수 있다.

셀렉트 연습!회고피그마를 보면서 만들어가는 방법을 이제 조금 알 것 같다!white-space: nowrap;text-overflow: ellipsis;overflow: hidden;위 코드를 사용하면 글자가 늘어나도 말줄임이 되어 모양을 잡아준다.background: