11/2 내일배움캠프 1-3 TIL 회고 css neon text

오늘도 화창한 아침이 밝았다 

창문틈 사이로 쏟아지는 햇빛을 맞으며 기상후

이가시릴정도의 시원한 물을 한통 냉장고에서 꺼내와 

노트북 앞에앉아 팀원들과 힘차게 인사한다...

 

팀원들이 모두 밝게 인사해주었다

오늘해야할일들을 리스트화해서 어떤식으로

고칠것인가 기능을 추가할부분은 없는가

또는 상담일정이있으니 서로 시간을 알려줘가면서

아침 미팅을 간단히 마친후 

각자 작업을하기로한 섹션을 작업읋 하러갓다

 

작업을 시작한지 얼마되지않아

팀원 한분이 나를 찾았다 버튼이없어서 댓글을 삭제하는 기능을 추가못하니

버튼을 추가해달라는 주문이였다

나는 얼른 켜서 버튼을 두개 만들어드렸다

댓글을 수정하는 버튼과 삭제하는버튼

댓글 수정을 하는기능을 구현하기위해 인풋태그를달아서 

Css까지 완벽하게 수정하여드렸지만

댓글 을 수정하는 기능을만들기에는 상상하는대로 만들어지지않았다

서로 3시간정도를 고민하다가 댓글은 그냥 지우고 새로 쓰는 방면으로 가기로했다

그에대한 결과값은 이렇다

저 버튼을 누르면 사용자가 등록한 글이 지워지도록기능을 추가했다

그런데 또 갑자기 글이 밀리면서 내가 지정한 박스안으로 들어가질않는것이다

왜그런가 곰곰히 생각해보니 인풋테그 박으로 텍스트가 붙으면 

인풋태그 안에 써지는것이 아니라 밖에 타이핑이 되는것을 빠르게알아차린후

input을 footer로 바꿔서 믄제점을 빠르게 해결했다

이제 어느정도 html과 css가눈에 익기 시작하는거같다

독학으로 공부한지 2달이 조금넘어가는데

그래도 내가 원하는 모양의 페이지 면을 만들수있는것이 신기하다

맨날 메인navbar만 만들고 막히고를 반복했는데 이제는 페이지 하나정도는

기능을 제외하면 금방금방 만들어낸다

 

그리고 다른팀들은 어떻게 작업하나 염탐?을 하러 다른 조에놀러갔다

막히는 조가 있는가하면 진짜 엄청난속도로 자고있고 기능을 많이 넣는곳도 있는곳을봣다

아마 전공자이거나 오랫동안 독학을 하지않았을까 생각이되었다

그런 다른팀의 페이지를보면서 나의 소개 페이지에는 js나jQuery 기능이없었다

부트스트렙이서 긁어올줄은 알았지만 내가직접 만들어보기로했다

약 2시간에걸쳐 300vh에 달하는 나의페이지를 예쁘게 꾸며보았다

이렇게만들면서 명함을넣는 Inergradient 기능이나 네온사인처럼보이게하는

방법들을 알게되었고 저 명암을 잘만연결한다면 그라데이션을 만들어서

화면을 내가 뜻하는대로 바꿀수있는것을 오늘배웠다

 

이배운것을 나혼자 알고있으면 뭐하나

팀원들에게도 알려주어서 메인페이지에 잔디를 새로깔았다

팀원들도 이쁘다고 좋아했다 

이렇게 내가 배운것을 다른사람에게 가르키는것도 재미가있다는걸 느꼇다

 

 

명암조절 css 코드

.sub_pagebox{

width: 100%;       길이

height: 1100px;    높이

background-image: linear-gradient(

0deg,

rgb(0, 0, 0, 1),

rgba(0, 0, 0, 0.8),

rgba(0, 0, 0, 0.4),            url에 연결된 이미지의  명암조절하는법 뒤에 1~0까지 조절해주면된다

rgba(0, 0, 0, 0.8),

rgb(0, 0, 0, 1)

),

url("../yooyoungjae1/6.jpeg");  

background-size: contain;

}

네온사인 text 코드

 

.text{

margin-left: 20px;

margin-bottom: 300px;

font-family: 'Great Vibes', cursive;

font-family: 'Nanum Pen Script', cursive;

font-family: 'Poor Story', cursive;

font-family: 'Sacramento', cursive;

font-size: 130px;

color: white;

text-shadow: /* White glow */ 0 0 2px #fff, 0 0 6px #fff, 0 0 10px #fff,

/* Green glow */ 0 0 40px rgb(0, 0, 210), 0 0 80px rgb(0, 0, 210), 0 0 100px rgb(0, 0, 210), 0 0 110px rgb(0, 34, 255),

0 0 130px rgb(0, 0, 210);

}                      택스트에 퍼지는 색을 표현한다 wihte glow는 글씨에서 최대한가까운 색상

                        green glow는 밖으로 펴지는 색상이다 각 위치의 px값을 조절하면 예쁜글씨가 만들어진다 

 

 

    

이글을 보는 사람들도 그냥 긁어다가 텍스트 글자에 입혀봣으면좋겠다

내가원하는 첫화면을 만들수있을때까지

그럼 오늘 회고는 여기서마치겠다