최근에 프로젝트를 하면서 웹 접근성을 하나씩 뜯어보면서 궁금한 부분이 있어서 정리를 하는 느낌으로 블로그에 포스팅을 하고 있습니다. 토글 및 아코디언 메뉴에서 접근성 코드가 들어..
자바스크립트 ES6에서 백틱 (` `)을 은근히 많이 사용됩니다. 윈도우 PC에서는 백틱키가 숫자 1번 좌측에 ~키와 같이 배치가 되어 누르면 작성이 가능했지만, 맥(mac) 전용 키보드에서는 백틱을 찾지 못하면서 당..
정말 오랜만에 쓰는 퍼블리셔 일기입니다. 다음 주가 되면 이제 300일이 되어갑니다. 작년에는 그래도 프로젝트도 많이 경험하면서 참으로 감사한 한 해였습니다. 일단, 취업도 됐으니까..! 그러면서 2022년에는..
기존에 img 태그를 통해서 이미지를 삽입하는 방법도 있지만, HTML 요소 뒤에 배경 이미지를 넣는 방법이 있습니다. 바로 CSS의 background-image 속성입니다. 전체 페이지부터 부분적으로 배경이미지를 설정할 수..
여러 요소를 배치하려면 각 요소들의 너비 값을 기준으로 해야합니다. width, height 속성 값이 컨텐츠 영역의 너비와 높이만 나타내게 되는데, 여기에서 padding이나 border를 설정했다면..
box-shadow는 그림자 속성입니다. 이미지부터 감싸는 div 등 전체를 지정하는 것에 따라 넣을 수 있습니다. box-shadow의 속성 값에 따라 그림자의 위치부터 흐림, 번짐, 심지어 색상까지..
일반적으로 box-model을 만들고, 테두리 값을 넣게 되면 딱딱하게 라인이 생기게 됩니다. 조금 더 부드럽고, 둥글게 할 수 있는 border-radius 입니다. 간단하면서도 정말 많이 사용되고 있는 CSS입니다. border-..
jQuery는 1.9 버전 이전에 작성된 코드와 작성된 코드 간의 호환성에 이슈가 있습니다. 이러한 호환성 문제를 해결하기 위해서 사용하는 플러그인이 바로 jQuery Migrate입니다. 최신 버전..
chart.js는 생각보다 어렵지 않습니다. 생각보다 단조롭고, 싱글 데이터값부터 멀티 데이터값까지 다양하게 넣을 수 있는 장점이 있습니다. 그동안 chart.js에 대해 많이 쫄아(?)있었지만, 생각보다 어렵지 않게..
정말 오랜만에 글을 쓰게 되었습니다. 거의 두 달 만에 글을 쓰게 되면서 그간 있었던 것 중에 가장 많이 했던 제 실수부터 잘 놓치는 부분을 크게 3개를 써봤습니다. 계속해서 프로..
뭐 별일은 아니었습니다. 어떻게 생각하면 당연하고, 당연하고 당연한 일이었는데.. 구두로 내용들을 전달하고 하는 부분이 문제가 터졌습니다. 뭐 터질일이 터졌다고 생각하고 있기 때문에 누구를 탓하겠습니까...
정말 오랜만에 글을 쓰는 것 같습니다. 현재 프로젝트를 하면서 오픈이 얼마 남지 않았고, 그에 따른 야근이 필수로 하게 되면서 많은 내용들이 오고 가고 하는 것에 느끼는 것이 많았습니다. 현재 제 경우에는 9..
웹 사이트를 보다보면 셀렉트박스나 콤보 박스 등에서 이런 모양의 삼각형이 가끔 나오는데, 이미지 파일로도 쉽게 가능하지만, CSS로도 충분히 표현이 가능한데 이번에 소개하려고 하..
무더운 여름이 왔지만, 그런 것을 느끼지 못할 정도로 엄청나게 바쁘게 100일하고도 4일이 더 지났습니다. 이 중간에 자바스크립트 책도 구매하고, 공부를 정말 나노(?)만큼 공부를 하고 있지만 티끌모아 태산이..
요즘에는 레이아웃을 잡는 방법이 display: flex를 이용하여 다양한 방법으로 하지만, 그래도 아직까지는 IE를 대응해야하기 때문에 float을 사용하는 방법을 그래도 알고 있어야 합니다. (뼈저리게 느끼고 있습...
다른 웹 페이지를 작업하면서 반응형을 고려한 시안들이 계속해서 넘어오고 있습니다. 아무래도 많은 웹 페이지 작업을 해야 저 역시도 성장할 것이라고 생각하는데.. 그건 그거고! 이제 디자인에서 넘어오는 시..
2단으로 게시물들을 작업할 때 li 태그로 작업하는 방법도 있지만, table 태그로 th와 td로 사용하는 방법도 있습니다. 그러면서 의문도 생겼습니다. tbody를 여러 번을 줘야하는 경우가..
이전 51일차에 썼던 부분에서 프로젝트를 마무리하지 못해서 너무 아쉬운 마음에 포스팅을 했었습니다. 그래도 다음 프로젝트가 잡히면서 조금은 안심을 하게 되었습니다. 그래도 프로젝트가 성사되고, 진행하다..
이제 입사한지 50일이 조금 넘었습니다. 첫 프로젝트는 아쉽게 보내게 되었지만, 이러한 시간을 부족했던 공부를 할 수 있게 된 것으로 위안(?)을 삼게 되었습니다. 같은 회사 직원분들, 그리고 학원 동기들은 프..
이제 퍼블리셔로 근무한지 50일이 되었습니다. 진행하던 프로젝트는 아쉽게도 조기에 종료(?)가 되면서 패잔병 모드로 쓸쓸하게 보내고 있었습니다. 그래도 제 역량을 꾸준하게 업그레이드 하기 위해서는 다양한..
CSS 작업을 하다가 요소를 선택하는데, 적용이 되지 않았던 적이 몇 번 있었습니다. 그런데 그런 부분이 CSS 선택자에 대한 부분이란 걸 알았고, CSS 선택자에도 점수가 존재한다는 것을 알게 되면서 조금 찾아보..
이번에 정리를 하는 내용은 리액트를 시작하게 되었습니다. 제 경우에는 집에서 작업을 하는 환경은 Window PC를 이용하고 있고, 실제 업무로는 mac을 이용하고 있습니다. 아무래도 저는 더욱 친숙한 window로 리..
벌써 웹 퍼블리셔로 입사해서 1개월차가 되었습니다. 중고신인으로서 조금 공부를 많이 해야되는 부분이 절실하게 느껴지는 시기가 바로 2주에서 1개월차가 아닐까 싶습니다. 조금 재밌는 것은 현재 파견을 나오게..
오늘로 출근 6일차가 되는 날이었습니다. 출근 첫날 부터 금요일까지는 계속해서 기존에 만들어졌던 포토샵 시안으로 웹페이지를 제작했었는데, 오전에는 업무가 주어진다고 하여 대기를 하였는..
오늘은 table tag를 활용한 게시판을 마크업 하였습니다. 매번 Header쪽만 만들고, 메인페이지에만 힘을 썼었지만, 지금 제 포스팅을 보시고 취업 준비를 하신다면 꼭! 서브페이지에도 힘..
수료한 이후에 3개월 만에 어렵게 취업을 했습니다. 필자는 30대 중반, 적지 않은 나이라 굉장히 이 계열 쪽으로 계속해서 취업을 해야될지 고민하고 있던 찰라에 취업 인터뷰 관련으로 연락이 왔습니다. 일단 신..
4. 데이터타입 SASS Script는 7가지의 데이터 타입을 지원합니다. 데이터 타입은 아래와 같습니다. 1. 숫자형: number (ex: 1.2, 100, 150px) 2. 문자열: (ex: "SASS", 'SASS', SASS) 3. Co..
3. 변수 $ 기호 초반에 SASS 기초 정리를 하면서 변수 $ 기호를 사용한다고 작성 하였습니다. 가장 중요한 변수 처리이고, 변수를 잘 처리하면 더 용이하게 코드 작성을 할 수 있습니다. 변수에는 $ 기호를 사용합..
2. 주석 SASS 주석은 두 종류가 있습니다. 블록 주석과 인라인 주석이 있는데 아래와 같이 정리해봤습니다. 1. 블록 주석 /* comment */ -> 기존 CSS와 동일, 컴파일 되었을 때, CSS파일에 표기 1번 블럭 주석..
1. CSS 확장 중첩이란, 하나의 선택자의 하위 선택자 또는 자식 선택자가 있는 경우 중첩을 이용하면 많은 코딩을 하지 않고 편리하게 각 선택자에 속성을 지정해 줄 수 있습니다. 사이..
6. 연산자 SASS는 간단한 사칙연산이 가능합니다. +, -, *, / 그리고 %까지 처리가 가능합니다. 연산 기능은 CSS를 이용하여 레이아웃을 작업할 때 아주 편리하게 사용 가능합니다. 색상을 섞는 기능도 가능하고,..
5. 확장 / 상속 SASS에서는 확장과 상속을 통해 편리하고 비슷한 코드를 통합해 줄 수 있습니다. CSS의 속성은 위에서 아래로 적용됩니다. 동일한 속성값을 여러 번 변경하더라도, 결과값은..
3. 부분화 / 불러오기 SASS로 작업을 하다 보면 문장이 상당히 길어지고 복잡하게 되어 문장을 분리를 해야 조금 편하게 작업이 가능합니다. 문장을 분리하는 과정은 부분화라고 합니다. 부..
1. 변수 SASS에서도 반복적으로 많이 사용되는 부분입니다. 예를 들어 font 모양이나 색상, 스타일 등을 변수로 지정해 놓고 반복적으로 사용되는 값을 변수로 변경해주면 간단하게 CSS를 ..
현재 SASS를 공부하면서 내용을 정리하는 시간을 가져봤습니다. SASS는 컴파일러 프로그램을 설치한 후에 진행을 하였는데, 저는 Scout-App을 이용하여 SASS를 습득하고 있습니다. 1. SASS의 기초 일단, SASS(Syn..
영문 알파벳은 대문자와 소문자가 구분이 되어있는데, 전부 소문자나 대문자로 변환하는 방법이 있습니다. toLowerCase(), toUpperCase()로 구분이 되고, 이 메서드를 작성하게 되면 전부 소문자 혹은 대문자..
jQuery를 이용해서 좌측의 메뉴를 클릭할 때마다 SlideToggle 메서드를 이용해서 구현하려고 하였으나, 뭔지 모르게 갑자기 두번씩 SlideToggle이 발생되는 것을 보았습니다. $('셀렉터').on('click', function()..
이번에는 HTML 태그로 이메일 보내기 링크 사용방법입니다. mailto도 있지만, 제가 사용한 방법은 a태그를 이용하여 href에 있는 주소에서 추가적으로 기재하면 사용가능한 방법입니다. 일반적으로 사용하시는 메..
JavaScript에서 for문을 통하여 console에 0~10까지 카운트입니다. for(var i = 0; i <= 10; i++) { console.log(i); } - 변수 i로 0 선언 - i의 값이 10 이하이면 종료 - i의 값이 1씩 증가
현재 제가 작성하고 있는 이 블로그는 기술적인 것 보다도, 제 개인적인 작업 내용, 미진했던 공부, 반복적인 코드 작성을 원활하게 정리하는 내용, 이슈 등의 용도로 사용하려고 작성하..
이제 a태그를 통해서 페이지를 이동하게 되면, 최상단으로 가게 되는데 해당 문서에서 특정 위치나, 다른 페이지에서 특정 위치로 가는 방법이 있습니다. 물론, JS 등을 사용해서 이동하는 방법도 있겠지만, a태그..
제이쿼리로 현재 모바일 홈페이지를 과제로 하고 있습니다. 기존에는 데스크탑으로 탭메뉴를 구성하는 형태였고, ul 구조에 li가 4개로 하나씩 누를 때 마다 쉽게 변경되는 구조였습니다. 위의 코드는 누구나 구현..
jQuery를 공부하면서 메서드를 다시 하나씩 공부하기로 시작했습니다. codeit을 큰맘먹고 결제하면서 귀로 따고, 눈으로 보고, 예제 다시 만들고, 다시 처음으로 돌아가면서 하나씩 열심히 하기로 했습니다. 이번..
jQuery를 이용하여 아이디, 비밀번호란에 데이터를 입력 시에 로그인 버튼 배경 색상을 변경하는 방법입니다. - ID, 비밀번호 입력란에 text가 모두 입력이 되면, addClass('on')을 통해서 배경색이 pink로 변경..
주말 내내까지는 아니고, 주말에 조금씩 시간내서 시안을 만들었던 부분에서 카카오지도를 연결해서 회사 위치를 넣어야하는 부분이 있었습니다. (내가 만든건데도.. 참) 일단, 여러가지이면서 다양한 페이지들을..
갑자기 무슨 주식 정보냐고 의아할 수도 있지만, 현재 포트폴리오를 준비하는 과정에서 주가정보 페이지를 기입해야겠다고 마음을 먹어서 어떻게 구현하는지 궁금했습니다. 데이터 이런 부분에서는 논외이고....
최근 데스크탑 웹페이지 작업을 하면서 뒤로가기 버튼을 넣으면 조금 사용자가 편리하지 않을까 생각하고 고려하고, 심오하게 생각하고, 또 생각하고 하다가 넣게 되었습니다. 그런데 뒤로가기는 어떻게? href에..
지금 제가 공부하는 과목에서 데스크탑, 모바일 웹페이지를 제작하기 전에 웹시안을 먼저 만드는 것을 배우고 있습니다. 조금 헷갈려하는 부분이 있어서 초반에 수정과 또 수정, 그리고 또 수정을 반복하는 삽질(?..
일단, 제 소개를 간단하게 하자면, 30대 중반에 운영업무를 쭉하다가 어렵게 직종을 전환할 생각을 한 퍼블리셔 희망하는 유저입니다. 처음에 도전하기 전까지는 "음~ 난 아직 젊어" 이랬는데.. 막상 뚜껑을(?)..