weblin의 등록된 링크

 weblin로 등록된 티스토리 포스트 수는 49건입니다.

[웹 접근성] aria-expanded, 토글-아코디언 메뉴 속성값! [내부링크]

최근에 프로젝트를 하면서 웹 접근성을 하나씩 뜯어보면서 궁금한 부분이 있어서 정리를 하는 느낌으로 블로그에 포스팅을 하고 있습니다. 토글 및 아코디언 메뉴에서 접근성 코드가 들어..

맥Mac용 키보드에서 백틱 입력 방법 [내부링크]

자바스크립트 ES6에서 백틱 (` `)을 은근히 많이 사용됩니다. 윈도우 PC에서는 백틱키가 숫자 1번 좌측에 ~키와 같이 배치가 되어 누르면 작성이 가능했지만, 맥(mac) 전용 키보드에서는 백틱을 찾지 못하면서 당..

[웹 퍼블리셔 293일차] 여러분의 새해 계획은 뭔가요? [내부링크]

정말 오랜만에 쓰는 퍼블리셔 일기입니다. 다음 주가 되면 이제 300일이 되어갑니다. 작년에는 그래도 프로젝트도 많이 경험하면서 참으로 감사한 한 해였습니다. 일단, 취업도 됐으니까..! 그러면서 2022년에는..

[CSS] 배경이미지를 넣어보자! background 추가 속성들! [내부링크]

기존에 img 태그를 통해서 이미지를 삽입하는 방법도 있지만, HTML 요소 뒤에 배경 이미지를 넣는 방법이 있습니다. 바로 CSS의 background-image 속성입니다. 전체 페이지부터 부분적으로 배경이미지를 설정할 수..

[CSS] box-sizing, 테두리까지 포함 시키는 방법! [내부링크]

여러 요소를 배치하려면 각 요소들의 너비 값을 기준으로 해야합니다. width, height 속성 값이 컨텐츠 영역의 너비와 높이만 나타내게 되는데, 여기에서 padding이나 border를 설정했다면..

[CSS] box-shadow, 그림자를 넣어보자! [내부링크]

box-shadow는 그림자 속성입니다. 이미지부터 감싸는 div 등 전체를 지정하는 것에 따라 넣을 수 있습니다. box-shadow의 속성 값에 따라 그림자의 위치부터 흐림, 번짐, 심지어 색상까지..

[CSS] 모서리를 둥글게! border-radius [내부링크]

일반적으로 box-model을 만들고, 테두리 값을 넣게 되면 딱딱하게 라인이 생기게 됩니다. 조금 더 부드럽고, 둥글게 할 수 있는 border-radius 입니다. 간단하면서도 정말 많이 사용되고 있는 CSS입니다. border-..

jQuery Migrate 플러그인 [내부링크]

jQuery는 1.9 버전 이전에 작성된 코드와 작성된 코드 간의 호환성에 이슈가 있습니다. 이러한 호환성 문제를 해결하기 위해서 사용하는 플러그인이 바로 jQuery Migrate입니다. 최신 버전..

chart.js를 살짝 익혀봅시다 [내부링크]

chart.js는 생각보다 어렵지 않습니다. 생각보다 단조롭고, 싱글 데이터값부터 멀티 데이터값까지 다양하게 넣을 수 있는 장점이 있습니다. 그동안 chart.js에 대해 많이 쫄아(?)있었지만, 생각보다 어렵지 않게..

[웹 퍼블리셔 189일차] 결함과의 싸움! [내부링크]

정말 오랜만에 글을 쓰게 되었습니다. 거의 두 달 만에 글을 쓰게 되면서 그간 있었던 것 중에 가장 많이 했던 제 실수부터 잘 놓치는 부분을 크게 3개를 써봤습니다. 계속해서 프로..

[웹 퍼블리셔 127일차] 항상 히스토리를 남겨두자! [내부링크]

뭐 별일은 아니었습니다. 어떻게 생각하면 당연하고, 당연하고 당연한 일이었는데.. 구두로 내용들을 전달하고 하는 부분이 문제가 터졌습니다. 뭐 터질일이 터졌다고 생각하고 있기 때문에 누구를 탓하겠습니까...

[웹 퍼블리셔 125일차] 커뮤니케이션을 잘해야 한다! [내부링크]

정말 오랜만에 글을 쓰는 것 같습니다. 현재 프로젝트를 하면서 오픈이 얼마 남지 않았고, 그에 따른 야근이 필수로 하게 되면서 많은 내용들이 오고 가고 하는 것에 느끼는 것이 많았습니다. 현재 제 경우에는 9..

[CSS] 삼각형을 조금 더 쉽게, 만들어보자! (css 트라이앵글 제네레이터) [내부링크]

