본문 바로가기

디지털노마드

 (62)
CSS Syntax - CSS 쓰는 방법 CSS Syntax 쓰는 방법 CSS 규칙 세트는 선택기와 선언 블록으로 구성됩니다. 선택기는 스타일을 지정할 HTML 요소를 가리 킵니다. 선언 블록에는 세미콜론으로 구분 된 하나 이상의 선언이 포함됩니다. 각 선언에는 CSS 속성 이름과 값이 콜론으로 구분되어 포함됩니다. 여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶습니다. Hello World! These paragraphs are styled with CSS. 위와 같이 html 의 head태그안에 선언해줍니다.하지만,웹 페이지를 예쁘게 꾸미기 위해서 사용하는 태그의 길이는 상당히 길어지기 때문에 따로 파일을 분리해서 만든 후 html에서 호출해주는 형식으로 사용합니다. 아래 그림과 같이 styles.css 파일을 따로 저장한..
CSS - 박스 테두리 모양 둥글게 만들기 border-radius를 사용하면 박스의 테두리를 둥글게 만들 수 있습니다. 다음과 같이 태그를 만들어 봅시다. 오른쪽은 HTML파일이고 왼쪽은 CSS 파일 입니다. CSS 파일은 styles 폴더안에 style.css로 저장합니다.그리고 HTML파일에서 링크를 걸어줍니다. HTML파일에서는 상자의 클래스를 class="box"로 적어줍니다. .box { width:200px; height:200px; background-color: rgb(226, 43, 104); border-radius: 20px; } .box2 { margin-top: 20px; width:200px; height:200px; background-color: rgb(177, 226, 43); border-radius: 0 20p..
CSS로 전체 배경색 바꾸기 웹문서의 배경색을 바꾸는 태그는 간단하지만 효과가 좋기 때문에 예쁘게 웹 문서를 꾸미고 싶어하시는 분들은 자주 사용하는 태그 입니다. 아래의 태그를 스타일시트에 적용해봅시다. 스타일 시트를 HTML 에 포함 시키지 않으려면 OO.css 파일로 만들어 저장합니다. 그리고, 적용시키고자 하는 파일에서 링크를 적어 부릅니다. 웹문서에 배경색 적용하기 body { background-color: yellowgreen; } 배경색에 그라디언트 적용하기 색상을 지정할때는 컬러의 이름을 써주거나 (yellow, red, green) rgb 코드를 적어줍니다. 색상코드는 웹사이트에서 쉽게 구할 수 있습니다. body { background-image: linear-gradient(rgb(89, 208, 255), rg..
CSS 배우기 - CSS 기본설정하기 HTML 과 CSS 배우기 2일차 입니다. 오늘은 중요한 몇가지 HTML 과 CSS 기초를 시작하겠습니다. HTML 로 웹문서의 기초를 만들고 CSS 스타일을 만들어 주어서 웹 문서를 꾸며줍니다. CSS는 웹 문서의 스타일을 쉽고 빠르게, 예쁘게 정리 정돈해주는 역할을 합니다. 뿐만 아니라 웹 문서와는 따로 파일을 만들어 연결해서 사용할 수 있기 때문에 정리하기가 편리하고, 간단한 애니메이션도 구사할 수 있기 때문에 자바스크립트를 많이 쓰지 않고도 다양한 효과를 웹페이지에 부여해 줄 수 있습니다. 간단한 예를 들어보겠습니다. 다음은 웹문서의 배경색을 바꾸어 주는 태그입니다. 아래에서 웹 컬러코드(Hexadecimal Color Values)차트 링크를 볼 수 있습니다. 원하시는 색깔의 색상 코드를 이용해..
HTML 과 CSS 배우기 - 1일차 HTML 기초 태그 모든 웹 문서를 시작할때 알아야하는 html 의 기초중의 기초를 알아봅시다. 1일차만 알아도 웹 페이지를 만들 수 있습니다. 다음은 웹 문서를 작성할때 가장 먼저 기초적으로 적어줄 태그 입니다. 웹문서를 디자인할때 예쁘게 정리해주려면 필수적으로 CSS도 익혀야 합니다. 처음에는 HTML 부터 적교 그 다음 CSS로 스타일을 지정해주는 것입니다. 오늘은 먼저, CSS를 적용하기 전에 HTML 기초부터 적어보겠습니다. ---> 도큐멘트 선언 ---> 웹문서 HTML 시작 ---> 머릿말 닫기 ---> 본격적인 문서의 시작 ( 웹 문서를 만드는 데 필요한 모든 태그를 담는다.) ---> 웹문서 HTML 닫기 텍스트 스타일 지정 하기 다음은 텍스트 스타일을 지정해 봅시다. 글자의 크기, 스타..
크몽과 해외 프리랜서 사이트 비교- Fiver, Freelance, Upwork 크몽과 해외 프리랜서 사이트 비교'프리랜서'는 쉽지 않지만 장소에 구애받지 않고 일할 수 있는 점, 실력에 따라 평가받는다는 점 등의 매력 때문에 요즘 같이 '디지털노마드'를 하고 싶어 하는 많은 분들이 도전하고 있습니다. 크몽크몽의 경우 거래 금액에 따라 판매 수수료를 차등 적용합니다. 50만 원 이하면 20%, 50만원~200만 원 12%, 200만 원 이상은 6%를 수수료로 책정합니다. 크몽의 평균 프로젝트 가격은 건당 5000원~20만원 정도로 알려져 있습니다. 여기에 20%의 수수료를 크몽에 지급해야 합니다.https://kmong.com/ Fiverr고객이 Fiverr에서 프리랜서 서비스를 구매하는 경우 - 예를 들어 US $ 20 이상 주문 시 Fiverr은 결제총액의 5 %를 수수료로 청구..
올해의 어도비 맥스 행사 - Adobe Max 2020 어도비 맥스 'digital experience' 행사 어도비사에서는 올해 어도비 맥스 행사를 온라인으로 하기로 결정했습니다. 이름하여 'digital experience' 10월 19일부터 21일까지 열리는 데요. 온라인 행사이다 보니 올해는 '무료'입니다. 작년까지는 어도비 맥스에 참가하려면 회사의 경우에는 초청을 받아야 하고, 학생의 경우 할인을 받더라도 비용이 200만원 (참가비용, 체류비용 포함) 가까이 들어가다 보니 부담이 됐었는데, 올해는 온라인 무료 행사라서 좋은 것 같습니다. 다양한 프로그램 강의와 새로운 기기들도 사용해보고, 다양한 국적의 디자이너들과 얘기도 나눠볼 수 있는 멋진행사였는데, 올해는 직접 만나지 못해서 아쉽지만 온라인상에서라도 이런 행사를 볼 수 있게 되어서 좋은 것 같습..
핀트리스트(Pinterest)에 내 블로그 연결하기? 핀트리스트는 티스토리 블로그를 스팸처리 합니다. 하지만, 그렇다고 3대 소셜미디어중 하나를 포기할 수 없으니까 시작해 보기로했습니다. 블로그 주소를 복사해서 핀트리스트에 붙이면 계속 스팸으로 간주 하더라구요. 왜 그런건지 모르겠지만.. 다른 블로거들의 정보를 따라 해보기로 했습니다. 그래서, 블로그 주소가 너무 길어서 그런건가 하고, 내블로그 주소를 복사 한 후 주소를 바꾸어 보았습니다. 먼저, 내블로그의 주소를 복사 한후 비틀리닷컴에 접속해 주소를 붙여줍니다. 그리고 [shorten] 버튼을 누르면 단축주소가 생성됩니다. https://bitly.com/ Bitly | Custom URL Shortener, Link Management & Branded Links Shorten, create and s..

티스토리툴바