dev.log

02. CSS 배경에 선형 그라데이션 효과 넣기

Wed, 12 Jul 2023 13:38:27 GMT

저는 퍼블리싱을 하다 모 홈페이지의 텍스트에 그라데이션 효과가 들어간 걸 보고 '어! 이건 우째했지?' 이런 생각이 들었죠. 그래서 바로 개발자 도구를 참고했고, CSS로 배경에 선형 그라데이션 효과를 넣는 방법을 알게되었는 데, 오늘은 이 방법에 대해 까먹기 전에 얼른 포스팅하려 해요. 자 그럼 CSS로 선형 그라데이션 효과를 주는 방법에 대해 알아보도록 하죠! 😎

1. linear-gradient()

liner-gradient( 선형 그라데이션 )

여기서 gradient가 색체용어로는 하나의 색체에서 다른 색체로 변하는 단계를 말합니다. 그래서 CSS에서 한 방향에서 다른 방향으로 색이 점차 변하게 하고 싶다할 때 *사용하는 속성이 *gradient 속성 입니다.

2. linear-gradient() 사용하기

linear-gradient( direction, color1, color2, …, color3 )

먼저, direction에 그라데이션을 넣을 방향을 입력합니다. direction에는 총 5가지가 있는 데, 하나씩 살펴보도록 하죠.

먼저, to bottom은 위에서 아래로 그라데이션을 만듭니다. 가장 기본 값이죠. 두번째로, to top은 아래에서 위로 그라데이션을 만듭니다. 세번째로, to left, 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. 다음으로, to right는 to left와 반대로 왼쪽에서 오른쪽으로 그라데이션을 만듭니다. 마지막으로, ndeg는 n도의 방향으로 그라데이션을 만듭니다.

그리고 그 다음으로 색을 넣으면 되는 데 색은 여러개 입력할 수 있으며, 입력한 순서대로 설정한 방향대로 그라데이션을 만들 수 있죠.

예를 들어 한 번 보도록 하죠!

linear-gradient( to right, green, blue )

위 코드를 입력했을 때, 왼쪽에서 오른쪽으로 초록에서 파랑색 순으로 색이 점차 변하게 됩니다.

위와 같이 말이죠.

01. 웹 프로그래밍이란?

Sat, 10 Jun 2023 17:23:06 GMT

본격적으로 개발을 하기에 앞서 간단하게 웹 프로그래밍에 대해 알아보고자 한다. 😎

웹 프로그래밍

HTML5

HyperText : 문서의 개체(텍스트, 이미지 영상 등)가 서로 연결되어 있는 구조.
HyperLink : 문서와 문서 사이를 이동할 수 있는 기능.
Markup Language : 태그(Tag)를 이용하여 문서나 데이터 구주를 명시하는 언어. ex.

CSS3

Cascading : 우선 순위에 따라 적용.
StyleSheet : 웹 페이지의 스타일(디자인)을 정의.

Javascript

Javascript : 웹을 풍부하게 만들어 주는 상대적으로 가벼운 프로그래밍 언어.

웹 프로그래밍 관련 주요 구성 요소

웹 프로그래밍 관련 주요 구성요소로는 Web browser, Web Editor, Native App, Native Web, Hybird 이렇게 5가지가 있다.

웹 브라우저(Web browser의 정의와 종류)

웹(Web)의 정보를 탐색하기 위한 프로그램은 Web Browser이다.
Apple에서 만든 Safari
Mozilla 재단에서 만든 Firefox
Google에서 만든 Chrome
Microsoft에서 만든 Edge (Microsoft에서 프로그램이 무겁다고 해서 Edge라는 브라우저를 새롭게 출시함)
Opera Software에서 만든 Opera

Text Editor

노트패드++ (Note Pad++) 메모장이랑 비슷하지만, 비슷하게 많이 사용되고 있다.
에디트플러스 (Edit Plus)
울트라 에디트 (Ultra Edit)

이렇게 있으나, 대부분 Code Editor를 많이 사용한다.

웹 편집기(Web Editor)의 종류

Code Editor
VScode(Visual Studio Code) -> VScode
Sublime text
Atom
Brackets
Dream Weaver

웹 편집기 (Web Editor)의 종류

