반응형

전체 글 60

나는 달리기, 조깅을 자주 하는데... 애플워치 9 ? 애플워치 se ? 뭐가 좋을까?

요금 애플 워치를 사고싶어서, 애플 사이트랑~ 쿠팡을 자주 보고 있습니다.제가 근데 운동을 자주 하거든요? 조깅, 달리기를 매주 3회 이상은 하는 것 같아요~~근데 애플워치가 운동 측정에 도움이 된다고 하길래... 한번 구매를 고려 해보려고 합니다. 근데 두 모델의 주요 차이점과 달리기 및 조깅을 위한 기능이 뭔지 궁금해서~ 조사한 이후 정리를 해봤습니다. 애플워치 9 주요 기능• 혈중 산소 측정: 혈중 산소 포화도를 측정하여 호흡기 건강을 모니터링할 수 있습니다.• 심전도 기능: 심전도를 기록하여 심장의 리듬을 모니터링할 수 있습니다.• 향상된 센서와 프로세서: 더 정확한 운동 추적과 빠른 성능을 제공합니다.• Always-On Retina 디스플레이: 운동 중에도 화면을 항상 켜둘 수 있어 편리합니다..

나의생각 2024.07.25

맥북 한글 타자시 . 찍힘 / 스페이스바 누르면 점이 찍힘

저는 맥북을 쓰고 있는데 어느 순간부터 점이 찍히는 문제가 발생 하더라구요~ 그러니깐 스페이스바를 누를때 마다 . ( 점 ) 이 찍힐 때가 있는데 뭐가 문제인제 궁금 했습니다.제 생각에는 시스템 문제라고 생각을 했거든요^^역시!! 시스템 문제 였습니다. 아래 기능을 끄면 점이 찍혀지지 않게 됩니다.시스템 설정 -> 키보드 -> 입력소스 -> 편집... -> 스페이스를 두 번 눌러 마침표 추가 OFF 위에 사진대로 스페이스바 두 번 눌러 마침표 추가를 끄면 더 이상 점이 찍히지 않게 됩니다.

나의생각 2024.07.25

자바스크립트 객체, Object 에 대해서 설명 하겠습니다.

