TIL

수업 중 필요한 것만 정리해보았다.

들어봤다-> 배웠다->해봤다->다르게 해봤다cmd+n -> 새 파일 생성cmd+s -> 파일 저장htmlkoshift + 방향키 cmd + optiontab + shifttabalt + w (문장 드래그한 상태로 누르기)계속 추가예정

(지금까지 웹표준, 시멘틱 무시하고 코딩한 나 반성해...)독립적으로 구분하거나 재사용할 수 있는 구획어던 페이지에 붙여도 독립적으로 사용 가능하다면 article 고려해보기ex) 다크모드, 스크롤업 등등사이트 내 연관 컨텐츠. 그룹화에 초점다른 서비스에 가져다놓으면

지옥에서 온 git 이라는 문장을 어딘가에서 봤을때도,그 정도로 어려운가...? 싶은 생각이 들었다. 오늘 맛만 봤음에도 약간의 스트레스 +1수업 목표인 아래 것들만 겨우 따라갔다.1\. 터미널 오픈한다 (단축키 ctl+opt+cmd+o로 설정)폴더 생성 mkdir 폴

오늘은 마크업 실습에 대해 다시 배우는 시간을 가졌다필요한 마크업만 사용하기객체 지향적으로 html 구조 짜기모듈화 -> 나중에 재사용/확장 가능하게코드 한줄한줄에 의도가 있어야함오늘 keynote에서 삼성 홈페이지 마크업 분석해보는 시간을 가졌는데,일단 내 가장 큰

block level element 부모의 컨텐츠 너비만큼, 가용 가능 범위만큼 차지할 수 있음 text level element -자기가 가진 컨텐츠 크기만큼만 영역 유지 -자식으로 sections와 grouping contetnt 가질 수 없다 br 줄바꿈을 위

audio 태그음악 컨텐츠를 재생하기 위한 태그video태그동영상 파일을 재생하기 위한 태그코덱 -> 녹화하면 얻는 원본영상을 편집하여 압축한 결과물포맷 -> 코덱을 담아 재생 가능한 플레이어에 전달되는 컨테이너의 역할결국 비디오 파일은 코덱+포맷의 조합정보를 입력하는

벤더프리픽스(vendpor-prefix)벤더(브라우저 제조사)와 프리픽스(접두어)의 합성어아직 비표준이거나 실험적인 css 속성을 특정 브라우저에서 실행할 수 있도록 css 속성 앞에 브라우저 제조사만의 접두어를 붙이는 문법{}Div p{}Div + p{}Div > p

left, right, center, justifyjustify 마지막 라인 제외하고 텍스트를 양쪽 끝으로 정렬 -> 다른 라인에 비해 공백의 범위가 너무 커지기 때문에, 적용되지 않는것으로 추측블록레벨안의 인라인 요소들(텍스트,이미지 등) 정렬함위와 같은 방법으로 가

\*: 전체^ : 시작,반대$ : 끝속성이름의 attribute값 중에 변수를 하나의 완전한 단어로 포함하는 태그를 선택합니다.속성의 attribute 값이 변수를 포함하는 태그 선택위 두가지는 무슨 차이점이 있을까?~= 는 완전한 단어로 포함되어야한다\*는 그냥 값을

flex-item에 적용하는 속성들 flex-basis 주축에 따라 basis가 넓이가 되기도 하고, 높이가 되기도 한다. flex-basis 와 width 2개의 값이 있었을때 basis의 값을 우선한다. width의 값은 넓이를 강제한다. basis는 컨텐츠

위니브 로그인 폼 코드리뷰 (html/css) 안쓰는 class는 빼버려라 쓸모없는 요소들은 css에서 가상요소로 주어도 괜찮다 웹표준에 맞게 작성되었나? w3c validation 확장 프로그램 설치해서, 버튼/p 태그 정렬 맞추기 클래스 네이밍 : 형태 +

자료형 1) 문자형 (string) 2) 숫자형( 정수형(int) , 실수형(float)) 3) booelean typeof 데이터 => 데이터가 어떤 자료형인지 확인가능 Math.random() 자바스크립트에서 임의의 랜덤 숫자를 만드는 방법 0이상 1미만의

css 실무 input checkbox 커스텀 기존 input 요소를 화면에서 숨기고, label 요소를 연결하여 스타일링을 진행해보자. 체크박스 활성화/비활성화 이미지 2장으로 이용하기! input창, label 창 연결하려면 id와 for 값 주기 input h

JS생태계 참고문서ES6 -> ES2015 업데이트버전. 해당 버전부터 문법이 대거 추가되며 가독성, 유지보수성 크게 향상되었다.ECMA Script -> 자바스크립트의 뼈대를 구성하는 언어자바스크립트 런타임 -> 자바스크립트 실행할 수 있는 환경HTML 을 프로그래밍

JS의 아이러니.. 대혼란이 올 수 있다.다른 언어에서는 \[] {}는 false 로 나온다고 한다견고한 코딩을 위해 등호 3개 사용하기true : 1false : 0and(&&) : 곱or(||) : 합not(!) : 부정\[]이나 {}는 true값이다.단락평가use

.fill 채우는 함수 배열 내 원하는 요소를 같은 값으로 채울 수 있다. 원본을 변경하는 메소드 복사본이 아닌 this 객체로 변경해 반환한다 10개의 빈 배열 만들고 10으로 채우기 array.from('') 배열, 문자열 등 반복이 가능한 객체 혹은 유사배열을

코테 볼때, 옆에 자바스크립트 책 놔두기 바로바로 보고 풀기 반응형 왜 클래스 선택자를 많이 쓸까? => 컨벤션으로 만들기 편해서.요소 선택자 쓰게 되면 정확하게 선택하기 힘듦 flex-direction column 이면 높이 기준으로 flex-basis 적용됨

자바스크립트의 시작. 역시 걱정했던대로 멘붕이 살짝 왔다 🥹좋았던 것JS100제 풀어본 것JS100제 혼자 했으면 질질 끌면서 느릿느릿 풀었을텐데, 영준님이랑 같이 푸니까 반강제로 풀게 됐다ㅋㅋㅋ!! 어쨌든 40번까지 풀었다.(답보고 이해하는 위주로 풀었지만..)TI

반복문 구조분해할당 객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조입니다. 키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용하죠. 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우

생성자함수 객체 {} 리터럴 이용하면 객체 쉽게 만들 수 있다. 하지만 개발을 하다보면 유사한 객체를 여러개 만들어야할때가 생기곤 한다. 복수의 사용자, 메뉴 내 다양한 아이템 등을 객체로 표현하고자 할때 'new' 연산자와 생성자 함수 사용하면 유사한 객체를 쉽게

정규표현식과 각종 Date 함수

DOM 탐색을 document 부터 시작할 필요는 없다. 더 깊숙이 코드 지정하여 시작해주면 더 좋다 DOM 제어 명령어 이벤트 삽입 innerText innerHtml textContent textContent 날것 뱉음 innerText 가공해서 뱉음 세

러버덕스 발표회에 가서 태수님이 해주셨던... 굉장히 인상깊었던 말 의미있는 일을 하면 원래 힘들다. 우리가 하는 이 모든것들이 큰 의미를 가지고 있기에 그만큼 힘든거다