웹 기반 코드 편집기 (Web based code Editor)
통합개발환경 (IDE: Integrated Development Enviroment)
코드펜(Codepen), 라이브위브(Liveweave), 구름(IDE)

Natvie App, Web App, Hybrid App

Natvie App : 모바일기기에 최적화 된 언어로 개발전 앱으로 안드로이드 SDK를 이용해 jaga 언어로 만드는 안드로이드 앱과 iOS, SDK(Software Development Kit)를 이용해 Object-언어로 개발된 아이폰 앱 등
그러다 프론트엔드 쪽의 선호도가 높아지다 보니 Web App쪽의 인기가 높아졌다.
Web App : 말 그대로 웹에서 개발을 함 -> HTML만들듯이.
앱의 기반이 되는 콘텐츠 영역 외 HTML 기반의 웹 앱으로 제작. 최종 앱 배포에 필요한 패키징 처리만 아이폰, 안드로이드 플랫폼 안에서 처리한 어플리케이션.
하이브리드 앱(Hybrid App) : 모바일 앱과 네이티브 앱을 결합한 것으로 모바일 웹의 특징을 가지면서 네이티브 앱의 장점도 가짐.

Etc

F12를 누르면 개발자 도구가 나온다.
config란 configuration 환경설정을 줄인말이다.

벨로그, 다시 시작하다

Fri, 23 Sep 2022 08:37:26 GMT

_'벨로그 다시 시작한다고?' 👀 _

이전에 작성했던 벨로그 포스팅이 한 순간의 실수로 다 날라가게 되면서, 오늘 부터 다시 새롭게 첫 포스팅을 하게 되었다. 그래서 이전엔 작성한 벨로그를 회고하고, 앞으로 포스팅을 어떻게 써내려갈 예정인지 간략하게 얘기해보려한다.

Previous Posting

위 게시물들은 차차 추가적으로 다시 업로드 예정이다

이전 포스팅에는 2021년 5월 말. JUNCTION ASIA 2021 해커톤 회고글을 시작으로, iOS 앱 개발과 6월 부터 새롭게 시작한 웹 개발에 대한 글이 담겨 있었다. 사실 이전에 적었던 게시물의 갯수가 많진 않아서 그나마 다행이긴 하지만, 그래도 iOS 앱 개발과 웹 개발을 배우며 느꼈던 추억이 담긴 포스팅들이 마우스 버튼 한 순간에 날라가버렸다는 게 너무 안타까운 건 사실이다.😂

벨로그 기능에 백업기능도 있었으면 좋겠다는 개인적인 생각도 순간들었다. ( 벨로그 운영자님, 혹시 이 글 보고 계시려나? 😅 )

안타깝지만 어쩌겠냐! 이전에 VSCode로 작업하면서 파일을 날려본게 한 두번이 아니잖아?! 😂😅 '이번 기회를 통해 다음엔 이런 실수를 반복하진 않겠지?!' 인간은 그러면서 성장해 나가는 거지.(라고 나름 위안을 삼아본다..🥲)

더불어 이전에 썼던 포스팅들을 보면, 내가 학습하고 배운 내용을 내가 스스로 정리한다는 느낌보다는 이 글이 '타인에게는 어떻게 보여질 까'에 너무 초점을 맞춘 거 같았다.

그래서 앞으로는 어떻게 할거냐고?

앞으로의 계획

앞서 포스팅한 글들을 다시 보면 뭔가 어색하고 매끄럽지 않은 문장들이 들어 있었다. 그래서 오늘, 벨로그를 새롭게 시작하면서 게시물을 누군가에게 보여준다는 느낌보단, 내가 스스로 학습한 내용을 하나씩 다져본다는 느낌으로 조금씩 적어나가고자 한다.

물론, '지금도 이 포스팅을 적으면서 누군가 보고 있겠지?'라는 생각에 내 생각을 막 적기에 앞서 글을 다듬으면서 적어야 된다는 압박감이 조금 있지만 그것 조차 이젠 조금씩 내려놓으려 한다. 쉽진 않겠지만 조금씩 연습한다 생각하고 바꿔 나가다보면, 어느 새 편히 글을 쓰고 있는 나 자신을 발견하게 되지 않을 까 싶다.