1. 파일 생성 프로젝트 폴더 > index.html , css>main.css , js>main.js 파일 생성 2. HTML 기본 설정 설정 ; lang="ko"로 변경 3. CSS 기본 설정 /* COMMON */ 설정 ; Material Icon 연결하는 내용 추가 & body에 기본 설정 & img는 display:block 설정 더보기 /* COMMON */ .material-symbols-outlined {font-variation-settings:'FILL'0,'wght'400,'GRAD'0,'opsz'48} body { color:#333; font-size: 16px; /* 기본 font-size, font-wieght, line-height를 설정해 하위 요소들에 상속 */ font-..
표기법 dash-case ex) the-lazy-dog - HTML, CSS snake_case ex) the_lazy_dog - HTML, CSS camelCase ex) theLazyDog - JS PascalCase ex) TheLazyDog - JS 주석 // 한 줄 메모 /** * 여러 * 줄 */ 데이터 종류 String ; 따옴표를 이용하여 정의 " " , ' ', ` `(문자 중간에 다른 데이터 끼워 넣을 수 있음) ex) `Hello ${myName}?!` Number ; 정수 및 부동소수점 숫자를 나타냄 Boolean ; true, false 두 가지 값밖에 없는 논리 데이터 Undefined ; 값이 할당되지 않은 상태 Null ; 어떤 값이 의도적으로 비어있음을 의미 Object ;..
배치 position static ; 기준 없음, 기본값 relative ; 요소 자신의 원래 위치를 기준으로 배치. 배치 전 자리는 비게 됨 - 배치를 위한 용도보다는, 보통 position:absolute의 구조상의 부모요소에 위치 상의 부모요소가 될 수 있도록 부여 absolute ; 위치 상 부모 요소(상위 요소 中relative인 요소)를 기준으로 배치 - 상위 요소로 쭉 올라가서, position:relative인 요소를 기준으로 배치함. 없다면 루트 요소인 viewport를 기준으로 배치 - 보통, 부모 요소에 position:relative를 두고, 자식요소에 position:absolute를 둬 배치 - display:block으로 변경됨 fixed ; 뷰포트(브라우저)를 기준으로 배치 ..
컴퓨터공학과 16학번 졸업 - 네이버 웹툰 재직중 네이버웹툰 KR Android Tech ; 미디어 관련된거 다 함. 소셜 시리즈, ott인 시리즈 온, line 왕다 1학년 목표 - 재수강 만들지 않기 ; 학점 1학기 3.8, 2학기 3.3 - 과 사람들과 친해지기 ; 학과 생활, 동아리 - 다른 학교, 다른 학과 친구 만들기 ; 동아리, 고등학교 친구의 대학교 친구 2학년 ; 취준 "코딩테스트 준비" - ACM ICPC(알고리즘대회) 나가서 1차 광탈 - 백준으로 알고리즘 준비 - 카카오, sk, 현대모비스 다양한 기업들의 알고리즘 대회 나감 - 넷카라쿠베 다 지원해봄 -> 이 회사가려면 어떤 게 필요하지? 알게됨 -> 크게 도움이 됨 Applay 동아리 - 쏙쏙 캠프 봉사 ; 2박3일 고등학교 가서..
글꼴 font-size : 글자의 크기. 16px(기본값), 단위 font-style ; 글자의 기울기. normal(기울기 없음, 기본값), italic(이텔릭체) font-weight : 글자의 두께. normal(400,기본값), bold(700), 100~900(수치로 설정) font-family ; 글꼴(서체) 지정, 여러 개 지정된 것 중 가장 먼저 적용되는 글꼴 사용. san-serif(고딕체 계열, 대부분), monopsace(고정너비 글꼴 계열), cursive(필기체 계열), fantasy(장식 글꼴 계열) -> 하나씩 써보기 line-height ; 한줄의 높이. 숫자(요소의 글꼴 크기의 배수로 지정), 단위 문자 color ; 글자의 색상. 색상 text-decoration ; 문자..
width, height ; 요소의 가로/세로 너비 auto ; 기본값 / 단위(px,ev,vm) max-width, max-height ; 요소가 커질 수 있는 최대 가로/세로 너비 none ; 기본값 / 단위 min-width, max-height ; 요소가 작아질 수 있는 최소 가로/세로 너비 0 ; 기본값 / 단위 margin ; 요소의 외부 여백(공간)을 지정하는 단축 속성 0 ; 기본값 / auto ; 가로(세로)너비가 있는 요소의 가운데 정렬에 활용 / 단위 -음수도 가능 padding ; 요소의 내부 여백(공간)을 지정하는 단축 속성 0 ; 기본값 / 단위 / % ; 부모 요소의 가로 너비에 대한 비율로 지정 -음수도 가능 border-radius ; 요소의 모서리를 둥글게 깎음 borde..
전역 속성 ; HTML에서, 모든 요소에 적용할 수 있는 속성 title="설명" ; 요소의 정보나 설명을 지정 style="스타일" ; 요소에 적용할 스타일을 지정 class="이름" ; 요소를 지칭하는, 중복 가능한 이름 id="이름" ; 요소를 지칭하는, 고유한 이름. 자주 사용 x data-이름="데이터" ; 요소에 데이터를 지정, 보통 js에서 사용 ex) 사과> 바나나 js) const els=document.querySelectorAll('div') ; els.forEach(el=>{ console.log(el.dataset.fruitName) }
