IT 일기장

프로젝트 진행 중에 이사님이 만드신 탭 UI가 있다.그 탭 마다 닫기(X) 버튼이 존재하고, 누르면 탭이 닫히고 컨텐츠가 사라지는 형식이다.보자마자 딱 떠오른게 "모두 닫기", "현재 탭 제외하고 닫기" 가 떠올랐는데 모두 닫기부터 구현해봤다. 모두 닫기 화면을 보여주는 형식2가지 정도 생각해볼 수 있었는데.. 하나는 탭에서 오른쪽 클릭을 눌렀을 때, 다른 하나는 버튼 형식으로 화면에 보여주는 형태다.개인적으로 나는 오른쪽 클릭을 많이 쓰기 때문에 오른쪽 클릭을 눌렀을 때로 구현했다. ( 다른 사람들의 의견은 후자의 방법을 선택 ) 나만 편하면 되는 것이 아닌 UI를 이용하는 사람들의 의견이 더 중요하기에 고려할 필요가 있다. 간단한 탭 예제를 만들어 기록용으로 남겨놔야지..    See the Pen..

CSS나 디자인도 접해볼 겸 간단한 디지털 시계를 만들어봤다 네이버 홈페이지에 보이는 디지털 시계에서 착안한건데, 색 감각부터 익혀봐야 될거같다.. 색에 효과 입혀봤는데 단색보다 좀 더 괜찮아 보이긴하네 아휴 어렵다 See the Pen digital Time by bbongsu (@bbongsu) on CodePen.

See the Pen Untitled by bbongsu (@bbongsu) on CodePen. 프린트 버튼 누르면 인쇄창 불러올 수 있다. 홈페이지 필수요소라 해도 과언이 아니다

텍스트나 그림 등을 천천히 나타나는 효과를 가진 함수다 이미지로 하면 홈페이지가 제법 있어보인다(?) 해당 효과를 주고싶은 요소에 display:none; 속성을 줘서 안보이게 하고.. fadeIn() 함수를 사용해서 글씨를 서서히 나타나게 할 수 있다. fadeIn()에 숫자가 기입돼있는데 이건 몇 초 안에 다 보이게 해줄거냐 라는 의미다. 여기서 준 1000은 1초다 See the Pen Fade In Effect by bbongsu (@bbongsu) on CodePen.

간단하게 메인 페이지 포트폴리오 하나 만들려는 과정에서 뭐가 좋을까.. 찾아보다가 글자가 하나씩 나타나는 타이핑 효과가 있어서 이걸 적용시켜볼까 했다. 코드는 다음과 같다 See the Pen Untitled by bbongsu (@bbongsu) on CodePen. 이런식으로 가능한데 글자 옆에 커서 효과를 첨가 해주면.. 키보드로 타이핑한것 처럼 효과를 줄 수 있다