웹 사이트를 보다보면 셀렉트박스나 콤보 박스 등에서  이런 모양의 삼각형이 가끔 나오는데, 이미지 파일로도 쉽게 가능하지만, CSS로도 충분히 표현이 가능한데 이번에 소개하려고 하..

[웹 퍼블리셔 104일차] 여전히 어렵고, 어렵고, 어렵다 [내부링크]

무더운 여름이 왔지만, 그런 것을 느끼지 못할 정도로 엄청나게 바쁘게 100일하고도 4일이 더 지났습니다. 이 중간에 자바스크립트 책도 구매하고, 공부를 정말 나노(?)만큼 공부를 하고 있지만 티끌모아 태산이..

[CSS] 여전히 헷갈린 Float 해제 방법을 정리! [내부링크]

요즘에는 레이아웃을 잡는 방법이 display: flex를 이용하여 다양한 방법으로 하지만, 그래도 아직까지는 IE를 대응해야하기 때문에 float을 사용하는 방법을 그래도 알고 있어야 합니다. (뼈저리게 느끼고 있습...

[웹 퍼블리셔 73일차] PSD 시안에서 홀수 작업은 어렵다. [내부링크]

다른 웹 페이지를 작업하면서 반응형을 고려한 시안들이 계속해서 넘어오고 있습니다. 아무래도 많은 웹 페이지 작업을 해야 저 역시도 성장할 것이라고 생각하는데.. 그건 그거고! 이제 디자인에서 넘어오는 시..

[html] tbody 여러 번 사용할 수 있다 [내부링크]

2단으로 게시물들을 작업할 때 li 태그로 작업하는 방법도 있지만, table 태그로 th와 td로 사용하는 방법도 있습니다. 그러면서 의문도 생겼습니다. tbody를 여러 번을 줘야하는 경우가..

[웹 퍼블리셔 67일차] 다음 프로젝트를 기다리면서 [내부링크]

이전 51일차에 썼던 부분에서 프로젝트를 마무리하지 못해서 너무 아쉬운 마음에 포스팅을 했었습니다. 그래도 다음 프로젝트가 잡히면서 조금은 안심을 하게 되었습니다. 그래도 프로젝트가 성사되고, 진행하다..

[웹 퍼블리셔 51일차] 나를 되돌아볼 수 있는 시간이다! [내부링크]

이제 입사한지 50일이 조금 넘었습니다. 첫 프로젝트는 아쉽게 보내게 되었지만, 이러한 시간을 부족했던 공부를 할 수 있게 된 것으로 위안(?)을 삼게 되었습니다. 같은 회사 직원분들, 그리고 학원 동기들은 프..

[ETC] 웹 퍼블리싱 가이드의 필요성! [내부링크]

이제 퍼블리셔로 근무한지 50일이 되었습니다. 진행하던 프로젝트는 아쉽게도 조기에 종료(?)가 되면서 패잔병 모드로 쓸쓸하게 보내고 있었습니다. 그래도 제 역량을 꾸준하게 업그레이드 하기 위해서는 다양한..

CSS 선택자의 점수가 있다! (점수 환산표) [내부링크]

CSS 작업을 하다가 요소를 선택하는데, 적용이 되지 않았던 적이 몇 번 있었습니다. 그런데 그런 부분이 CSS 선택자에 대한 부분이란 걸 알았고, CSS 선택자에도 점수가 존재한다는 것을 알게 되면서 조금 찾아보..

[React] 리액트 컴포넌트를 만들어보고, 호출해보자! [내부링크]

이번에 정리를 하는 내용은 리액트를 시작하게 되었습니다. 제 경우에는 집에서 작업을 하는 환경은 Window PC를 이용하고 있고, 실제 업무로는 mac을 이용하고 있습니다. 아무래도 저는 더욱 친숙한 window로 리..

웹 퍼블리셔 입사 1개월차 생존기..!! (210512) [내부링크]

벌써 웹 퍼블리셔로 입사해서 1개월차가 되었습니다. 중고신인으로서 조금 공부를 많이 해야되는 부분이 절실하게 느껴지는 시기가 바로 2주에서 1개월차가 아닐까 싶습니다. 조금 재밌는 것은 현재 파견을 나오게..

출근 6일차, 본격적인 일정부터 다른 이야기 [내부링크]

오늘로 출근 6일차가 되는 날이었습니다. 출근 첫날 부터 금요일까지는 계속해서 기존에 만들어졌던 포토샵 시안으로 웹페이지를 제작했었는데, 오전에는 업무가 주어진다고 하여 대기를 하였는..

출근 둘째날, 그래도 쉽지 않았다. (와악, table 태그!) [내부링크]

오늘은 table tag를 활용한 게시판을 마크업 하였습니다. 매번 Header쪽만 만들고, 메인페이지에만 힘을 썼었지만, 지금 제 포스팅을 보시고 취업 준비를 하신다면 꼭! 서브페이지에도 힘..

드디어 취업 뽀개기, 취업 성공: 첫 출근 두둥! [내부링크]

수료한 이후에 3개월 만에 어렵게 취업을 했습니다. 필자는 30대 중반, 적지 않은 나이라 굉장히 이 계열 쪽으로 계속해서 취업을 해야될지 고민하고 있던 찰라에 취업 인터뷰 관련으로 연락이 왔습니다. 일단 신..

[SASS - SCSS] 2-4. 데이터 타입 [내부링크]

4. 데이터타입 SASS Script는 7가지의 데이터 타입을 지원합니다. 데이터 타입은 아래와 같습니다. 1. 숫자형: number (ex: 1.2, 100, 150px) 2. 문자열: (ex: "SASS", 'SASS', SASS) 3. Co..

[SASS - SCSS] 2-3. 변수 $ 기호 내용정리 [내부링크]

3. 변수 $ 기호 초반에 SASS 기초 정리를 하면서 변수 $ 기호를 사용한다고 작성 하였습니다. 가장 중요한 변수 처리이고, 변수를 잘 처리하면 더 용이하게 코드 작성을 할 수 있습니다. 변수에는 $ 기호를 사용합..

[SASS - SCSS] 2-2. 주석 내용정리 [내부링크]

2. 주석 SASS 주석은 두 종류가 있습니다. 블록 주석과 인라인 주석이 있는데 아래와 같이 정리해봤습니다. 1. 블록 주석 /* comment */ -> 기존 CSS와 동일, 컴파일 되었을 때, CSS파일에 표기 1번 블럭 주석..

[SASS - SCSS] 2-1. CSS 확장 내용정리 [내부링크]

1. CSS 확장 중첩이란, 하나의 선택자의 하위 선택자 또는 자식 선택자가 있는 경우 중첩을 이용하면 많은 코딩을 하지 않고 편리하게 각 선택자에 속성을 지정해 줄 수 있습니다. 사이..

[SASS - SCSS] 1-5. 연산자 내용 정리 [내부링크]

6. 연산자 SASS는 간단한 사칙연산이 가능합니다. +, -, *, / 그리고 %까지 처리가 가능합니다. 연산 기능은 CSS를 이용하여 레이아웃을 작업할 때 아주 편리하게 사용 가능합니다. 색상을 섞는 기능도 가능하고,..

[SASS - SCSS] 1-4. 확장 - 상속 내용 정리 [내부링크]

5. 확장 / 상속 SASS에서는 확장과 상속을 통해 편리하고 비슷한 코드를 통합해 줄 수 있습니다. CSS의 속성은 위에서 아래로 적용됩니다. 동일한 속성값을 여러 번 변경하더라도, 결과값은..

[SASS - SCSS] 1-3. 부분화-불러오기와 믹스인 내용 정리 [내부링크]

3. 부분화 / 불러오기 SASS로 작업을 하다 보면 문장이 상당히 길어지고 복잡하게 되어 문장을 분리를 해야 조금 편하게 작업이 가능합니다. 문장을 분리하는 과정은 부분화라고 합니다. 부..

[SASS - SCSS] 1-2. 변수와 중첩 내용 정리 [내부링크]

1. 변수 SASS에서도 반복적으로 많이 사용되는 부분입니다. 예를 들어 font 모양이나 색상, 스타일 등을 변수로 지정해 놓고 반복적으로 사용되는 값을 변수로 변경해주면 간단하게 CSS를 ..

[SASS - SCSS] 1-1. SASS 기초 (문법 구조) [내부링크]

현재 SASS를 공부하면서 내용을 정리하는 시간을 가져봤습니다. SASS는 컴파일러 프로그램을 설치한 후에 진행을 하였는데, 저는 Scout-App을 이용하여 SASS를 습득하고 있습니다. 1. SASS의 기초 일단, SASS(Syn..

[JavaScript] 대문자 - 소문자 변환 (toLowerCase, toUpperCase) [내부링크]

영문 알파벳은 대문자와 소문자가 구분이 되어있는데, 전부 소문자나 대문자로 변환하는 방법이 있습니다. toLowerCase(), toUpperCase()로 구분이 되고, 이 메서드를 작성하게 되면 전부 소문자 혹은 대문자..

[jQuery] 이벤트 중복 오류 해결 (이벤트가 두번 실행됩니다!) [내부링크]

jQuery를 이용해서 좌측의 메뉴를 클릭할 때마다 SlideToggle 메서드를 이용해서 구현하려고 하였으나, 뭔지 모르게 갑자기 두번씩 SlideToggle이 발생되는 것을 보았습니다. $('셀렉터').on('click', function()..

a태그로 구글 메일 보내기 바로 링크 (ft.Gmail) [내부링크]

이번에는 HTML 태그로 이메일 보내기 링크 사용방법입니다. mailto도 있지만, 제가 사용한 방법은 a태그를 이용하여 href에 있는 주소에서 추가적으로 기재하면 사용가능한 방법입니다. 일반적으로 사용하시는 메..

[JavaScript] 0~10까지 숫자 카운트 [내부링크]

JavaScript에서 for문을 통하여 console에 0~10까지 카운트입니다. for(var i = 0; i <= 10; i++) { console.log(i); } - 변수 i로 0 선언 - i의 값이 10 이하이면 종료 - i의 값이 1씩 증가

구글 서치콘솔 URL 검사 색인 요청 비활성화, 페이지 작업이 일시적으로 사용 중지됨? [내부링크]

현재 제가 작성하고 있는 이 블로그는 기술적인 것 보다도, 제 개인적인 작업 내용, 미진했던 공부, 반복적인 코드 작성을 원활하게 정리하는 내용, 이슈 등의 용도로 사용하려고 작성하..

a 태그 특정 위치로 이동하기 [내부링크]

이제 a태그를 통해서 페이지를 이동하게 되면, 최상단으로 가게 되는데 해당 문서에서 특정 위치나, 다른 페이지에서 특정 위치로 가는 방법이 있습니다. 물론, JS 등을 사용해서 이동하는 방법도 있겠지만, a태그..

[jQuery] 아...이런 siblings;; [내부링크]

제이쿼리로 현재 모바일 홈페이지를 과제로 하고 있습니다. 기존에는 데스크탑으로 탭메뉴를 구성하는 형태였고, ul 구조에 li가 4개로 하나씩 누를 때 마다 쉽게 변경되는 구조였습니다. 위의 코드는 누구나 구현..

[jQuery] attr()로 태그 속성 다룰 수 있습니다. [내부링크]

jQuery를 공부하면서 메서드를 다시 하나씩 공부하기로 시작했습니다. codeit을 큰맘먹고 결제하면서 귀로 따고, 눈으로 보고, 예제 다시 만들고, 다시 처음으로 돌아가면서 하나씩 열심히 하기로 했습니다. 이번..

아이디, 비밀번호 입력란에 로그인 버튼 색 변경하기 [내부링크]

jQuery를 이용하여 아이디, 비밀번호란에 데이터를 입력 시에 로그인 버튼 배경 색상을 변경하는 방법입니다. - ID, 비밀번호 입력란에 text가 모두 입력이 되면, addClass('on')을 통해서 배경색이 pink로 변경..

카카오지도 API 연결 성공기 [내부링크]

주말 내내까지는 아니고, 주말에 조금씩 시간내서 시안을 만들었던 부분에서 카카오지도를 연결해서 회사 위치를 넣어야하는 부분이 있었습니다. (내가 만든건데도.. 참) 일단, 여러가지이면서 다양한 페이지들을..

그래프, 이런건 어떻게 표현.. 어렵구나 [내부링크]

갑자기 무슨 주식 정보냐고 의아할 수도 있지만, 현재 포트폴리오를 준비하는 과정에서 주가정보 페이지를 기입해야겠다고 마음을 먹어서 어떻게 구현하는지 궁금했습니다. 데이터 이런 부분에서는 논외이고....

뒤로가기 액션에 대한 피드백 [내부링크]

최근 데스크탑 웹페이지 작업을 하면서 뒤로가기 버튼을 넣으면 조금 사용자가 편리하지 않을까 생각하고 고려하고, 심오하게 생각하고, 또 생각하고 하다가 넣게 되었습니다. 그런데 뒤로가기는 어떻게? href에..

웹디자인, 데스크탑 웹시안 간격에 대해서 배웠다! [내부링크]

지금 제가 공부하는 과목에서 데스크탑, 모바일 웹페이지를 제작하기 전에 웹시안을 먼저 만드는 것을 배우고 있습니다. 조금 헷갈려하는 부분이 있어서 초반에 수정과 또 수정, 그리고 또 수정을 반복하는 삽질(?..

현재 웹퍼블리셔라는 직업을 도전하고 있습니다. [내부링크]

일단, 제 소개를 간단하게 하자면, 30대 중반에 운영업무를 쭉하다가 어렵게 직종을 전환할 생각을 한 퍼블리셔 희망하는 유저입니다. 처음에 도전하기 전까지는 "음~ 난 아직 젊어" 이랬는데.. 막상 뚜껑을(?)..