생각하며 글을 쓰는 사람

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..

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라고 표시를 하는 것입니다. 웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 동영상을 넣고 등등의 .. 자료를 입력합니다. 기업용 홈페이지든, 우리가 많이 쓰는 유튜브 싸이트, 커뮤니티 사이트, 쇼핑몰도 여기에 해당한다고 볼 수 있습니다. 그 자료..

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