제야의 개발메모장

필수 셋팅1. 텍스트의 고정영역을 설정한다. (width 셋팅) 필수 셋팅2. 텍스트 태그의 경우 display 속성이 block 또는 inline-block 또는  -webkit-box 속성이 설정되어야 한다.  ① display : -webkit-box 로 설정 시 (해당 영역을 box 형태로 관리되도록 함)   -webkit-line-clamp: 3;  // 줄수 설정  -webkit-box-orient: vertical; // 박스 영역을 세로 방향으로 설정 overflow: hidden; // 영역을 넘어가는 요소들을 안보이게 ② white-space : nowrap 사용 시 overflow : hidden;  text-overflow : ellipsis; // 텍스트가 범위를 넘어갈 시 말줄임..

sass 설치하면서 직감했다. 미래의 나는 분명 이거 까먹는다..... 훗날 또 불나게 검색하기 귀찮아서 나를 위해 남기는 글이다... 1. node.js 설치하기 구글에 node.js 검색해서 들어가서 각자 운영체재 맞는 걸로 설치하셈 2. node.js 깔렸는지 확인하기 윈도우 검색창에 cmd (명령 프롬프트) 치고 들어가서'node -v' 쳐보기.v 어쩌구 저쩌구 나온거면 설치된거임. 3. sass 설치 명령하기 (Dart 버전 Sass ) Dart버전 명령어 : npm install sass -g node버전 명령어 : npm install -g node-sass node버전 설치로 여러번 시도 했는데 자꾸 설치가 안됬다 ㅜ Dart 버전이 있다길래 해봤는데 성공했따 각자 되는 걸로 하자 4. s..

article : 어느 한 페이지에 독립적으로 보여졌을 때 전혀 문제가 되지 않는 고유한 정보를 나타날 때 사용한다. : ex ) 신문기사들 중 독립적인 1개의 기사, 블로그 포스트 중 독립적인 1개의 포스트 section : 연관있는 주제들의 내용들을 묶음화 할 때 사용한다. : h1 등의 제목 태그를 포함하는 경우가 많다. [사용 예시] 건강한 다이어트에 성공한 연예인들 --- 연예인 1에 관한 내용 --- 연예인 2에 관한 내용 내용참고 : youtube [드림코딩 by엘리]

: 테이블을 정의한다 : table head의 약자로, 글자체가 강조되고 가운데 정렬되어 나온다 : 가로행이 늘어난다. (세로로 1칸씩 추가됨) : th, td 태그를 포함하여 사용한다 : 세로열이 늘어난다 (가로로 1칸씩 추가됨) See the Pen 그리드 컴포넌트 만들기 by dpals-103 (@dpals-103) on CodePen.

flex-item 요소가 flex-container 요소 내부에서 할당가능한 공간의 정도를 선언 (음수 사용x) * flex-basis : 공간 배분전 기본 너비

flex-start flex-end center space-around space-between stretch

flex-direction 기능과 flex-wrap 을 한번에 쓸수 있는 속성 ex) 가로선 상의 여러줄에 걸쳐 정렬하기 flex-flow : row wrap

가상요소 : 별도의 class를 지정하지 않아도 지정한 것처럼 요소 선택 가능 ::before : 실제 내용 바로 앞에서 생성되는 자식 요소 ::after : 실제 내용 바로 뒤에서 생성되는 자식 요소 * content 라는 속성사용은 필수!

자식 선택자(직계자식) : 부모 ">" 자식 형제 선택자 : 형제 "+" 형제 후손(손자) 선택자 : 증조 " " 후손 --------------> >(꺽쇠) 로 하면 안됨 1) .nav > div : .nav 엘리먼트의 직계자식 div선택 2) .nav > div > div2 : .nav 엘리먼트의 직계자식 div의 직계자식 div2 선택 3) .nav > div + div : .nav 엘리먼트의 직계자식 div의 인접형제 div 선택 4) .nav div : .nav 엘리먼트 안에 있는 모든 div후손 (자식, 손자) 선택 5) .nav > div ul : .nav 엘리먼트의 직계자식 div 안에 속해있는 모든 ul 후손 선택 6) .nav div ul : .nav 엘리먼트의 모든 div 엘리먼트에 ..

absolute : 유령화 ( 유령처럼 어느것에도 개의치 않는) : 어떤 것에도 개의치 않고 공간을 차지하며, 공간을 틀어지게 하는 등의 물리적인 영향을 행사할 수 없다. : 부모 엘리먼트와 자식 엘리먼트가 모두 absolute로 지정되면 자식 엘리먼트는 부모 엘리먼트 안에 갇히게 된다. relative : 유령의 집 (유령이 갇히는 곳) : absolute 된 엘리먼트들은 relative된 엘리먼트에 갇힌다 : 부모자식이 둘다 absolute 된거랑 차이점은 함께 움직이지 않고 absolute 엘리먼트와는 별개로 작동된다.