생각하며 글을 쓰는 사람

navbar 안에 있는 모든 li 에 적용하고 싶다면... 스페이스바를 이용하면 됩니다. .navbar li { display : inline-block; } navbar 안에 직계 자식에게 적용하고 싶다면, > (꺾쇠괄호) 를 쓰면 됩니다. .navbar>li { display : inline-block; } a(링크) 태그에서 밑줄을 제거하고, 방문시 보라색으로 변경되는 것 제거하기 링크 .link { text-decoration : none; } .link:visited { color : black; } css로 배경넣기 .mainBack { width: 100%; height: 500px; background-color: rgb(18, 128, 172); background-image: url(/..

이번글에서는 css - display : inline-block을 사용해보겠습니다. 이전에 블로그 글에서 가로로 정렬할 때 float : left 를 사용했습니다. 그러나 이것만 쓸 수 있는 것은 아닙니다. 지금 만들 것은 아래와 같은 레이아웃을 만들어 보도록 하겠습니다. display : inline-block 을 content와 menu에 넣어주면 됩니다. display : inline-block을 사용 .container { width: 800px; } .header { width: 100%; height: 50px; background-color: rgb(100, 237, 123); } .content { width: 80%; height: 400px; background-color: coral;..

그림자를 그리는 방법 그림자를 그리는 방법은 box-shadow 속성을 이용하는 것입니다. 아주 간단합니다. 안녕하세요 개발자 입니다. .card__box { width: 400px; height: 300px; background-color: rgb(21, 93, 156); margin-left: auto; margin-right: auto; font-size: 30px; border-radius: 20px; color: white; display: flex; justify-content: center; align-items: center; box-shadow: 10px 10px 15px 5px rgb(109, 109, 109); } 위의 css의 코드에서 box-shadow만 주목을 하시면 됩니다. 5..

이번 글에서는 css에서 자주 사용하는 속성에 대해서 정리를 하겠습니다. .myBox { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; } margin은 박스의바깥 여백을 지정합니다. padding은 박스 내부의 안쪽 여백을 지정합니다. border는 테두리 (차례로 두께, 선의 종류, 색상)를 넣을 수 있습니다. border-radius는 테두리 둥글게 처리하는 기능입니다. 가운데 정렬 >> display : block; margin-left : auto; margin-right : auto 이렇게 주면 됩니다. margin-top : 20px; padding-left : 30px; top, left, bott..

html 태그에는 두가지 종류가 있습니다. Block(블럭) 과 Inline(인라인)이 있습니다. 옆에 다른 요소가 못 오는 걸 block라 부르고, 다른 요소가 올 수 있는 걸 inline이라고 부릅니다. div, header, main, section, footer, article, address, p 등은 block 입니다. inline 은 옆으로 간다. 종류에는 span, link, image, a : 그림, 링크 그림들이 이에 해당합니다. 만약 block 을 가운데로 정렬을 하고 싶다면, 아래와 같은 코드를 작성하면 됩니다. .클래스선택 { width: 300px; margin-left: auto; margin-right: auto; } 꼭 width 폭을 지정해줘야 합니다. 왜? 해보면 알게 ..

이번 글에서는 이미지와 글자를 스타일 하는 방법에 대해서 정리를 하겠습니다. html 안에서 스타일을 해보도록 하겠습니다. ( 원래는 css를 따로 빼지만 html과 함께 작업이 가능합니다. ) 간단하게 CSS 스타일 넣는 방법에 대해서 정리를 하겠습니다. 글자 거의 모든 태그는 style="" 이라는 속성을 열 수 있습니다. 거기 안에 스타일이름 : 스타일값; 형식으로 스타일을 넣으면 됩니다. 여러개를 css 속성값을 넣을 수 있습니다. 그리고 속성값을 많이 쓰게 된다면... 세미콜론을 꼭 한 속성이 끝날 때 마다 넣어 줘야 합니다. 자주 사용하는 글자 스타일들 font-size : 10px; /* 폰트의 크기를 설정 */ font-family : 'gulim'; /* 폰트 서체를 설정 */ lette..

HTML의 기초와 태그로 글을 작성하는 법을 정리 해보겠습니다. 웹사이트를 제작하고 만들고 싶을 때 사용한다고 할 수 있습니다. 세상에 존재하는 모든 웹페이지는 html, css, javascript로 동작합니다. HTML은 Hypertext Markup Language의 약자인데 Markup Language(마크업 랭기지)에 주목해주시면 됩니다. 마크업 언어는 "자료의 구조를 표현하기 위한 언어"입니다. 여기는 menu고, main이고, 여기는 footer라고 표시를 하는 것입니다. 웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 동영상을 넣고 등등의 .. 자료를 입력합니다. 기업용 홈페이지든, 우리가 많이 쓰는 유튜브 싸이트, 커뮤니티 사이트, 쇼핑몰도 여기에 해당한다고 볼 수 있습니다. 그 자료..

오늘은 파이어베이스에 글과 이미지를 업로드 해보겠습니다. 1. 먼저 글을 업로드 해보겠습니다. 텍스트입력을 받을 html 을 작성합니다. 그 다음에는 html에 담겨진 정보를 javascript로 읽고, 파이어베이스 함수 add에 담아주면 됩니다. document.querySelector('.blog__submit').addEventListener('click', function () { //querySelector를 이용해서 blog__submit을 가져오고 //addEventListener를 걸어줍니다. //즉 버튼을 클릭시 function 안을 실행하라는 의미입니다. const blogContent = { title: document.querySelector('.blog__title').value,..

파이어베이스 파이어스토어(firestore)에 데이터를 저장하는 방법에 대해 알아봅니다. 만약 blog 라는 컬렉션을 만들고 문서(도큐먼트) 이름은 content1로 하고싶다면 1. 기본적으로 저장하는 방법은 아래와 같습니다. const db = firebase.firestore(); db.collection('blog').doc('content1').set( { title : '첫번째 블로그 글', user : userInfo, content : '블로그의 글 ~~~~', date : new Date(), } ) 내용은 객체의 형태로 저장하면 저장하면 됩니다. 2. 만약 문서(document) 이름을 따로 저장하기가 귀찮으면, 자동으로 부여되게 할 수 있습니다. const db = firebase.fi..

파이어베이스 콘솔에서 파이어스토어(Firestore)에 데이터를 저장하는 방법과 자바스크립트로 불러오는 방법을 이전 글에서 공부를 했습니다. 이제는 데이터를 불러와서 콘솔창에 찍어볼 수 있습니다. 자 그렇다면... html에 데이터를 보내줘서 웹사이트에 보이도록 해야하지 않겠습니까? 어떻게 할까요? 일단 user 컬렉션에 있는, 두명의 유저를 불러와서 html 에 삽입을 해보겠습니다. 유저의 정보는 email 과 name 으로 되어 있습니다. 1. 일단 유저의 정보를 넣을 수 있는 빈 박스를 넣어줘야 합니다. 클래스명은 myContent로 해줍니다. 2. 유저 정보를 읽어와서 반복문을 돌려줍니다. const db = firebase.firestore(); db.collection('user') .get(..

파이어스토어 데이터 베이스는 기존의 관계형 데이터베이스와 다른 NoSQL 데이터 베이스를 가지고 있습니다. 그래서 초보자 분들도 쉽게 접근을 할 수 있습니다. 오늘 설명하고자 하는것은 파이어베이스 8 버전입니다. 프로젝트를 시작하고 파이어스토어로 들어가면 쉽게 조작을 할 수 있도록 되어있습니다. 결론부터 말씀을 드리면 파이어스토어는 컬렉션(collection)과 문서(document)로 이루어져 있습니다. 그리고 문서(document)에 key 와 value 값을 넣어주시면 됩니다. 컬렉션(collection)이 블로그라면 문서(document)에는 블로그 글이 하나씩 들어가게 됩니다. 컬렉션(collection)이 제품이라면 문서(document)엔은 제품이 하나씩 들어가게 되는 거죠! 문서(docum..

파이어베이스에서 새로운 프로젝트를 만든다. >> 콘솔에 들어가서 그냥 진행하면 됩니다. 그리고 터미널 창에서 아래의 명령어를 치고 firebase-tools를 설치를 해야합니다. 글로벌로 설치가 되는 것이므로 한번만 하면 됩니다. firebase-tools는 콘솔창에서 파이어베이스 프로젝트를 실행하고 설치하고 배포를 할 수 있도록 도와주는 창지 입니다. 구글에 있는 파이어베이스와 내 컴퓨터가 상호작용을 할 수 있도록 도와주는 것이죠!! $ npm install -g firebase-tools 터미널창에서 로그인이 안되어 있다면, 로그인을 하시면 됩니다. 로그인을 해야 뭔가를 할것 아니겠습니까? 아래의 명령어를 치면 여러가지 화면이 뜨고 로그인을 할 수 있게 됩니다. 차근차근 진행을 하시면 됩니다. $ f..