개발자가 되고 싶어서 만든 tistory 개발자가 되고 싶어서 만든 tistory

8월 25일 입사하여 이제 한 달이 다 되어간다. 하는 업무는 계속 교육, 교육, 교육. 오늘은 프로토콜 TCP/IP에 대한 교육을 들었고, 다음주는 현 회사의 프로그램 통신에 관한 심화 과정 교육이 있다.!! (계속 긴장 긴장) - 입사 때 학력! 2년제 졸업, 3년 경력으로 인정(6년이지만 관력직종이 아니므로 2/6 =3년 인정) 연봉 상승을 위해 노력 중인것!! 1. 10월 16일에 정처기 실기를 합격해야 한다!! 2. 방통대 3학년 재학중인데, 졸업을 하여 4년제 학위 취득해야 한다. 3. 정보통신 기사 자격증을 취득한다.(정처기 취득 후) 4. c, c# 프로그래밍 언어 공부를 놓지 않는다. -> 내일배움 알아보기(2022년) 5. 회화 영어공부 하기 -> 이미 많은걸 하고 있어서 어떻게 시작해..

focus와 blur 사용자가 폼 요소를 클릭하거나 Tab 키를 눌러 요소로 이동하면 해당 요소가 포커스(focus)됩니다. autofocus라는 HTML 속성을 사용해도 요소를 포커스 할 수 있는데 이 속성이 있는 요소는 페이지가 로드된 후 자동으로 포커싱 됩니다. 이 외에도 요소를 포커싱(focusing)할 수 있는 방법은 다양합니다. 요소를 포커싱한다는 것은 일반적으로 '여기에 데이터를 입력할 준비를 하라’는 것을 의미하기 때문에 요소 포커싱이 이뤄지는 순간엔 요구사항을 충족시키는 초기화 코드를 실행할 수 있습니다. 요소가 포커스를 잃는 순간(blur)은 요소가 포커스를 얻는 순간보다 더 중요할 수 있습니다. 사용자가 다른 곳을 클릭하거나 Tab 키를 눌러 다음 폼 필드로 이동하면 포커스 상태의 요..

HTML 코드 javascript 코드 : 클릭하면 className 이 추가되고, 삭제되는 코드 const gnbButton = document.querySelector(".gnb_btn") gnbButton.addEventListener('click', function(){ if(gnbButton.classList.contains('gnb_btn_active')){ gnbButton.classList.remove('gnb_btn_active') } else{ gnbButton.classList.add('gnb_btn_active') } }); css 코드 gnb_btn 기본으로 보여지는 css (햄버거 모양) .gnb_btn button{ background: black; width: 40px; he..

:before :after 가상선택자는 꾸밈을 위해서 의미없는 태그를 더 추가해야 될 때, 태그 대신에 가상으로 처리해 주는 쓸모 많은 css 기능입니다. 만일 html 구조에서 필요한 내용이라면 가상선택자로 만들면 안되겠죠~ 어떤 사항일 때 css 가상선택자를 사용하나요? 의미없는 태그를 쓰지 않도록 도와줌, 태그 최소화. 목록형 꾸밈 버튼 꾸밈 간단한 아이콘 만들기(닫기버튼, 화살표 등) ** 도형을 만들 때 주의할 점: 보여지는 픽셀두께가 세밀하지 않기 때문에 비주얼적으로 중요한 아이콘이면 이미지를 쓰는 것을 추천 이미지 아이콘을 넣고 싶을 때 꾸밈 한글을 넣고 싶을 때 (tag의 #, 또는 콤마 등) :before 해당 태그의 앞에 놓여진다. :after 해당 태그의 다음 위치에 놓여진다. con..

@keyframes @keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다. @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }Copy to Clipboard @keyframes @규칙은 CSS 오브젝트 모델 인터페이스인 CSSKeyframesRule (en-US)를 통해서 접근합니다. 키프레임을 사용하려면 @keyframes 룰을 애니메이션과 키프레임 리..

의사선택자 중 하나인 :not() 선택자의 기능과 사용방법에 대하여 알아보겠습니다. :not 선택자는 이미 지정된 css 스타일에서 특정한 요소를 데외시킬 경우 사용합니다. 일반적으로 선택자는 선택을 하지 않기위해 사용하지만 이 경우는 선택을 하지 않기 위해서 사용합니다. :) 이 선택자를 알아두면 활용할 부분이 매우 많기 때문에 굉장히 유용합니다. 아래는 가장 기본적인 사용방법입니다. 선택할 요소:not(제외시킬 요소) { ... } 보시는 것과 같이 소괄호안에 원하는 태그를 넣어주면 됩니다. 아래는 간단한 사용 예제입니다. # :not()선택자 예제 소스 보기 아래 예제는 disabled 클래스명을 가지고 있는 경우 폰트를 회색으로 변경하는 코드 예제입니다. working px;"> not worki..

이 글은 CSS 속성 중 하나인 vertical-align 을 다룬다. 이미지와 텍스트를 통한 예제를 중점으로 글을 진행한다. 이 속성을 어떤 원리로 되는 지 모른 채 일단 사용했거나 혼란스러웠다면, 이 글은 유용할 것이다. 폰트 - https://mygumi.tistory.com/366 vertical-align - https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align vertical-align 속성은 MDN 공식문서에 간단하게 정의되어 있다. vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다. vertical-align 속성은 ie7 도 지원하는 거의 모든 브라우저에서 사용할 수 있..

CSS Unit (CSS 7가지 단위) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단할 수 있지만 새로운 문제에 봉착하게 되면 해결하기 어려울 수 있습니다. 웹은 항상 성장,변화하고 있고 새로운 해결방안 역시 계속 성장하고 있습니다. 그렇기 때문에 웹 디자이너와 프론트 엔드 개발자가 습득한 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다. 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다. 이 글에서는 이전엔 알지 못했던 몇 가지의 CSS 방법에 대해 알아보고자 합니다. 몇몇 수치 단위들은 픽셀이나 em과 비슷하지만 다른 방법에 대해 살펴보도록 합니다. rem(root em) 여러분에게 조금 익숙할 수..