일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- react-router-dom
- node
- github
- coding
- CSS
- 반응형 페이지
- webpack
- JS
- TypeScript
- JavaScript
- media query
- 코딩테스트
- 코드업
- 자바문제풀이
- redux
- cleancode
- git
- 그럼에도 불구하고
- 프론트엔드
- max-width
- react
- Servlet
- 그럼에도불구하고
- frontend
- HTML
- node.js
- @media
- 변수
- 자바
- java
- Today
- Total
목록그럼에도불구하고 (12)
그럼에도 불구하고
Tag에 대해 알아보겠습니다. 🧑🏻💻 Semantic Versioning Semantic version 지정 사양은 소프트웨어 release를 위한 표준화된 버전 지정 시스템을 설명합니다. 개발자가 소프트웨어 릴리스에 의미를 부여할 수 있는 일관된 방법을 제공합니다. 버전은 마침표로 구분된 세 개의 숫자로 구성됩니다. 2.4.1 2: MAJOR RELEASE 4: MINOR RELEASE 1: PATCH RELEASE 📌 Initial Release 일반적으로 첫 번째 release는 1.0.0으로 시작합니다. ⭐️ Patch Release Patch Release는 일반적으로 새로운 기능이나 중요한 변경 사항이 포함되어 있지 않습니다. 일반적으로 코드 사용 방식에 영향을 미치지 않는 버그 수정 및 기..
기존의 day / night mode의 코드를 업그레이드해보자 기존 코드 day mode / night mode 기존 코드는 기능 수행을 하는 데 있어 문제는 없지만 아쉬운 점이 있다. 바로 아래와 같은 문장이 반복된다는 것이다. // body.style.backgroundColor // body.style.color 지금은 코드가 짧아 간단하지만, 만약 엄청나게 긴 문장을 갖고 있었다면 유지 보수하기 어렵다. 그래서 객체를 만들고, 객체 안 메서드로 배경색과 글자 색을 바꿀 수 있게 만들기로 했다. 그리고 기존의 방식처럼 setAttrubute 메서드를 사용하지 않고, button을 onclick 했을 때 toggle 메서드 안에 this를 넣었다. 그 후 script구문 안 toggle메서드에 파라미..
오늘은 단축 평가에 대해 알아보자 [ 논리 연산자를 사용한 단축 평가 ] 논리 합 (| |) 또는 논리 곱 (&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. 다음 예제를 살펴보자 'Orange' && 'Grape' // -> "Grape" 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 첫 번째 피연산자 'Orange'는 Truthy 값이므로 true로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있다. 논리곱(&&) 연산자에서는 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정한다. 이때 논리곱 ..

오늘은 캐스케이딩과 스타일 우선순위에 대해 알아보자 [ 캐스케이딩 ] CSS에서 'C'는 캐스케이딩(cascading)의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다. 다시 말해 CSS는 우선순위가 있는 스타일 시트 정도로 해석할 수 있다. 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. 캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념이다. 스타일이 충돌되지 않게 하는 방법으로는 다음 2가지 방법이 있다. 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 스타일 상속: 태그의 포함 관계에 따라 부모 요소..
자주 사용하는 form 태그와 input 태그의 타입을 정리해보자 [ form에서 사용하는 태그 ] 종류 설명 폼의 시작과 끝을 만든다. 폼 요소를 그룹으로 묶는다. 필드셋에 제목을 붙인다. 사용자가 내용을 입력할 필드를 삽입한다. , 드롭다운 목록을 삽입한다. 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다. 데이터 목록을 삽입한다. [ input 태그의 유형 ] 종류 설명 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 생성 password 비밀번호를 입력할 수 있는 필드 생성 search 검색할 때 입력하는 필드 생성 url URL 주소를 입력할 수 있는 필드 생성 email 이메일 주소를 입력할 수 있는 필드 생성 tel 전화번호를 입력할 수 있는 필드 생성 checkbox 주어..

오늘은 table을 만들어보자 [ 표의 구성 요소 알아보기 ] 표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어진다. 셀은 행과 열이 만나 이루어진 것으로 표의 내용이 들어가는 한 칸을 의미한다. [ 표 ] 4행 3열짜리 표 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 3행 1열 3행 2열 3행 3열 4행 1열 4행 2열 4행 3열 [ 표를 만드는 태그 ] 표의 시작과 끝을 알려주는 과 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 여기서 표에 제목을 붙이고 싶다면 태그 바로 아랫줄에 태그를 사용한다. 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다. 표 제목 [ 행을 만드는 태그와 셀을 만드는 , 태그 ] 태그만 작성하면 표가 만들어지지..

이미지에 커서를 갖다 대면, 그 위로 글을 띄워보자 test.html Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore e..
html을 사용하면서 문자를 꾸밀 수 있는 여러 가지 태그들이 있다. 처음 사용해본 태그들을 기록해 볼 것이다. 문자꾸미기 Lorem ipsum dolor sit amet consectetur adipisicing elit2. Porro animi tempora, quibusdam libero voluptatem veritatis provident illum velit, maxime, quos amet perspiciatis cupiditate. Similique tempore ducimus quaerat, aut sunt asperiores? HTML 李貞賢 이정현 같으며, 반짝이는 미묘한 우리 싶이 만천하의 이상은 품에2 끝까지 아름다우냐? 덧말 이성은 불러 꾸며 꽃 뼈 인생에 싸인 생생ººº하며, ..

6081번 16진수(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)를 배운 영일이는 16진수끼리 곱하는 16진수 구구단? 에 대해서 궁금해졌다. A, B, C, D, E, F 중 하나가 입력될 때, 1부터 F까지 곱한 16진수 구구단의 내용을 출력해보자. (단, A ~ F 까지만 입력된다.) 예시 ... print('%X'%n, '*%X'% i, '=%X'%(n*i), sep='') ... 참고 print('%X'%n) #n에 저장되어있는 값을 16진수(hexadecimal) 형태로 출력 작은따옴표 2개를 사용해서 print(..., sep='')으로 출력하면, 공백 없이 모두 붙여 출력된다. 작은따옴표 2개 '' 또는 큰 따옴표 2개 ""는 아무 문자도 없는 빈 문..
삼항 연산자 삼항 연산자란 항이 세 개인 연산자를 말한다. 조건식의 참/거짓 여부에 따라서 각각 다른 결과를 반환한다. 예시 조건 ? 항목1 : 항목2 조건: 참과 거짓으로 구분할 수 있는 비교 연산, 논리 연산 등을 말한다. 항목 1: 조건이 참인 경우 실행할 연산이나 함수를 말한다. 항목 2: 조건이 거짓인 경우 실행할 연산이나 함수를 말한다. 만약, 조건식의 결과가 true라면 문장 1이 실행되고, 조건식의 결과가 false라면 문장 2를 실행하는 것이다. 예제 문제 1 a에 10이 들어있고, b에 5가 들어있을 때 boolean 타입의 c라는 변수를 만들고 비교한다. ++a > b? true : false; 1. a의 값에 10이 저장되어 있다. 2. a에 전위형 증감 연산자 ++로 인해 값이 1..

형 변환이란 말 그대로 변수나 상수의 데이터 타입을 다른 타입으로 바꾸는 것을 말한다. 형 변환에는 자동 형변환(Promotion Casting)과 명시적 형 변환 (Demotion Casting)이 있다. 자동 형변환(Promotion Casting) 자동 형변환이란, 프로그램 작성자가 별도의 작업을 하지 않아도 자바가 알아서 알맞은 타입으로 변환해주는 형 변환이다. 자동 형변환이 이루어지기 위해서는 조건이 있다. 큰 자료형에 작은 자료형이 대입돼야 한다는 것이다. 데이터 타입이 double로 지정된 변수 d 에는 100.5라는 값이 들어있다. 데이터 타입이 int로 지정된 변수 n에는 200이라는 값이 들어있다. 여기서 double로 지정된 d라는 변수는 8byte의 메모리 저장공간을 갖고 있으며, ..
변수란 무엇인가? 변수(Variable)는 프로그램의 처리 과정에서 데이터를 담아둘 수 있는 메모리의 공간을 의미한다. 하나의 변수에는 하나의 값만 저장할 수 있고, 이 값을 변경할 수 있기 때문에 변할 수 있는 값, 즉 변수(Variable)라고 한다. 1. 변수의 선언과 초기화 변수의 선언 형식은 다음과 같다. int a; int a = 1; int: 데이터 타입을 말하며 변수에 기억시킬 데이터의 형태를 의미한다. a: 변수명을 말하며 기억 장소 주소를 대신하여 사용할 이름을 말한다. 1: 초기 값: 변수를 선언한 후 기억시킬 값을 말한다. 변수 : 특정 값을 저장하기 위한 공간 변수 이름짓기의 규칙 1. 숫자로 시작할 수 없다. 2. 소문자로 시작한다. 3. '_'를 제외하고 특수문자를 사용할 수 ..