컴퓨터 IT
CSS background 꽉차게 넣는 방법
CSS background 꽉차게 넣는 방법
2022.12.12이번 포스트에서는 CSS background 프로퍼티를 다룹니다. CSS background #overview{ background: url("css.jpg"); width: 100%; height: 528px; padding: 10px; margin-top: 43px; position: relative; } background는 background-color, background-image, origin, size, repeat 등 모든 background와 관련된 프로퍼티를 설정할 수 있는 프로퍼티입니다. background에 url로 background 이미지를 설정했다면, 아래 사진처럼 여러 번 반복됩니다. 이때의 background의 역할은 background-image인 것이죠. 참고로 아래 ..
자바스크립트 getElementById, querySelector 차이점
자바스크립트 getElementById, querySelector 차이점
2022.12.11이번 포스팅에서는 getElementById와 querySelector 차이점에 대해서 알아보려고 합니다. 클론 코딩을 하는 중에 lementById를 쓸 때도 있고, querySelector을 쓸 때도 있는데, 쓰임이 다른 이유가 궁금했습니다. Black Box Blue Box getElementById() getElementById를 사용하면 넘겨받은 문자열과 같은 id를 가진 idelement object를 반환합니다. ID는 단 하나의 유일한 값이기 때문에 getElementById를 사용하면 특정한 element에 접근할 수 있습니다. 하지만 모든 element가 Id값을 가지는 것은 아니므로, id 값이 없는 경우에 querySelector()를 사용하여 element를 찾을 수 있습니다. g..
자바스크립트 static의 모든 것
자바스크립트 static의 모든 것
2022.12.03자바스크립트 Class 실습하다가 문득 static이 무엇인지 궁금해졌습니다. APP 클래스를 만들고, APP 클래스를 시작하기 위해 App.init()을 하는데, 여기에 사용된 static 개념을 정리하는 글을 작성해 봅니다. class App { static init() { } } App.init(); 자바스크립트 static static 키워드는 정적 메서드(static method)나 정적 프로퍼티(ststic property)를 정의하기 위해 사용합니다. static으로 만들어진 메서드, 프로퍼티는 클래스의 인스턴스에서 호출될 수 없고, 클래스 자체에서 호출될 수 있습니다. class App { static init() { console.log("static init called"); } } /..
자바스크립트 클래스 Class의 모든 것
자바스크립트 클래스 Class의 모든 것
2022.11.30OOP(Object Oriented Programming) 객체 지향 프로그래밍을 배울 때 꼭 따라오는 것이 클래스(Class)입니다. Class는 Object 객체의 청사진과 같은 역할을 하기 위해 사용합니다. 청사진, 미래에 대한 희망적인 계획이나 구상을 의미하는데, 코드를 짤 때 Object가 어떤 프로퍼티(property)와 메서드(method)를 가질지 미리 구상한다는 의미입니다. 자바스크립트 클래스 클래스 생성 자바스크립트에서 클래스를 생성하려면 class 키워드를 사용하면 됩니다. 이때 클래스 선언문은 사용하기 전에 정의되어 있어야 합니다. 먼저 사용했으면 referenceError가 발생할 수 있어요. constructor 메서드는 클래스에서 단 한 번만 사용해야 하며, 다수의 constr..
HTML 시맨틱 태그의 모든 것 Semantic Tag
HTML 시맨틱 태그의 모든 것 Semantic Tag
2022.11.27HTML 시맨틱 태그 뜻 시맨틱 태그 (Semantic tag)의 의미는 '의미를 가지고 있는 tag'를 의미합니다. Semantic을 네이버 영어 사전에 찾아봤을 때, Semantic은 '의미의, 의미론적인' 의미를 가지고 있으니, 시맨틱 태그는 의미가 있는 태그를 말합니다. 여기서 의미라는 것은 태그가 어떤 내용을 가지고 있는지 알려준다는 의미입니다. 검색이 중요한 시대에서 브라우저가 검색 내용을 찾을 때, 태그를 보고 내용이 중요한지 아닌지 구분할 수 있게 해주는 지표라고 생각하면 됩니다. 시맨틱 태그 종류 시맨틱 요소(elements) article aside details figcaption figure footer header main mark nav section summary 각 요소들은 ..
자바스크립트 배열 중간에 값 추가하기 splice()
자바스크립트 배열 중간에 값 추가하기 splice()
2022.11.21자바스크립트에서 배열을 다루다 보면 배열 중간에 값을 추가하고 싶을 때가 있기 마련입니다. 이 포스팅에서는 배열을 수정해주는 splice 메서드와 splice 메서드를 사용할 때 함께 쓰면 좋은 메서드를 다룹니다. splice() 메서드는 배열이 가지고 있는 내용을 삭제하거나 기존 값을 바꿀 때, 또는 새로운 값을 넣고 싶을 때 사용하는 메서드입니다. 사용 방법은 아래와 같습니다. splice(시작 인덱스 지정, 시작 인덱스부터 삭제하고 싶은 항목의 수, item1 ,..., itemN 삭제된 부분에 추가하고 싶은 값) Splice 사용 전 알면 좋은 메서드 Array.from() 만약에 문자열 splice를 사용하려면, Array.from을 사용하면 됩니다. Array.from() 메서드는 iterab..
Javascript for 반복문 정리
Javascript for 반복문 정리
2022.11.19이번 포스트에서는 Javascript for 문 정리를 다룹니다. 기본적인 for부터 for in, for of를 다룹니다. Javascript for 문 정리 Javascript는 다양한 종류의 for 문을 지원합니다. for 코드 블록을 여러 번 반복하는 루프 for in 객체(object)의 프로퍼티(property)를 반복하는 루프 for of 객체(object)의 값(value)을 반복하는 루프 { key : value}로 구성되어 있다면 for in을 사용하고, [1,2,3] 배열이라면 for of를 사용하면 되겠구나 이해하면 됩니다. Javascript for 예시 for(표현식1 ; 표현식 2; 표현식 3){ console.log("hi"); 코드 block; } for(let i = 0;..
CSS 구글 폰트 적용 방법
CSS 구글 폰트 적용 방법
2022.11.17CSS에서 폰트를 바꾸고 싶을 때 google font를 사용할 수 있습니다. 이번 포스트에서는 구글 폰트에서 링크를 받고, HTML 파일에 적용하고, CSS 파일에서 폰트를 사용하는 방법을 다룹니다. 구글 폰트 적용하는 방법 구글 폰트를 적용하고 싶다면 구글 폰트 웹 사이트에 접속합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Google Fonts 웹 사이트에 접속하고, 적용하고 싶은 fonts를 검색합니다. 사용하고 싶은 폰트 고르는 방법 저는 예시로 Signika Negative라는 폰트를 적용해보고자 합니다. ..
Javascript DOM 요소 삭제 방법
Javascript DOM 요소 삭제 방법
2022.11.14이번 포스트는 Javascript DOM element(요소)를 추가, 삭제하는 방법을 다룹니다. DOM은 Document Object Model 즉, 문서 객체 모델입니다. DOM은 노드와 객체로 문서를 구성하고, 프로그래밍 언어(Javascript)가 페이지 간에 상호작용할 수 있도록 도와주는 역할을 합니다. DOM은 프로그래밍 언어가 아니지만, DOM이 없다면 JS는 웹페이지, 요소와 관련된 모델 정보를 갖지 못합니다. Javascript Node, Element 차이 DOM 관련 문서를 읽다가 Node와 element의 차이점도 알아두면 좋을 것 같아 내용을 추가합니다. Node는 document에 있는 모든 객체(object)를 의미합니다. HTML 문서에는 element node, text n..
CSS 추가하는 3가지 방법
CSS 추가하는 3가지 방법
2022.11.13이번 포스트에서는 CSS를 추가하는 3가지 방법을 다룹니다. CSS를 추가하는 방법으로는 첫 번째, 인라인 스타일링(inline style), 두 번째 head 태그에 style 태그를 추가해서 넣는 방법, 세 번째로 CSS 파일을 만들어 연결해주는 방법이 있습니다. CSS 의미? CSS를 적용하기 전에 CSS의 의미를 먼저 보고 넘어가려고 합니다. CSS는 Cascading Style Sheets를 의미합니다. 여기서 Cascading은 네이버 영어 사전의 뜻으로 '1. 작은 폭포 2. 폭포처럼 흐르다 3. 풍성하게 늘어지다' 뜻을 가집니다. 즉, 여러 규칙이 같은 요소에 적용됨을 의미합니다. F12 크롬 개발자 도구 style 칸에서 casecading을 확인할 수 있는데요, 아래 캡처 사진처럼 하나..
자바스크립트 배열 생성, 추가, 삭제 방법
자바스크립트 배열 생성, 추가, 삭제 방법
2022.11.12자바스크립트에서 배열(Array)을 사용하면 데이터를 조금 더 간단하고 깔끔하게 표현하고 저장할 수 있습니다. 이번 포스트는 자바스크립트에서 배열을 생성하는 방법, 생성된 배열에 새로운 값을 추가하는 방법, 기존 배열에 있는 값을 삭제하는 방법을 다룹니다. 자바스크립트, 배열은 무엇인가? 자바스크립트에서 배열은 Object와 같은 리스트를 의미합니다. 실제로 F12키를 눌러서 나오는 console에서 배열을 생성하고, typeof를 했을 때 반환하는 값도 Object입니다. 배열은 다양한 값을 보관해주는 하나의 object를 의미합니다. 다른 변수와 다른 점은 배열을 사용하면 각각의 값에 접근할 수 있고, for 문이나 배열 함수를 이용해서 각 값을 효율적으로 연산할 수 있습니다. 배열이 없다면, 값을 ..
파이썬 리스트 입출력, 초기화의 모든 것
파이썬 리스트 입출력, 초기화의 모든 것
2022.11.04C언어로 알고리즘 문제를 풀다가 파이썬 알고리즘 문제를 풀 때 마주치는 큰 벽 중 하나가 리스트(list)라고 생각합니다. a=[1,2,3,4] 이런 식으로 사용하면 되고, 슬라이싱 a [1: 3] 배울 때만 해도 나름 간단하다고 생각되지만, 코딩 문제에서 2차원 배열을 만드는 문제를 만나고, 입력이 특이한 알고리즘 문제를 만나면 공부를 쉬고 싶어 지는데요, 그래서 이번 포스팅에서는 파이썬 리스트 입출력, 초기화의 모든 것을 다룹니다. 파이썬 리스트 입출력, 초기화 정리 우선 이 포스팅에서 다룰 내용은 다음과 같습니다. 1. 리스트 생성 2. 입출력과 리스트 (1차원, 2차원) 파이썬 리스트 생성 파이썬에서 리스트를 생성하는 방법으로 2가지 방법이 있습니다. 첫 번째는 대괄호 []로 선언하는 방법이 있고..