Front-End14 [JavaScript] node.js node.js 자바스크립트엔진으로 빌드된 자바스크립트 런타임 환경이다. 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 하는 자바스크립트 실행기 서버사이드 스크립트 언어가 아니라 프로그램(환경)이다. 웹 서버와 같이 확장성 있는 네트워크 프로그램 제작을 위해 만들어짐 javascript를 웹브라우저에서 독립된 터미널에서 브라우저 없이 실행가능 백엔드 영역의 서버app 뿐 아니라 프런트엔드의 다양한 도구,라이브러리도 node에서 동작 프런트엔드 모던 자바스크립트 개발에 필수적인 환경이다. 이전엔 웹 표시부분은 javascript, 서버는 ruby, java등 사용했어야 했는데 node를 이용해 한가지 언어로 전체 웹 페이지 구성 가능하다. 특징 non-blocking I/O 단일 스레드 이벤트 루프 위의.. 2022. 10. 26. [CSS] html/css 프로젝트 실습 중 놓쳐 막혔던 부분 + 몰랐던 부분 1. position : absolute 막힌 부분 : absolute 후에 top : 10px; 을 했으나 어디갔는지 안보이는 현상 상위 엘리먼트 중 relative를 가진 가장 가까운 엘리먼트의 내부를 기분으로 배치가 이루어진다. 나의 경우엔 부모 중 relative를 가진 엘리먼트가 없어, 부모를 벗어나 가장 바깥 부모(브라우저 화면 제일 위)로 이동하여 안보였던 것이다. absolute를 이용해 부모를 기준으로 배치하고 싶다면 부모 속성으로 relative 사용 한줄요약 : absolute 사용 시 부모에 relative 사용하자 2. box-sizing : border-box 막힌부분 : margin, padding 등으로 원하는 크기와는 달라지는 현상 이 같은 경우는 margin, paddin.. 2022. 10. 22. [CSS] CSS 클래스 작명 / BEM BEM Block-Element-Modifier / BEM을 이용해 작명한다. 이점 목적, 기능을 명확히 전달 클래스 이름만으로 구조 파악의 용이성 단점 잘못하면 클래스네임이 엄청 길어질 수 있다. Block 문단 전체에 적용된 element나 element를 담고있는 컨테이너 Element block을 구성하는 단위 block은 독립적, element는 의존적 block 내에서만 의미를 가진다. Midifier block이나 element의 속성을 담당 다르게 동작하거나 다른 외형을 가져야 할 때 추가하여 사용 주의사항 클래스에만 사용, id는 유일한 것이기 때문에 이 방법을 따르지 않는다. 블록과 요소는 목적을 기반으로 작명 구조의 깊이 표현 x , .card__ul__li ( x ) 이런식으로 깊이.. 2022. 10. 19. [HTML] 시맨틱 코드 작성 시맨틱한 코드 작성 1. table > tr > th [scope = " "] table태그의 th태그에 scope속성 사용으로 (scope = "row", scope = "col") row, col에 정보 정렬 기준 등으로 시맨틱한 정보를 전달 할 수 있다 2. a태그 target = "_blank" 일 때 안내하기 구글로 이동(새창에서) a 태그의 target속성으로 _blank를 사용하여 새로운 창을 생성하여 사용하면 텍스트 리더를 쓰는 분들은 새 창으로 전환된 것에 당황할 수 있기 때문에 (새창으로) 와 같이 안내문을 사용하는 것이 좋다. 3. img alt 사용 img 태그 사용 시 alt로 내용 설명 alt를 사용하지 않으면 스크린 리더는 src를 읽게됨 4. 이 또한 2번과 같이 텍스트 리더.. 2022. 10. 19. [CSS] float 속성 레이아웃 문제 / 부모 요소 크기 미반영 자식요소에서 float 사용 시 부모 요소가 자식 요소의 크기 미반영 파랑 초록 float를 사용하게 되면 문서의 흐름에서 제외되어 붕 떠있는 상태가 되기 때문에 부모가 자식요소 크기 인식 불가 해결법 1. 뒤에 요소를 추가하여 clear:both 처리 한다. 파랑 초록 필요없는 div를 만들어야 해서 불편할 수 있음 2. ::after + clear:both .gray::after { content: ''; display: block; clear: both; } 자동으로 추가되어 제거해주니 깔끔 3. overflow:hidden .gray { overflow: hidden; } 자식요소 크기는 인식하는데 hidden이라 다양한 제약사항이 생겨서 2번을 추천함 해결 완료 2022. 10. 18. [HTML] 알면 좋은것들 이미지 비율 이미지의 width나 height 중 하나만 수정하면 이미지 비율을 유지하며 크기를 조정한다. 만약 둘 다 수정해 버리면 비율을 무시하게 된다. a 태그 이동 a태그는 원하는 웹페이지로 이동할 수 있고 id로도 이동할 수 있다. 두개 합쳐서 원하는 웹페이지의 id로도 이동이 가능하다. label과 input 연결 label태그의 for속성에 input태그의 id를 입력하면 label과 input이 연결되어 label만 클릭해도 input이 되도록 해준다. 라벨 textarea 공백 로 사용하게 되면 여는태그와 닫는 태그 사이에 줄바꿈(공백) 이 들어가게 되어 원하는대로 동작하지 않을 수 있다. colgroup colgroup을 이용하여 table의 column을 그룹지어 관리할 수 있다. 이.. 2022. 10. 18. 이전 1 2 3 다음
