티스토리

Underthesee

검색하기

블로그 홈

Underthesee

patiently-more-deeply.tistory.com/m

dankthedust 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

Big O Notation(빅오 표기법) #6 💡 **[Colt Steele](https://www.udemy.com/user/coltsteele/) 의 JavaScript Algorithms and Data Structures Masterclass의 강의를 참고하여 정리한 글입니다.** 6. 로그와 시간 복잡도 로그란? 로그는 간단히 말해 지수(n^2, 2^n 등)의 역수이다. 간단한 이해를 돕는 예제로 log2(8) 은 3 이다. 즉, 2^3=8 이라는 말과 같다. 일반적으로 log2(n)은 그냥 log(n) 으로 첨자 처럼 생략된다. 로그의 시간 복잡도 O(log n) 의 시간 복잡도 다음에서 보듯 O(log n)의 시간 복잡도는 처음엔 가파르지만 점점 가파른 정도가 줄어든다라는 것을 알 수 있다. 즉, n 의 값이 커지면 커질 수록 시간 복잡.. 공감수 0 댓글수 0 2022. 2. 25.
Big O Notation(빅오 표기법) #5 💡 **[Colt Steele](https://www.udemy.com/user/coltsteele/) 의 JavaScript Algorithms and Data Structures Masterclass의 강의를 참고하여 정리한 글입니다.** 5. Big O의 공간 복잡성 위의 페이지는 알고리즘에 따른 실행 속도 즉, 런타임과 관련하여 비교하였고 이를 시간 복잡도라고 한다. 입력의 크기가 증가함에 따라 달라지는 알고리즘의 런타임을 분석한 것이다. 이번에 배울 공간 복잡도는 바로 입력 데이터가 차지하는 공간에 따른 분석을 말한다. 즉, 입력 데이터가 차지하는 메모리의 양과 관련된 비교이다. JavaScript 에서의 공간 복잡도에 대한 기본적인 규칙이 존재한다. JS에서의 공간 복잡도 규칙 가장 기본적인 .. 공감수 0 댓글수 0 2022. 2. 25.
Big O Notation(빅오 표기법) #4 💡 **[Colt Steele](https://www.udemy.com/user/coltsteele/) 의 JavaScript Algorithms and Data Structures Masterclass의 강의를 참고하여 정리한 글입니다.** 4. Big O 표현식의 단순화 3페이지에서 빅오 표현식에 대해서 간단히 알아보았다. 앞전에 살펴보았듯이 solution1은 for 문을 통한 루프가 존재하며, 우리는 해당 코드에서 일어나는 연산을 5n+2 로 정의했었다. 그럼 빅오 표현식도 동일한가? 정답은 그렇지 않다. n 즉, 입력값에 따라 변동하는 빅오 표현식들( n^2 etc...)은 n 값을 크게 보면 다른 값들과 큰 차이성을 두각하지 않는다. 5n+2 나 10n 이나 n 값에 따라 증가하는 시간효율성의.. 공감수 0 댓글수 0 2022. 2. 25.
Big O Notation(빅오 표기법) #3 💡 **[Colt Steele](https://www.udemy.com/user/coltsteele/) 의 JavaScript Algorithms and Data Structures Masterclass의 강의를 참고하여 정리한 글입니다.** 3. Big O 시간 복잡도 2페이지를 통해 보았듯이 입력에 따라 알고리즘의 런타임이 어떻게 증가하는지에 대한 것이 바로 Big O이다. 즉 입력과 해당 입력에 따른 상대적인 시간 간의 관계이다. 다양한 기본적인 표기법이 존재한다. 선형함수 f(n) = n 지수함수 f(n) = n^2, f(n) = 2^n etc... 상수함수 f(n) = 1 이외의 다양한 함수 위의 그래프는 블로그를 탐색하며 빅오의 개념을 정리한 글을 찾아보다 찾게된 그래프이다. 빅오 표기법에서 .. 공감수 0 댓글수 0 2022. 2. 25.
Big O Notation(빅오 표기법) #2 💡 **[Colt Steele](https://www.udemy.com/user/coltsteele/) 의 JavaScript Algorithms and Data Structures Masterclass의 강의를 참고하여 정리한 글입니다.** 2. 작업의 수를 통한 비교 1.페이지를 통해서 우리는 시간을 통한 성능비교가 크게 신뢰할 수 있는 자료가 아님을 알게 되었다. 그렇다면 어떤 방법을 통해서 더 좋은 코드와 덜 좋은 코드를 구분하고 비교할 수 있을까? 바로 코드를 통해 컴퓨타가 수행해야하는 작업의 수를 계산하는 방법이다. 시간은 해당 컴퓨터의 컨디션, 사양 등에 따라 바뀔 수 있으나 작업의 수는 일정하다.(코드가 변하지 않는다면) 1.페이지에서의 에제를 해결하는 두가지 방법 중 solution2에 .. 공감수 0 댓글수 0 2022. 2. 25.
Big O Notation(빅오 표기법) (1) 💡 **[Colt Steele](https://www.udemy.com/user/coltsteele/) 의 JavaScript Algorithms and Data Structures Masterclass의 강의를 참고하여 정리한 글입니다.** 1. Big O Notation(빅오 표기법)의 필요성 빅오 표현식은 시간 복잡성 과 공간 복잡성을 정의 한다. 어떤 특정한 문제에 대한 해결 방법이 두 가지 있다고 가정해보자. 두 방법 모두 정상적으로 작동하나 변수의 이름 뿐만 아니라 모든 것이 완전히 다르며, 접근 방식 또한 상이하다. 하나는 루프를 사용한다거나 다른 하나는 목록이나 문자열을 사용할 수도 있다. 이러할 때에 두가지 방법 중에서 어느 것이 좋은 해결 방법이 도리 수 있는지 알 수 있는지에 대한 것.. 공감수 0 댓글수 0 2022. 2. 25.
js를 이용한 HTML 요소 추가 방법들 프로젝트를 만들다 보면 js를 통해서 html의 요소를 추가해야하는 경우가 자주 있다. 특히나 어떠한 상호작용(서버에서 특정 데이터를 가져온다던지, 페이지 내에서의 input value의 값을 출력해야한다던지 등)에 의해서 html의 요소가 변경된다거나 추가 또는 삭제되어야 하는 경우가 있을 것이다. 이러한 기능을 수행하기에 여러 방법들이 있을텐데 이에 대한 각각의 장단점을 알아보고자 한다. 물론 마지막에 결합되거나 만들어진 문자열로 된 html 코드를 innerHTML을 통해서 넘겨주어야 하는 것은 동일하다. 다양한 방법에 대한 예를 들기 위해서 index.html 내에 존재하는 div class='container' 이라고 하는 태그 내에 로 감싸진 많은 태그와 태그 등의 다른 태그들이 생성되어야 한.. 공감수 0 댓글수 0 2021. 12. 10.
XMLHttpRequest(XHR) 기초 이해 XMLHttpRequest XMLHttpRequest (XHR) 객체는 서버와 상호작용하기 위한 객체로 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다. 즉, AJAX 프로그래밍에 주로 사용되는 객체이다. HTTP 이외의 프로토콜을 지원한다(file 과 ftp ) XMLHttpRequest는 readyState 값이 존재 하는데 다음과 같은 상태를 정의한다. 0: UNSET(미전송) - 요청이 생성된 상태로 아직 서버에 요청을 보내지 않은 상태 1: OPENED(열림) - open() 함수가 호출된 이후로, 요청 초기화가 된 상태 2: HEADERS_RECEIVED(헤더 응답) - send() 함수 호출 이후, 서버에 요청한 결과의 헤더를 수신한 상태 3: LOADING(로딩) - send.. 공감수 0 댓글수 0 2021. 12. 10.
[PowerShell] VSCode 터미널 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로 ~ 해당 오류는 스크립트 실행에 있어서 윈도우내의 방화벽으로 인한 보안 이슈로 제한이 되었기 때문이다. 나의 경우는 parcel-bundler를 전역에 설치하여 실행한 결과 VSCode 내의 터미널에서 다음과 같은 오류 메시지가 발생하게 되었다. 앞 전에 프로젝트 별로 parcel-bundler를 설치하여 실행할 때에는 별 문제가 없었는데 전역으로 설치하니 생긴 문제인가 아니면 충돌이 난건가 싶어 불안함을 느끼며 구글링을 바로 했다. https://singa-korean.tistory.com/21 해당 사이트에서 친절하게 도움을 받아 해결하였으며, 나 또한 블로그에 남겨 다른 분들의 해결에 도움이 되고 싶어 글을 작성하기로 했다. 1. 먼저 윈도우 작업표시줄의 돋보기에서 PowerShell을 검색하여 을 선.. 공감수 1 댓글수 0 2021. 11. 6.
API, Library, 그리고 Framework 개발 공부를 하면서 많이 접하는 API, Library그리고 Framework. 공부를 하면서 활용하다보면 개념이 애매모호 할 때가 많은 것 같아 정리 해 두려고 한다. ⚠ 다만, 해당 정보는 블로그와 위키백과를 토대로 작성한 개인의 생각을 정리한 내용으로 광범위한 프로그래밍 개념을 명확하게 진술해주는 내용은 아님을 밝힙니다. 참고는 위키백과와 정리가 잘되어 있는 블로그를 참고했다. Libarary 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. 비휘발성 자원이란 전원이 차단되어도 데이터를 유지하는 컴퓨터 메모리를 말한다. 라이브러리에는 미리 작성된 코드, 서브루틴(함수) 크래스, 값, 자료형 등을 포함한다. 라이브러리 (컴퓨팅) - 위키백과, 우리 모두의 백과사전https:.. 공감수 0 댓글수 0 2021. 10. 12.
JSON과 Storage(local, session) JSON JSON은 속성과 값으로 쌍을 이루는 데이터 포맷으로, 비동기 브라우저/서버 통신(AJAX)를 위해 넓게는 XML을 대체한다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. JSON파일은 하나의 문자데이터이나, JavaScript에서 데이터 값을 불러와지면서 그 파일의 자료형이 해석되어 사용된다. // myData.json { "name": "Lee", "age": 25, "emails": ["dankthedust@gmail.com", "8wall_dawn@kakao.com"] } import myData from './myData.json' console.log(typeof myData); // Object const user = { name:.. 공감수 1 댓글수 0 2021. 10. 9.
Import와 Export Import와 Export를 통한 가져오기, 내보내기 프로젝트를 만들면서 많은 js 파일들이 생기게 되는데 특정 js파일에서의 생성한 함수, 변수 등을 다른 js에서도 사용하며 활용할 수 있도록 하는 역할을 import(가져오기), export(내보내기)이 한다. Export export 는 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용하며, 내보낸 값은 다른 프로그램에서 import 를 통해서 가져가 사용할 수 있다. 내보내지는 모듈은 "use strict"와 관계없이 엄격 모드가 적용된다. 기본(default) 내보내기 // 모듈 내의 선언한 식별자 내보내기 export { 식별자 as default }; // 각각의 식별자 내보내기 export default function .. 공감수 0 댓글수 0 2021. 10. 9.
원시값과 참조값, 얕은 복사와 깊은 복사 자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리안, null, undefined, 심벌, 객체 타입)은 크게 원시 타입(Primitive type)과 객체 타입(object/reference type)으로 구분된다. 원시타입과 객체 타입의 차이 원시값은 변경 불가능한 값이지만, 객체 타입(참조값)은 변경 가능한 값이다. 원시 값을 변수에 할당하면 확보된 메모리 공간에는 실제 값이 저장된다. 하지만 객체를 변수에 할당하면 확보된 메모리 공간에는 참조값이 저장된다. 원시값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달된다. 하지만 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달된다. 원시 타입(원시값) 원시 데이터 : String, Number,.. 공감수 0 댓글수 0 2021. 10. 8.
assign() 과 객체의 참조값, 참조에 의한 전달 온라인 강의를 병행하던 중 Object.assign() 함수에 대한 예문을 연습하고 있었는데 의아한 점이 있었고 의문점을 해결하면서 확실하게 알게된 객체의 특성중 참조값의 개념에 대해서 작성하여 남기고자 한다. Object.assgin(target, ...sources)의 개념은 대상 객체인 target에 출처 객체sources의 열거 가능한 자체 속성들을 복사하여 붙여넣은 후 대상 객체를 반환하는 메소드이며, target이 빈객체{}가 아닐 경우, 반환받은 값을 저장한 새로운 변수는 target과 참조값을 공유한다. 여기서 MDN의 내용에서의 기본개념에대한 설명과 달리 내가 추가한 내용은 target과 참조값을 공유한다 라는 것이다. MDN문서에도 참조값을 복사한다라고 명시되어 있으며, 객체의 특성에 .. 공감수 0 댓글수 0 2021. 10. 7.
Ajax JavaScript의 발전으로 정적 웹에서 동적 웹페이로, 그리고 문서적인 성향에서 어플리케이션 적인 성향으로 발전했다. 하지만 언제나 그렇듯 불만이 있었는데, 그 요인으로는 페이지의 변동사항이 있을 경우, 부가적인 수정소요가 많다는 것이다. 페이지의 변동사항이 있을 경우, 다시 웹 페이지 전체를 리로드해야 하고 업데이트 해야한다. 이런 경우 페이지와 서버와의 통신량이 방대해지고 사용자 또한 매번 리로드 되는 경험을 해야할 것이다. 개발자는 수정요소가 있어 변경할 때에 메인 페이지에 수정을 한다하고 그와 연관된 페이지가 무수히 많다면 그 페이지들을 모두 수정하는 불필요한 개발시간을 투자해야한다라는 것이다. 이러한 불편을 해소해주는 기능이 Ajax이며, 하나의 페이지에 정보를 담고 리로드 없이 업데이트를 .. 공감수 0 댓글수 0 2021. 8. 15.
웹 개발 검색 키워드 document - 태그의 삭제, 자식 태그 추가 등 * Document Object Model window - 웹페이지의 주소, 새 창 열기 등 ajax - 새로고침 없이 웹페이지 정보 변경 cookie - 웹 페이지가 새로고침 되어도 현재 상태를 유지 offline web application - 인터넷이 끊겨도 동작하는 웹 페이지 webRTC - 화상 통신 웹 앱 제작 speech - 음성 인식 및 음성과 관련 webGL - 3차원 그래픽 이용 webVR - 가상현실 공감수 0 댓글수 0 2021. 3. 14.
UI와 API #UI, API UI(User Interface)는 사용자들이 시스템을 제어하기 위해서 조작하는 장치를 의미하고 API(Application Programming Interface)는 프로그래머들이 사용하는 조작 장치를 의미한다. 간단히 html에서 버튼을 생성하고 클리 시에 'Hello world'라는 경고창이 뜨도록 코딩을 해보면 버튼은 UI가 되는 것이고, alert()라는 함수는 웹브라우저를 만든 사람들이 미리 만들어둔 API이다. 우선은 이런 API를 응용하고 결합해서 새로운 프로그램을 만들 수 있다라고 간단한 개념만 짚고 넘어가자. www.boostcourse.org/cs124/lecture/147574/?isDesc=false 자바스크립트의 시작 부스트코스 무료 강의 www.boostcour.. 공감수 0 댓글수 0 2021. 3. 14.
JavaScript 연동과 라이브러리(Library) #JavaScript 연동 themeChanger()이라는 함수를 구현하고 코딩한 JavaScript를 1부터 4.html에 모두 붙여 넣어 원활한 구동이 되는 것을 확인했다. 그런데 이런 페이지가 많다면 모두 복사하고 수정 소요가 생겼을 때, 일일이 수정해야 하는 것은 상당히 비효율적인 일이 될 것이다. 보다 효율적으로 코딩하기 위해서 css를 hmtl에 불러왔던 것처럼 JavaScript도 불러온다면 우리는 한번의 수정으로 모든 페이지를 변경할 수 있게 될 것이다. themeChanger는 글씨색과 배경색을 변경하는 기능인만큼 color.js라는 파일을 만들고 html 내 사이에 있던 코딩을 붙여 넣었다. var Links = { SetColor:function (color){ var alist = .. 공감수 0 댓글수 0 2021. 3. 14.
JavaScript 객체(Object) #객체(Object) 객체 또한 코드의 정리, 효율을 위한 개념이 존재하는데, 서로 연관된 함수와 변수가 많아질 때, 이를 정리하고 묶어주는 용도로 이해할 수 있다. 이전에 앞서서 작성하였던 theme코드를 다음과 같이 리팩토링하면 //백그라운드 컬러 변경 function setBgColor(color){ document.querySelector('body').style.backgroundColor= color; } //바디 텍스트 컬러 변경 function setBodyColor(color){ document.querySelector('body').style.color= color; } // a 링크 태그 컬러 변경 function linksSetColor(color){ var alist = docum.. 공감수 0 댓글수 0 2021. 3. 13.
Javascript 함수 #함수 생활코딩에서 함수를 수납함에 비유하였는데, 그 이유를 정리정돈하여 하나의 기능을 분류하여 효율과 유지보수를 높여주는 것으로 들었다. 우선 함수의 기본 문법에 대해서 알아보면 function name() { // 함수의 기능 document.write('Hello World!'); } 으로 사용하며 실행은 name(); 을 선언하여 실행할 수 있다. #함수(매개변수Parameter와 인자Argument) 앞서 함수의 기본 문법에서는 정해진 기능에 대한 구현을 했었다면, 지금은 사용자가 원하는 정보를 위해 입력을 하고 그에 상응하는 값을 출력받고자 하는 함수를 학습해보자. 입력에 해당하는 것을 매개변수(Parameter)와 인자(Argument)라고 하는데, 두 수를 더하는 함수를 간단히 생성해보면... 공감수 0 댓글수 0 2021. 3. 13.
Javascript 반복문 #배열 반복문을 배우기에 앞서서, 배열(Array)에 대해서 알아볼 필요가 있다. 배열(Array)은 많은 데이터들 중에서 종류를 분류하여 보관힐 수 있는 많은 방으로 비유할 수 있다. 배열의 표현 중, 우선 선언하는 방법은 var fruits = ["apple', 'banana"] 로 변수를 선언하고 대괄호 안에 값을 추가하는 것으로 표현한다. 이렇게 선언된 배열에 요소를 추가하고, 삭제하고, 길이를 측정하는 등 많은 요소들이 있는데, 간단히 예제를 통해서 사용해보면, Array Syntax get count add count 다음과 같이 사용한다. 선언된 배열의 첫 순서는 Array[0]으로 시작해서 0,1,2,3... 순으로 표현이 된다. 배열의 요소를 제거하는 방법은 여러가지가 있는데 배열의 첫번.. 공감수 0 댓글수 0 2021. 3. 12.
Javascript 조건문 #조건문 조건문은 프로그래머가 명시한 조건에 따라 다른 기능들이 다른 순서에 따라서 실행되도록 하는 것을 의미한다. 이전에 night/day 두가지 기능을 구현해 두었던 것을 하나의 기능으로 합칠 수 있는데 이때 사용하는 버튼은 '토글'이고 해당 조건은 if/else 문을 통해서 구현한다. 비교 연산자 비교 연산자는 왼쪽값과 오른쪽 값이 같은지 또는 작고 큰지를 피교하고 판단하는 것을 의미하는데 기호는 === 세가지로 구성된다. html에서 와 같은 부등호는 태그를 나타낼때 쓰이기 때문에 <()를 의미하지만, Javascript에서는 부등호 그대로 사용한다. Comparison operator & Boolean 1===1 1===2 1<2 위처럼 비교연산자를 통해 값은 True, False의 두가지 값을.. 공감수 0 댓글수 0 2021. 3. 12.
JS 기초 챕터 1 우연히 알게된, 생활코딩을 통해서 공부를 하다가 알게된 해당 사이트는 it 강좌를 무료로 들을 수 있는 플랫폼이다. 유튜브에서 들을 수 있는 강의가 그대로 실려있으면서도 차이점은 순차별로 영상을 모두 시청해야 수강완료 버튼을 누를 수 있고 모든 수강을 듣고 퀴즈를 100점 받아야 이수를 할 수 있다. 목적성을 명확하게 들어내고 있는 부분이 유튜브와는 다른 부분이지 않을까 싶어서 플랫폼을 옮겨서 듣고 있다. www.boostcourse.org/ 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org #Javascript javascript를 들어가면서 먼저 간단히 알아본 예문은 document... 공감수 0 댓글수 0 2021. 3. 9.
html에 css와 별도 css파일의 효율성 지금까지의 강의 영상을 보고 진행하면서 코딩하였던 css 언어를 2.html을 메인으로 index.html, 1.html ~ 4.html까지 모두 적용하여 각 페이지가 링크를 통해 전환되면서도 통일화될 수 있도록 수정했다. 그런데 만약 이 페이지가 하나, 두 페이지가 아닌 여러 페이지로 구성되어 있다면, 작업의 수요는 모든 페이지가 해당 될 것이다. 그래서 하는 작업이 css를 html에 코딩하는 것이 아닌 별도의 css파일을 운영하는 것이다. 그리고 각 페이지에 css를 를 통해서 적용시키면 중복을 최소화하면서 간편하게 css 수정을 통해 모든 페이지에 동일한 수정 요소를 줄 수 있다. /* css폴더 내에 파일 이름이 style인 css파일 */ 이러한 작업은 파일의 중복을 제거해주는, 보다 효율적이.. 공감수 0 댓글수 0 2021. 3. 4.
반응형 웹과 mediaquery 반응형 웹이란 다양한 화면의 크기 속에서 반응하여 보다 시각적, 디자인적으로 사용자에게 편안하게 정보를 보여주는데에서 필요로 한다. 점점 다양해지는 미디어(스마트폰, 태블릿, etc.)에서 매우 중요하다. 즉, 화면의 크기에 맞추어 웹 페이지의 각 요소들이 반응하여 최적화되는 것을 반응형 웹이라고 한다. 간단한 예문을 통해서 미디어 쿼리를 살펴보면 html은 안에 Responsive를 입력하고 border에 효과를 주어 시각적으로 바로 확인할 수 있도록 했다. 이후 700px을 기준으로 코딩한 가 보이게, 또는 보이지 않게 코딩했다. 위의 주석과 같이 700px을 기준으로 이상일때에 해당 가 display:none; 이 되는 것을 확인할 수 있다. 즉, min-width: 00px의 의미는 화면의 크기가.. 공감수 0 댓글수 0 2021. 3. 4.
<div>를 통한 기본 Grid html 언어인 태그에 대해서 배움에도 카테고리를 css에 분류한 이유는 태그는 다른 각각 고유의 의미를 가지는 태그(ex. , , , etc.) 등 사용시에 어떠한 효과를 보유하고 있지 않다. DIVISION(분할)의 줄임말인 태그는 css 요소를 활용하여 Grid를 적용하기 위한 태그라고 볼 수 있다. 태그는 Block Level Element로 화면 한 줄의 전체 영역을 가지고 있기 때문에 선언 시에 다음과 같이 줄바꿈이 되는 것을 확인할 수 있다. 앞 전 글에서 말했 듯, 위 아래로 구분을 짓는 것이 아닌 콘텐츠를 다음과 같이 좌우로 배치할 것이기 때문에 자식 를 감싸고 있는 부모 를 선언하고 명확한 영역을 시각적으로 확인하기 위해 css를 통해서 border를 적용한다. 이때 display: g.. 공감수 0 댓글수 0 2021. 3. 3.
CSS Box Model 생활코딩에서 다음과 같이 앞 전 HTML 강의에서 작성하였던 페이지들을 다음과 같은 레이아웃에 따라 배치하고자 한다. 그전에 앞 서, Box Model에 대한 이해를 확실히 짚고 넘어가는 것이 좋다. 2.html 페이지, 그 중 태그와 태그에 적용을 하여 Box Model에 대해서 알아 보았다. 다음과 같이 의 CSS에 border에 5px, red 컬러에 solid를 주었고 태그에도 같은 css 속성을 넣어 Box 영역에 대해서 시각적으로 확인하였다. 과 같은 제목 태그는 block level element로 해당 영역의 전체를 보유하고 태그는 inline element로 자신이 가진 크기만큼의 영역을 기본값으로 가지는 태그이다. 다음과 같은 영역을 css에서 변경해주기 위해서 display라는 효과를.. 공감수 0 댓글수 0 2021. 3. 1.
CSS class와 id class와 id는 특정 HTML 요소에 대한 영향을 줄 수 있도록 지정하는 선택자(Selector)다. class는 둘 이상의 클래스를 선언이 가능하며 CSS 구문으로 .class(클래스 이름) { css(css 속성) declarations(효과); } 로 class 이름 앞에 . 을 붙여 스타일을 지정한다. 그리고 클래스 내에서는 여러개의 클래스 속성을 지정할 수 있으며 띄어쓰기로 구분한다. 다만 코딩 태그 내에서 속성은 여러개를 사용할 수 있는데, CSS 내에서 같은 class나 element에 대해서 중복된 CSS 스타일이 있다면 적용 우선순위가 있다. style { } 내에서 보다 아래에 있는 CSS 언어가 우선순위가 높다. 그 예로 다음과 같은 코딩 결과에서 그림(좌)에서는 CSS에 red .. 공감수 0 댓글수 0 2021. 2. 28.
CSS font와 text CSS를 다루기 전에 간단히 내용을 다루어 보면, Selector(선택자), Declaration(선언자)로 나뉘어 지고 선언자 안에 Property(속성)과 속성에 대한 Value(값)으로 나뉜다. 간단히 사진을 통해 알아보면 으로 볼 수 있다. 간단하게 font에 관한 CSS문인데 먼저 font-size는 %, px, em, rem으로 크게 볼 수 있는데 %는 영역의 몇 퍼센트인지에 대한 값으로 부모 기준으로 자식의 넓이를 의미한다. px은 화면의 px단위에 따른 크기를 의미하고 모두들 이해 될 거라 생각한다. em과 rem에서 em 단위는 상위 요소 크기의 몇 배인지를 정하는데 기존 폰트 크기에 2em은 부모 폰트 크기의 2배가 적용된다. rem에서 r은 Root의 약자로 최상위의 태그에 적용된 사.. 공감수 0 댓글수 0 2021. 2. 28.
동영상 삽입, 댓글과 채팅 기능 그리고 구글 애널리스틱 생활코딩의 html 수업 중 기본 베이스는 듣고 남은 부록 강의. 동영상 삽입의 경우, 유튜브에서 삽입하고자 하는 영상의 소스를 불러와 해당 코드를 삽입만 하면 불러온다. 이전 대학수업 간 과제로 좋아하는 아티스트의 오피셜 페이지를 제작했었는데, 이때에도 아티스트의 뮤직비디오, live 영상 등을 가져와 삽입했었다. 그때와 다른 점은 과제로 만든 페이지에서는 뮤직비디오의 사이즈에 맞추어 레이아웃을 설계하여 플레이어의 여백이 발생하지 않았는데, 지금은 초심으로 돌아가 공부하는 입장으로서 천천히 맞추어 나가고 어느정도 수업을 듣고 익숙해지면 하나의 페이지를 만들어 깃허브에 올려보고 싶다. 두번째 강의는 댓글기능, 한가지 더 추가하자면 세번째 강의에서의 캡처 기능까지 삽입을 해보았는데, 코딩을 한 것은 아니고.. 공감수 0 댓글수 0 2021. 2. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.