개발 새싹의 Today I Learned

웹 프론트엔드 10주 스터디 1일차 공부 내용 정리

HTML의 큰 구조는 아래와 같이 html태그안에 head와 body로 이루어져있다.

노마드코더 사이트의 챌린지 과제가 유출 될 수 있기 때문에 코드나 완성작 대신 만들어가면서 배운 부분을 써보려고 한다. input을 큰 form안에 한꺼번에 넣어주니까 required 안내창이 실행되었다. 양식 별로 form을 따로 만들어서 각각 넣어줬을때는 실행

html을 css로 꾸며주는 방법은 두가지가 있다. 아래와 같이 html파일 안 head에 style 태그를 만들어서 디자인한다. html파일과 css파일을 따로쓴다.

* border* box의 경계 border는 inline과 block 모두에 적용됨. 3.7강 다시 듣기(*를 이용하면 모든 요소에 같은 설정을 할 수 있다??) padding box의 경계로부터 안쪽에 있는 공간 class 여러 요소들에서 원하는 만큼 사용 할

다른 거 다 하고 박스 중앙으로 옮기는 것만 남기고display:flex; 에 justify-content：center, align-items:center까지 했다. 메인 축은 중앙으로 움직였는데 교차축은 변함이 없었다.body에 height(단위는 vh:viewpoi

position:fixed block 이나 margin 등에 영향 받지 않고 모든 것의 가장 위에 있게 할 수 있다. position:static 기본 값으로, 레이아웃이 박스를 처음 위치 하는 곳에 둔다. position:relative top, bottom, l

active해당 요소를 마우스로 클릭했을 댸 효과 적용.focus키보드로 요소가 선택되었을 때 효과 적용.hover마우스가 해당 요소 위를 지나갈 때 효과 적용.visited방문한 사이트일 경우 효과 적용.focus-withinfocused인 자식을 가진 부모에게 적용

const 상수(constant)를 의미하며, 값을 업데이트 할 수 없다.let값을 업데이트 할 수 있다.따라서 기본적으로 const로 만들고 때에 따라서 값을 업데이트 할 수 있게 하고싶을 때 let을 쓴다.데이터 타입은 숫자와 글자(string)가 있다. 숫자는 따

function 계속 반복해서 사용 할 수 있는 코드조각.어떤 일을 수행하고 그 결과를 알려주는 역할.sayHello를 실행 할 때 마다 블록(중괄호)안의 내용이 실행된다. 위 예시의 경우 sayHello();하면 콘솔에 Hello라는 글자가 생긴다.arguementf

javascript는 html에 접근하고 읽을 수 있고 변경 할 수도 있다. element를 css방식으로 검색 할 수 있다. →id의 경우 ' # ', classname의 경우 ' . ' 필요하다. 제일 첫번째의 element 하나만 반환한다. 모든 element

className은 html안에 았는 class들은 상관 않고 모든 class들을 교체해버린다.classList element의 class내용물을 조작하는 것을 허용함으로서 class들의 목록으로 작업 할 수 있게끔 한다.containsclassList가 'clicke