자바스크립트에서 객체(Object)는 속성(프로퍼티)과 메서드(함수)를 포함할 수 있는 데이터 구조입니다.객체는 키-값 쌍으로 구성되며, 키는 문자열이고 값은 어떤 타입도 될 수 있습니다.객체를 쉽게 이해하려면, 실생활에서 쉽게 마주할 수 있는 것과 같이 생각할 수 있습니다.예를 들어, "자동차"라는 객체는 색상, 모델, 제조사 등의 속성을 가질 수 있고, 운전하거나 멈추는 기능을 메서드로 가질 수 있습니다.자바스크립트에서 객체를 정의하고 사용하는 방법은 다음과 같습니다:   객체 생성1. 객체 리터럴을 사용하여 객체를 생성할 수 있습니다.   let car = {  make: "Toyota",  model: "Corolla",  year: 2020,  start: function () {  consol..

자바스크립트, Javascript 의 기초에 대해서 정리 해보겠습니다.

자바스크립트의 기초 내용을 한번 간략하게 정리를 해보겠습니다.  1. 변수와 상수 (Variables and Constants):var, let, const 키워드로 변수를 선언하고 값을 할당하는 방법입니다.  let x = 10; const y = 20; var z = 30;   2. 데이터 타입 (Data Types):기본 데이터 타입: String, Number, Boolean, Null, Undefined, Symbol, BigInt복합 데이터 타입: Object, Array, Function let name = "John"; // String let age = 25; // Number let isStudent = true; // Boolean let address = null; // Null l..

vscode 프리티어 Prettier 세팅하기

vscode에 들어갑니다. 익스텐션에 들어가서 프리티어를 설치합니다. 설치가 되면, 저장을 누를 때 자동으로 정리가 되는것을 원하시는 거죠? 그럼 저와같이 아래의 세팅을 해주면 됩니다. 일단 settings.json 으로 들어가 줍니다. settings.json에 들어가는 방법은 제 다른글에 설명이 되어 있습니다. 자 이제, 아래의 코드를 붙여넣기 하시면 됩니다. // prettier settting "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.printWidth": 120, "editor.formatOnSave": true 저는 원래 printWidth가 80으로 설정이 되어 있던가? 그렇습니다. 그러나 html을 작성할 때 이상하게 ..

1. 파이어베이스 버전9 firestore 에서 데이터 가져오는 방법

이제 파이어베이스로 부터 데이터를 가져오는 방법을 배우겠습니다. 버전9로 진행을 하겠습니다. 이전에 시작하는 방법에 대해서 글을 썼습니다. 그 글에서 이어서 강의를 진행 하겠습니다. 파이어스토어에 들어가서 권한은 모두 접근할 수 있도록 풀어줍니다. 그리고 컬렉션은 blog로 하나 만들어주고 그 안에 임의로 데이터를 발행합니다. 임시로 서버를 띄워서 확인을 할 수 있습니다. 콘솔창에서 데이터를 확인하려면 아래의 코드를 작성하면 됩니다. // 예전 8버전 const db = firebase.firestore(); db.collection('blog').get().then((결과)=>{ console.log(결과) }) // 새로운 9버전 import { initializeApp } from "https://..

파이어베이스 버전9 호스팅 실행하는 방법 - serve 말고 다른거, 에뮬레이터, 자바오류

오늘은 파이어베이스 호스팅을 임시로 실행하는 방법에 대해서 알아보겠습니다. 일반적으로 파이어베이스를 시작하게 되면 html, css, javascript 로 시작하게 됩니다. 그리고 js를 이용해서 파이어베이스 로직을 프로그래밍 하게 됩니다. 간단하게 html과 css를 이용해서 화면을 꾸미게 되고 js를 이용해서 뭔가 기능을 만들고 파이어베이스를 실행하려면 파이어베이스 호스팅 기능에서 뭔가를 실행해야 합니다. 그러면 아래와 같이 콘솔에서 시작하게 됩니다. firebase serve --only hosting 그러나 이것은 예전 8버전의 기능입니다. 신버전의 9버전의 실행방법은 아래와 같습니다. firebase emulators:start 그리고 firebase.json 파일을 수정해줘야 합니다. 아래와..

파이어베이스 버전9 시작하기 - firebase v9

파이어베이스는 어떻게 시작할까요? 일반적으로 파이어베이스는 스마트폰 어플리케이션 개발자들이 빠른 시간안에 풀스택 개발자가 되기 위해서 이용하는 플랫폼입니다. Swift를 이용하여 아이폰 어플, java( 또는 코틀린 )을 이용하여 안드로이드 어플은 일반적으로 클라이언트라고 하고... 이 어플이 동작하기 위해서는 서버가 필요하게 되겠죠? DB도 필요하구요 자바를 이용하여 스프링으로 백엔드를 할것인지? node.js를 이용하여 express를 할것인지? 장고를 할것인지? 루비 온 레일즈로 할것인지? 복잡합니다. 만약 1인 개발자로 시작해야 한다면 쉽지 않은 선택이지요~ 그러나 더 문제는 클라이언트 개발자가 데브옵스 지식을 가지는 것은 더 어렵습니다. 갑자기 트래픽이 증가하면 골치가 아프죠... 그러나 파이어..

뉴스 , 신문 api 로 개발하기 / newsapi

저는 원래부터 뉴스의 전체적인 정보를 빠르게 볼 수 있는 플랫폼을 가지기를 원했습니다. 대부분의 신문사는 제 마음에 들지 않았기 때문입니다. 시대에 뒤쳐지는 마인드를 가지고 있는것 같습니다. 구식의 느낌이 느껴집니다. 너무 잡다하게 많은 광고를 달아서 어지럽기만 합니다. 그리고 ui / ux 도 엉망이라고 생각합니다. 쌍팔면도 마인드로 개발된 유저 인터페이스는 정말이지 마음에 들지 않습니다. 그래서 새로운 변화와 느낌에 대응을 할 수 있는 것을 만들고 싶습니다. 정말 짭은 시간을 들이고, 많은 정보를 획득할 수 있는 아주 쌈빡한 플랫폼을 만들어 보고 싶습니다. 그래서 이참에 React와 Next.js에 대해서 배우는 김에 플랫폼을 한번 개발을 해볼까? 생각하게 되었으며 한번 실행에 옮겨야 함을 느꼈습니다..

향수병에 걸리는 이유는 무엇인가? 대구, 연차, 마음의병

오랜만에 연차를 내서 대구로 내려갔습니다. 저의 근무지는 경기도 고양시 근처에 있습니다. 그리고 저의 고향은 대구입니다. 대구에 부모님이 계십니다. 9월 명절에 아무래도 대구에 내려가는것이 어려울 것 같아서... 조금 일찍 갔다왔습니다. 여전히 변하지 않은 나의 거리, 동네를 걷고 운동을 하니 기분이 좋았습니다. 집에서 느끼던 감정이 해소가 되는 느낌이었습니다. 원래 가지고 있던 어려운 감정이 사라지는 순간을 느끼게 되었습니다. 그 감정은 '향수병'입니다. 물론 정도가 심한 향수병은 아니고.... 가슴 한가운데에 있는 가고싶은 감정, 약간 그리운 감정입니다. 저도 곰곰히 생각을 해보면 "내가 왜 경기도에 살고있지??" 라며 생각을 할 때가 있습니다. 물론 자세한 설명과 저의 이야기를 여기에 다 담을 수는..

나의생각 2022.08.28

vscode 주석 색깔 변경하는 방법 - 핑크색, Visual Studio Code

오늘 글에서는 비주얼 스튜디오 코드의 주석 색깔을 이쁘게 변경하는 방법을 보여드리겠습니다. 제가 설정하는 방법으로 하시면 주석의 텍스트가 핑크색으로 변경이 됩니다. 일단 vscode에서 주석 처리를 하는 방법을 설명 드리겠습니다. 1. 원하는 텍스트를 드래그하여 선택한다. 2. 맥 ( Command + / ) , 윈도우 ( 컨트롤 + / ) 을 누르면 주석처리가 됩니다. 주석 처리를 하면 내가 원하는 중요사항을 메모할 수 있고, 내가 작성한 코드에 영향을 주지 않게 됩니다. 이제 vscode 주석 색을 변경해보겠습니다. 먼저 vscode를 켜주시고, settings.json에 들어갑니다. ( settings.json 에 들어가는 방법은 제가 이전 글에 설명을 했습니다. ) 위의 그림과 빨간색 박스의 내용..

vscode setting.json 에 들어가기, 비주얼 스튜디오 코드

저는 개인적으로 개발을 처음으로 배우게 되고, 비주얼 스튜디오 코드 ( vscode ) 세팅하는 것을 매우 어렵게 했습니다. 처음이라서 그런것 같습니다. 그중에 setting.json에 들어가는 것도 어렵더라구요... ㅎㅎㅎ ( 개발을 처음 배울때~ ) 공식적으로 들어가는 것에 대해서 설명을 해보겠습니다. 한번 공식문서는 어떻게 설명하고 있는지 보겠습니다. https://code.visualstudio.com/docs/getstarted/settings Visual Studio Code User and Workspace Settings How to modify Visual Studio Code User and Workspace Settings. code.visualstudio.com 이 페이지로 들어가셔..

파이어베이스 - 버전9 ( Firebase v9 ) : 시작하기

저는 원래 파이어베이스를 공부했었고, 버전8로 시작을 했습니다. 그러나 이제 버전9를 구글에서 업데이트를 했고, 파이어베이스 공식 문서를 보면 " Firebase는 한 번의 주요 릴리스 주기 후에 이 버전에 대한 지원을 제거하므로... 새 앱은 대신 버전 9를 채택해야 합니다. " 라고 적혀 있습니다.... 배포되어 있는 8버전은 돌아가겠지만 정식지원은 9버전 위주로 진행을 할 것 같습니다. 그래서 9버전에 대한 내용을 정리하려고 합니다. 우리가 흔히말하는 '웹서버'는 그냥 데이터 꺼내달라고 하면 데이터 꺼내주는 기계입니다. 버전 9 는 webpack 또는 Rollup 과 같은 최신 JavaScript 빌드 도구를 사용해서 파이어베이스 크기를 줄이고 효율성을 높이는 모듈식 접근 방식을 사용합니다. 앱에서..

html 시멘틱 태그 semantic tag 종류

시멘틱 태그에 대해서 정리를 하겠습니다. 간단하게 적습니다. : 머리말에 해당합니다. 주로 웹페이지의 상단에 있습니다. 로고나 메뉴 등을 넣는 공간입니다. : 링크 등의 메뉴 영역입니다. 링크와 메뉴를 그룹화를 할 때 사용합니다. 모든 링크와 메뉴를 일일이 nav 태그에 넣을 필요는 없습니다. : 동영상, 사진, 멀티미디어를 넣는 영역입니다. 메인 페이지의 이미지 슬라이드 부분 : 웹 문서의 본문, 중요한 콘텐츠를 그룹화할 때 사용 : 본문과 연관성이 적은 외부 영역, 광고의 팝업창 바로가기를 만들 때 사용 : 특정 영역의 그룹화, 연관성이 있는 콘텐츠를 그룹화 할 때 사용합니다. 신문에서 기사 제목 여러개를 section 태그 안에 담아서 사용합니다. : 개별 콘텐츠를 담는 영역입니다. 개별 글이나 기..

주식 투자의 방향, 현금을 보유 할까? 주식 고점 / 현금 보유

22년 1월 4일, 현재... 우리의 투자 방향을 어떻게 해야 할까요? 전문가들이 이달 코스피 등락폭을 2,820∼3,050으로 예상했습니다. 반등하면 현금 비중을 확대하라고 이야기 했습니다. 오늘만큼 올랐으니 내려간다는 말인가요?? 코스피가 올해 새로운 상승추세를 나타낼 것으로 예상한다고 했습니다. 그러나 아직 때가 이르다는 겁니다. 왜 그럴까요? 지금의 국내외 투자환경이 증시에 도움이 되지 않기 때문입니다. 상황이 좋지 않은 것입니다. 그리고 지금의 통화정책이 현재의 상황에 긍정적이지 않는 것입니다. 코로나가 쉽게 끝나지 않고 경기 회복의 발목을 잡고 있습니다. 지난 4분기 실적도 좋지 않습니다. 미국 증시는 상승세를 지속하고 있습니다. 그러나 하락의 조짐이 조금씩 보이고 있습니다. 미국 시장에 따라..

주식 2022.01.04

고통을 이기는 일론 머스크의 비전과 비밀, 그는 생각이 다르다.

오늘 생각을 해봤습니다. 일론 머스크는 행복할까? 재산이 많아지면... 국가에서 세금을 많이 내야 하겠죠! 테슬라와 일론 머스크의 행보에 대해서 저는 관심이 많이 있습니다. 수많은 어려움을 이기고 그는 계속 전진하고 있습니다. 고통을 이기면서 가는 것이죠 한번 돌이켜 본다면... 이전코로나의 영향으로 반도체 수급에 문제가 있었습니다. 테슬라는 그런것도 상관이 없나봅니다. 테슬라의 지난 4분기에 30만대 이상을 팔았다고 하니, 전문가의 예상치를 뛰어넘었습니다. 지난 코로나 사태 이후에 전 세계 기업들을 강타한 반도체 공급난이 있었습니다. 그러나 테슬라의 4분기 실적은 엄청난 양의 판매량을 달성했습니다. 21년도에는 거의 93만대 정도를 고객에게 납품을 했다고 합니다. 테슬라 최고경영자 일론 머스크의 재산이..

경제 2022.01.04

내가 선호하는 css 그림자 - box-shadow

css 에서 예쁜 그림자를 넣기를 원하시면 코드를 잘 작성을 해야합니다. box-shadow: 좌우위치, 상하위치, blur(흐려짐 정도 범위), spread(그림자 크기), 색상 ; 이 코드를 잘 사용을 하면 됩니다. 이렇게 저렇게.... 막 수정하다가. 제가 딱 좋아하는 그림자를 찾아내게 되었습니다. 그림을 확인 해보시기 바랍니다. 예쁘지 않습니까????? 너무 과하지도 않고, 부담스럽지도 않고 ㅋㅋㅋㅋ 딱~~ 좋네요 ㅎㅎㅎ 코드는 이렇게 작성을 하였습니다. 일단 전체적인 코드는 다 적기는 너무 많고.. 부트스트랩을 이용했다고 보시면 됩니다. 그리고 핵심적인 코드 입니다. 참고하시기를 바랍니다. .practiceShadow { box-shadow: 0px 0px 20px 1px rgb(200, 200..

부트스트랩 Bootsrap / css margin, padding, font-size, 마진 패딩 폰트사이즈

부트스트랩에서 margin(마진), padding(패딩), font-size(폰트사이즈) 를 설정하려면 어떻게 해야 할까요? 사이트의 튜틸리티에 spacing, text 를 보시면 됩니다. https://getbootstrap.com/docs/5.1/utilities/spacing/ Spacing Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance. getbootstrap.com https://getbootstrap.com/docs/5.1/utilities/text/ Text Documentation and examples ..

부트스트랩 Bootsrap 시작하기 / 시작하는법

html과 css를 다루기 어렵다면 부트스트랩을 이용하시면 됩니다. html에 부트스르랩을 설치하는 방법을 설명하겠습니다. 일단 부트스트랩 홈페이지에 방문을 해보겠습니다. https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 시작하는 방법은 아주 간단합니다. 사이트의 Docs에 들어가서 퀵스타트를 보시면 됩니다. 부트스트랩의 css와 javascript 파일을 자신의 html에 붙여넣기는 하면 끝납니다. css cdn은 자신의 head 태그 안에 넣으면 됩니다. javascript cdn은 자신의 body 태그 끝나기 전에 넣으면 됩니다. 그럼 다 설치된 모습을 ..

12월 29일 - 추가사항 / 선물옵션, 국내선물, k200 f, 전업투자

9시 40분 쯤의 기회를 날려버리고... 10시에 다시 기회를 주기 시작했습니다. 청색봉에 검은봉이 나왔습니다. 분홍색 중기 매수 에스코트가 실선이지만 내가 잃었을 당시의 기울기는 매우 가파른 경우이고... 중심선 위치도 간신히 돌파한 상태이었습니다. 그러나 10시에 온 기회는 시가가 중심선 부근에서 시작을 했습니다. 분홍 매수 에스코트의 기술기가 그렇게 위협적이지 않습니다. 약화세를 보이며 검은봉이 이 분홍의 지지를 이겨버리면 터널까지 흐르는 모습을 볼 수 있습니다. 10시 20분까지 흐름을 보지 못하고 왜 나는 시스템을 껐는가? 손절은 10틱 이상에서 하고 익절은 거의 3~4틱에서 하는 내 자신이 문제입니다. 노란색 청색 검은색의 흐름이 나왔을 때 1. 단기 매도 에스코트가 직전 고점보다 아래에 있는..

선물옵션 2021.12.29

매매 일지 - 21년 12월29일 / 국내선물 투자 / 전업투자 / k200 f

오늘의 매매일지를 작성을 해보겠습니다. 저는 보통 9시에 매매를 시작해서 10시 20분 정도에 마칩니다. 일단 일봉을 보겠습니다. 스텔스 수치가 31정도 되는것을 볼 수 있습니다. 시가가 단기 매도 에스코트 부근에서 출발을 했습니다. 이것을 돌파하면 올라갈 수 있고, 단기적으로 보면 내려갈 수 있습니다. 그러나... 스텔스 수치는 일단 해소하려고 할것입니다. 30분 분봉을 확인 해보겠습니다. 스텔스 수치가 31입니다. 역시 시가가 단기 매도 에스코트 위에서 시작을 한 것을 볼 수 있습니다. 일단 9시에서 9시 10분까지 스텔스 수치를 해소하려고 할 것입니다. 그림은 보면 일단 해소했습니다. 단기 매수 에스코트 : 397.95 중기 매수 에스코트 : 397.30 이 에스코트 선으로 가려고 할것입니다. 그리..

선물옵션 2021.12.29

선물 매매 일지 - 21년 12월 28일, 국내선물 / 나스닥, 요술램프지니

나스닥 - 5주기 기준 노란봉에 청색봉 매수 지지에 의해 더 내려가지 못했습니다. 분홍색 실선이 나타다면 조심해야 겠습니다. 매도 에스코트가 직전 고점보다 낮는것은 > 좋은 신호 단기 매도가 중기 매도를 침범한 상태 > 좋은 신호 매도 에스코트가 직전 고점보다 낮으며 중기 매도를 침범 했으므로 좋은 상태입니다. 매수 에스코트가 점선이 되어서 매수 에너지가 약화 된 상태입니다. 위 사진과는 다르며 더 밑으로 내려갈 가능성이 높습니다. 터널까지 가려고 합니다. 위와 같은 상태입니다. 단기 매도도 침범을 했고 직전 고가보다 낮게 되어 있습니다. 다만 중기 매수 에스코트의 신호가 좋지 못합니다. 그 선이 지지로 작용을 했습니다. 역시 돌파하지 못하고 다음 봉으로 가버립니다. 국내선물 - 10분 기준 노란봉 > ..

선물옵션 2021.12.28

CSS Transition 으로 애니메이션 만들기

내가 원하는 사이트에 애니메이션이 무엇이 있는지 알고 싶다면 크롬 갭발자 도구를 이용하면 됩니다. 빨간색을 따라가서 애니매이션을 누르면 됩니다. 애니매이션을 만들려면 Transition 을 이용해야 합니다. 1. 시작 스타일을 정해야 하고 2. 끝나는 스타일을 작성해야 합니다. 대부분 :hover 마우스를 올릴 때 최종 스타일을 지정합니다. 3. Transition 을 지정해주면 됩니다. html을 작성해 줍니다. price 클래스가 위로 올라가는 것입니다. 마우스를 올릴 때 작동하게 하려면 div를 하나 더 만들어서 그안에 넣어주고, 이 놈을 position을 이용해서 공중부양을 시킵니다. 그리고 기존 img 를 다 감싸도록 폭과 너비를 100%로 해줍니다. css를 작성을 해줍니다. div를 하나 더..

인터넷 익스플로러 X 버전 이하에서만 적용할 수 있는 CSS파일 첨부

아오..... 애증의 인터넷 익스플로러 ㅜㅠ 조건부로 익스플로러 버전용 CSS파일 첨부를 할 수 있습니다. 익스플로러 X 버전 이하에서만 적용할 수 있는 CSS파일을 첨부할 수 있습니다. 첨부해주시면 css폴더내의 ie8.css 라는 파일은 인터넷 익스플로러 9 미만에서만 적용됩니다. 저걸 [if lt IE 10] 이렇게 바꾸면 익스플로러 10 미만에서만 적용됨 이렇게 첨부하신 후 ie8.css에 여러분이 수정하고 싶은 코드를 담고 head태그 내에 다른 CSS 파일들과 함께 첨부해주시면 됩니다. 참고로 ie8.css 파일은 다른 브라우저에선 전혀 읽혀지지 않습니다. link 태그 첨부 순서는 가장 마지막이 좋음 그리고 클래스 명을 ie--explain-container 라고 해주면 좋음

HTML, CSS 반응형 예제 : float 이용하기

float 를 이용한 코드를 작성하면.... 피자 풍부한 토마토 소스 햄버거 풍부한 불향 치킨 깊은 간장맛 콜라 느끼함을 제거하는 맛 .explain-container>div { float : left; width : 25%; } @media screen and (max-width : 992px) { .explain-container>div { float : left; width : 50%; } } @media screen and (max-width : 768px) { .explain-container>div { float : none; width : 100%; } }

css 반응형 예제 : display: flex 이용하기

부모 요소에 적용하고 display: flex justify-content: center; align-items: center; flex-wrap: wrap; 자식에게 폭만 잘 지정해주면 이러한 것을 폭을 줄여주면 잘 넘어간다. 그러나 테블릿 일 때 2단으로 보여주고 모바일 화면일 때 80%찬 화면으로 보여주려면 미디어 쿼리도 잘 써줘야 한다. 코딩을 시작하면.... html 부분은 단순함 피자 풍부한 토마토 소스 햄버거 풍부한 불향 치킨 깊은 간장맛 콜라 느끼함을 제거하는 맛 css 부분에는 특별하게 미디어쿼리를 사용한다. .explain-container { font-size: 25px; text-align: center; display: flex; justify-content: center; ali..

css 단위 / media query / 반응형 웹

반응형 웹을 만드려면 먼저 설정을 해주어야 합니다. meta 태그를 추가해야 합니다. 1. rem 이라는 단위를 사용할 수 있습니다. 기본 폰트 사이즈가 있다면 = a 1.5rem 을 사용하면 >> a x 1.5 가 됩니다. 기본 폰트를 적용하지 않으면 16px이 적용되어 사용됩니다. 2. vh 를 사용하면 빈 화면에서 스크롤이 가능하게 됩니다. vw 는 그 반대의 개념입니다. 폭 개념 .class { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width..

head 관련 태그 공부하기, 메타태그

head 태그 안에 들어가는 요소를 공부하겠습니다. 1. 사이트의 인코딩 형식을 지정할 때 charset="UTF-8" 이라고 속성을 적을 수 있습니다. 2. 사이트의 구글 및 다른 검색엔진의 검색 결과 화면에 뜨는 글을 수정하고 싶으면 속성들을 추가할 수 있습니다. description은 구글 검색시 파란 제목으로 뜨는 글 keywords는 검색에 도움을 주는 키워드 (검색엔진 최적화에 필요한 요소입니다.) 3. 사이트 초기 zoom 레벨이나 폭을 지정해주려면 name="viewport" 라는 속성을 부여하시면 됩니다. width=device-width는 모바일 기기의 실제 폭으로 렌더링 하라는 뜻입니다. 요즘 스마트폰 가로 해상도가 높은 기기들이 많이 있습니다. 그래서 실제 접속시 스마트폰 기기의 실..

css 가로 정렬 쉽게하기, Flexbox

이전에 가로 정렬을 하려면 float : left; 를 사용했었습니다. 그러나 더 좋은 방법이 있습니다. 부모 div안에 자녀 엘리먼트가 많다면? 부모 div 안에 display : flex; 를 넣어주시면 쉽게 가로 정렬이 됩니다. .flex-container { display : flex; justify-content : center; /* 좌우정렬 */ align-items : center; /* 상하정렬 */ flex-direction : column; /* 세로정렬 */ flex-wrap : wrap; /* 폭이 넘치는 요소 wrap 처리 */ } 요소의 폭이 커도 넘어가지는 않습니다. 그러나 flex-wrap : wrap 사용하면, 요소의 폭이 넘어가면... 다음 줄로 넘어가게 됩니다. fle..

반응형