전체 글
가변길이 테이블과 고정 길이의 header로 height 100% 맞추기
1. body와 저 header, title, content 태그를 감싸는 container의 height는 100 2. header는 height:50px; title은 height:59px; 일 때, content의 height: calc(100% - 109px); content 내부의 패딩으로 인해 109px가 늘어날 순 있다. 다른 방법도 있겠지만 고정 길이가 껴있을 때 해결 방법을 찾아보다가 이렇게 해결함 flex? 이용하는 것도 공부해보기
Mionic 미오닉 폴더블 무선 선풍기 ST-10
미오닉 폴더블 무선 선풍기 ST-10 오늘의 주인공 미오닉 폴더블선풍기입니다. 사용 후기입니다. 1. 대용량 배터리(7200mAh) 진짜 최고!!!!! 2. 휴대성 굿 3. 회전은 안되지만 어느 방향이든 높이든 다 가능하다 4. 예쁜 색깔, 깔끔한 디자인 길이가 긴 케이블도 포함되어 있어 좋아요! 바꿀 수 있는 형태들 1. 스트랩으로 휴대하기 편한 기본 형태 2. 탁상에 놓고 쓰기 좋은 모드 3. 놀러가서 쓰기 아주 좋을 것 같은 모드 바람은 3단계, 배터리 표시 LED가 장착되어 있어요 올 여름 다용도, 대용량으로 맘 편하게 쓸 수 있는 선풍기인 미오닉 폴더블 선풍기를 추천합니다~! + 벽에다 걸고 쓰실 때 완전히 안접고 조금 펼쳐서 해야 돼요 구매 링크 : https://smartstore.naver..
[HTML5] Semantic Tag, 의미론적 태그
Semantic HTML 학습목표 시맨틱 태그란 무엇인가 각 태그의 용도를 알아본다. 공부 내용 Semantic HTML 문서의 의미에 맞게, 각 요소의 의미에 맞게 HTML을 작성하는 것 웹을 의미있게 만든다. 이해하기 쉽다. Semantic 태그 의미론적 태그 설명 aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들 details 기본적으로 화면에 표시되지 않는 정보들을 정의 figure 삽화나 다이어그램과 같은 부가적인 요소를 정의 header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 main 문서에서 가장 중심이 되는 컨텐츠를 정의 mark 참조나 하이라이트 표시를 필요로 하는 문자열 정의 nav..
간단한 웹서버
결과물을 웹 서버에 올려 확인할 필요가 있습니다. 톰캣 등의 웹 서버는 좀 번거롭기도 해서 좀 서 심플하게 사용할 수 있는 node용 웹서버가 있습니다. https://github.com/indexzero/http-server 사용 방법은 아래와 같습니다. # 설치 $ sudo npm install -g http-server # 서버 시작 $ http-server -a 0.0.0.0 -p 8000 브라우저를 통해 localhost:8000/index.html 으로 접속 시 http-server를 실행한 디렉토리의 index.html 파일로 접근이 가능합니다. 혹시 node.js 가 설치 안되어 있을 경우 아래 명령어로 설치 가능합니다. $ apt-get install nodejs-legacy npm 출처..
[유튜브 필기] 풀스택 주니어 웹 개발자가 되려면
주제 공부한 곳 https://www.youtube.com/watch?v=ODa9mY2bEEc 공부 내용 1. HTML5 + CSS3 웹사이트를 만들 수 있어야 한다. 암기가 아닌 이해하는 것이 목표로 클론코딩 해보기 인터랙티브한 것들 -> 레이아웃 모바일 대응, 아이콘, 플렉스 2. 바닐라JS 자바스크립트의 핵심 공부를 할 수록 리액트, 뷰 등을 공부할 때 도움이 된다. 모달창, 슬라이더, 메뉴, 드래그앤 드롭 (웹의 인터랙티브한 부분을 바닐라JS로 구현) 3. node.JS (백엔드) CRUD 만들어보기 올리고 읽고 수정하고 삭제하고 ex) 인스타그램 MVC, urls, auth, cookies, 템플릿 express, mongoose, pug, passport
[유튜브 필기] 네이티브 앱 vs 크로스 플랫폼 앱 vs 하이브리드 앱
주제 공부한 곳 https://www.youtube.com/watch?v=ksz_mSninEY 공부 내용 1. 하이브리드 앱 웹 뷰를 감싸고 있는 웹사이트 네이티브 앱에 대한 지식이 필요없다 Only HTML CSS JS UI를 짜는데 힘들다 핸드폰의 기능을 활용 못함(위치, 카메라, 모션 등등) 크로스플랫폼 앱 네이티브 언어가 아닌 언어로 코딩하고 다른 언어로 변환 Flutter - Dart -> C, C++ React Native - JS 코드를 한번만 작성하면 된다. 다양한 배경의 개발자 네이티브가 아니다. 퍼포먼스 문제 추가설명 웹뷰: 브라우저의 윈도우 네비게이션 바가 없음