inline inline 요소는 width와 height값 지정을 무시한다. margin과 padding(콘텐츠와 요소 테두리 사이의 거리를 정의)은 좌우만 반영된다. span, a 등이 inline 요소에 속한다. (그냥 한 줄에 같이 들어가는 요소라고 생각하면 편하다.) block 혼자 한 줄을 차지하는 것이 block이다. 대표적으로 div가 있다. inline-block inline요소를 block으로 쓰려면 display: inline-block을 해주면 된다. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 그러나 block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다. bu..
WAI-ARIA, 웹 표준과 웹 접근성에 대하여 위로 가는 버튼을 구현하려다 웹표준과 접근성에 대해 공부하게 되었다 발단은 2013년에 올라온 이 글 "원래 HTML 코딩할 때 주던 방식은 맨 위로 간단히 이렇게 했었다. 그러나, 저렇게 써 주면 접근성 오류는 물론이고 웹표준 프로그램 돌리면 링크 오류 뜬다. 태그에 #기호를 쓰기 때문에 웹표준 오류!" 와 은 기본 동작과 기능 뿐 아니라 키보드 인터랙션도 다르므로 키보드 사용자와 스크린리더 사용자에게 혼동을 가져온다. 링크와 버튼은 다른 요소로 마크업을 해야 하고, 같은 기능은 동일한 요소로 시맨틱하게 마크업해야 한다. 버튼은 사용자가 양식을 제출해야 하거나, 팝업을 열거나, 동작을 실행 또는 취소 등 이벤트를 트리거할 때 사용하는 위젯으로 엔터키와 스..
2~3년차 비전공자 개발자들의 조언을 찾아보면, 그쯤 되어 컴공 기초의 필요성을 느껴서 공부하게 된다는 얘기가 많다. 그래서 정보처리기사 공부를 하면서 겸사겸사 컴공 기초 공부를 하기로 목표를 잡았다. 솔직히 따로 하려고 하면 의지력을 너무나도 많이 끌어내야 할 것 같은 공부라서 정처기 시험에 아주 감사했다. 정처기 시험에서 다루는 것 새로 개편된 정처기 시험에서 주요하게 다루는 것은 소프트웨어의 개발 단계(계획부터 유지보수까지)이다. 그 과정에서 필요한 개발 방법론, DB, SQL, 자료구조, 알고리즘, 테스트 방법론, 프로그래밍 언어, 운영체제, 네트워크, 보안 등을 배우게 된다. 책 커리어 스킬에서 제시하는 기본적으로 필요한 지식의 거의 대부분을 담고있기에 컴공 기초 공부로 딱이었다. 1. 기초 다..
const player = { name: "enerG", points: 10, fat: true, }; console.log(player.name); // 1번째 방식 console.log(player["name"]); // 2번째 방식 Object에 존재하는 항목 추가 및 업데이트가 가능하다.
Function function sayHello() { console("Hey enerG! Cheer Up!"); // 이 안에 있는 요소를 반복해서 실행할 수 있다. } sayHello(); function에 data 보내기 function sayCheerUp(cheerName) { console.log("Hey " + cheerName + "! Cheer Up!"); } sayCheerUp("enerG"); // Hey enerG! Cheer Up! console.log(cheerName); // Undefined Place holder function plus(a, b) { console.log(a + b); } plus(8, 10); // 18 (a=8, b=10) function divide(f..
사이드바의 카테고리 목록 중, 현재 보고 있는 글이 속한 카테고리만 펼쳐지게 하고 싶었다. 1. HTML 바로 윗부분에 아래의 스크립트 삽입 sub_category_list 클래스는 카테고리의 세부 목록에 해당하는 클래스다. 펼쳐야 하는 카테고리는 해당 세부 목록이 있는 카테고리기에 해당 클래스를 변수로 선언해준다. 2. category-getter라는 css클래스를 '카테고리명이 들어가는 페이지'에 해당하는 HTML 부분에 넣어준다. 카테고리를 눌렀을 때 뜨는 '해당 카테고리의 글 목록' 페이지 : 상단의 카테고리 타이틀이 표시되는 부분 글을 눌렀을 때 볼 수 있는, '해당 글'의 페이지 : 상단의 카테고리가 표시되는 부분 이렇게 두 군데에 넣어주면 된다. 각각 해당하는 HTML 부분은 아래와 같다. ..
JavaScrispt에서 작업할 대부분의 일은, event를 listen하는 것이다. Event Basic element를 찾아라. event를 listen하라. event 발생 시 반응하라. event란? 예를 들어 click, mouse over, 입력을 끝냄, 내 이름을 적고 enter를 누름, wifi에서 접속이 해제됨 등 listen하고 싶은 event 찾는 방법 찾고싶은 element의 이름을 Web APIs MDN(Mozilla Developer Network)에 검색 JS 관점의 HTMLHeadingElement라는 의미 ex. h1 html element mdn console.dir로 입력해보기 : element의 내부를 보고싶을 때 사용 가능한 event들을 알려준다. 앞에 on이 붙은..
제목과 본문을 한 줄 띄워 분리하기 제목은 영문 기준 50자 이내로 제목 첫 글자를 대문자로 제목 끝에 . 금지 제목은 명령조로 부정문 Don't use (Not use가 아니라) Github - 제목(이나 본문)에 이슈 번호 붙이 (#번호) 본문은 영문 기준 72자마다 줄 바꾸기 본문은 어떻게보다 무엇을, 왜에 맞춰 작성하기 관사 사용 X 동명사보다 명사를 사용 커밋 메시지 구조 type: Subject body footer TYPE 프로젝트의 성격이나 상황에 맞춰서 적절하게 골라서 사용할 것. fix, docs, style, refactor, test, chore의 타입을 기본으로 하고, feat를 사용하거나 new, improve를 사용하는 것 중 하나를 선택하고, 릴리스에 대한 별도의 커밋을 남기..
정보처리기사용으로 정리한 내용입니다. 유데미 김왼손님 파이썬 강의를 듣고 정리했습니다. 문자열 다루기 인덱스로 문자 가져오기 일반적인 방법처럼 0부터 시작하는 인덱스로도 가져올 수 있다. 음수를 인덱스로 가져올 수도 있다. (뒤에서부터 시작한다) 문자열 슬라이싱 (여러개의 문자 가져오기) 앞의 숫자부터 뒤의 숫자 바로 전까지의 문자를 가져온다. 기존 문자열(원본)은 그대로 두고 복사해서 사용하는 것. 메소드 split() 메소드 문자열에만 사용할 수 있다. 아무것도 안 들어있으면 공백을 기준으로 나눈다 format() 문자열을 자유롭게 표현하기 위해 사용하는 메소드 중괄호 안에 format안의 값을 넣어준다. 여러 값을 넣어줄 수도 있고 콤마로 구분한다. 순서대로 넣어준다. C의 퍼센트 연산자도 그대로 ..
