본문 바로가기

분류 전체보기307

HTML 상속 - 부모tag, 자식tag 부모 태그에서 자식 태그로 상속되는 몇 가지 속성들을 살펴보자. color font-family font-size font-weight line-height list-style text-align visibility 위의 속성들도 항상 상속되는 것은 아니다. 예를 들어 태그에는 color 속성이 상속되지 않는다. 태그가 억지로 상속을 받아오려면 inherit값을 써야한다. inherit은 부모 요소에 따라 상속을 시켜주는 값이다. Let's go to google! Let's go to google! .div1 { color: green; } .div2 { color: orange; } .div2 a { color: inherit; } 이렇게 div2 a 속성에 inherit을 해주어야 div2에 있는 .. 2020. 7. 16.
구글 사이트 도구 - 머리글 이미지 변경 이미지 사이즈 구글 사이트 도구로 웹페이지를 만들 때 가장 불편한 점은 '글씨체' 를 못 바꾼다는 점이다. 구글 사이트 도구 웹페이지에서 맨 처음 보여지는 '머리글' 에는 텍스트를 작성할 수 있고, 배경 이미지를 넣을 수 있다. '머리글'에 텍스를 넣으니 기본 서체로만 글이 써진다. 글씨 크기는 '일반 텍스트, 굵은 제목, 제목, 부제목, 작게' 밖에 없다. '머리글' 에 이미지를 넣으려면 이미지 크기를 조절해야 한다. 가로 567 픽셀, 세로 265 픽셀 정도 조정해서 넣어보았다. 이미지에 들어가는 글자는 가운데에 맞게끔 좀 더 작게 적어주어야 한다. 구글 사이트에서 어떻게 나오는지 각각 확인해보자! 1. 핸드폰 화면 2. 태블릿 화면 3. 컴퓨터 화면 2020. 7. 13.
CSS Box Model - margin과 padding 완벽 이해 Box Model Box Model은 요소 1개를 기준으로 생각하면 된다. 요소는 실제 내용과 테두리로 이루어져 있다. 그리고 실제 내용과 테두리 사이의 공간인 패딩, 요소와 요소 사이의 간격인 마진이 존재한다. 실제 내용(content) 내용과 테두리 사이 여유공간(padding) 테두리(border) 이 요소와 다른 요소 사이의 간격(margin) margin과 padding만 잘 알아도 웹 페이지를 구성하기에 편리하다. margin은 요소 외부 여백(요소와 화면 여백)을, padding은 요소 내부 여백을 의미한다. 1. Margin 전체 wrap에 margin이 위 아래는 10px 들어가 있고 왼쪽 오른쪽은 auto로 가운데 정렬이다. 전체 요소를 묶은 wrap이라는 요소와 화면과의 여백을 나타낸.. 2020. 7. 9.
HTML div와 span 를 사용하면 쭉 이어진 글 중간에서 끊기고 밑에 있는 줄로 넘어간다. span과 div는 요소들을 묶어준다는 공통점이 있다. 차이점은 div태그는 글을 새로운 줄을 놓고 span은 원래 있는 위치에 영향을 주지 않는다. 2020. 7. 8.
HTML 폰트 - google 무료 폰트, 내 컴퓨터 폰트, 다운받은 폰트 적용하기 1. 폰트 종류 1)Serif폰트 Times New Roman 궁서체 2) Sans-Serif폰트 Arial 굴림체 3) Monospace폰트 : 프로그래밍 폰트로 많이 쓰임. Courier Courier New 4) Cursive Comic Sans MS Monotype Corsiva 5) Fantasy Impact Haettenschweiler 2. 폰트 설정 방법 1) 폰트가 내 컴퓨터에 이미 설치되어 있는 경우 예를 들어 내 컴퓨터에 Times New Roman이 있을 경우 html에는 따로 써줄 것이 없다. CSS에 font-family를 적어주면된다. font-family에 내가 적용하고 싶은 폰트를 1차로 적는다. 없을 경우 제 2의 폰트인 Times를 사용하도록 적는다. Times사용도 실.. 2020. 7. 8.
CSS Text Styling : font-size, font-weight, text-align, text-decoration(폰트 사이즈, 굵기, 정렬 등) 오늘은 가장 기본적인 텍스트 스타일링을 정리해보려한다. '놀면서 배우는 코딩 : 마이크로비트로 정글 탐험하기' 책 홍보 사이트를 만들면서 살펴보려한다. 책 보러 가기 책 홍보 사이트 메인 화면에 들어가는 태그를 한 개 가져왔다. 유튜브에 '놀코'를 검색해보세요! 1. CSS로 스타일링을 해보자. .information{ font-size: 20px; font-weight: bold; } information클래스에 있는 글자들을 스타일링 해주었다. '유튜브에 를 검색해보세요!' 라는 글자들은 폰트 크기 20픽셀, 굵게로 설정되었다. 이번에는 information클래스 중 a태그인 '놀코' 글자를 스타일링 해보자! 텍스트 데코레이션을 없애버렸다. 밑줄, 윗줄, 가운데줄을 없애버리고 아무 효과도 안 준 상태.. 2020. 7. 7.
Adobe XD 란 무엇인가? 설치 방법 알아보기 티스토리에 작성하는 첫 글이다! 지난번 들었던 강의에서 UI구성을 할 때 adobe XD를 사용하라는 추천을 받고 Adobe XD를 설치하고 사용해보려고한다! Adobe XD란? Adobe XD란 디자이너가 디자이너를 위해 설계한 UI·UX 디자인 작업 툴이다. ※UI란? user interface의 약자로 간단하게 말해 '사람과 컴퓨터 시스템·프로그램 간 상호작용'이다. 더 간단하게 말해 사용자 환경이라고 할 수 있다. 사람에게 보여지는 화면, 화면 터치 등의 사용자 환경이라고 이해하면 편하다. ※UX란? user experience의 약자로 '사용자 경험'을 의미한다. 사용자가 어떤 시스템·프로그램 등을 느끼고 생각하는 총체적 경험을 말한다. Adobe사에서 'Sketch'라는 디자인 툴을 따라잡기 .. 2020. 7. 7.

티스토리툴바