Language
-
src와 href, 차이는 무엇일까Language/HTML&CSS 2022. 10. 19. 08:52
등등 우리는 태그에서 참조할 자료주소를 가져올 때 href, src 속성을 사용한다. 그.런.데 href와 src의 의미는 무엇이고, 왜 link에는 src를 안쓰고, img에는 href를 쓰지 않는 것일까? 아래는 stackoverflow에서 그 이유에 대해 설명해주는 글들을 가져와봤다. 1. 쉬운 설명 참고: https://stackoverflow.com/questions/12032337/differences-between-url-src-and-href src -- I want to load up this resource for myself. -> src는 이 요소를 직접 로드하고 싶을 때 사용하는 속성 href -- I want to refer to this resource for someone e..
-
[HTML] div 태그는 현업에서 어떻게 쓰일까?Language/HTML&CSS 2022. 10. 19. 08:16
태그 div는 의미론적으로 아무런 의미가 없는 태그이다. CSS와 JS를 적용할 태그를 자식요소로 묶을 때 쓰는 태그로 썼던 경험은 있는데 현업에서는 주로 어떤 패턴의 작업을 할 때 사용하는지 궁금해져서 알아봤다. div 태그의 정의 : div 태그는 division(분할하다)의 약자로 HTML 문서 내에 한 줄의 가로(Block) 공간을 만드는 태그이다. 정의부터, div 태그에 담긴 정보에 대한 context는 읽을 수 없다. div 의 사용 패턴 : 위에 서술한대로 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 된다. 즉, 공간을 만드는 태그이기 때문에, 단순히 콘텐츠를 그룹화하는데만 사용이 된다. 그래서, SEO에 좋은 태그를 사용하려면 Semant..
-
[CSS] 나를 괴롭혔던 CSS Box model, Good Bye: Position, DisplayLanguage/HTML&CSS 2022. 10. 18. 18:54
사전스터디 기간 동안, CSS...는 늘 나를 괴롭혀왔다. box-model 에서, HTML 요소는 요소별로 고유의 레벨이 존재하는데 그 레벨의 특성을 무시한 채 css 작업을 하니 삽질의 연속이었다. 아래 내용을 다시 학습 하고 난 후, "아 왜 안돼!!!" 라며 짜증이 났던 한 순간이 떠올라 얼굴이 화끈거렸다. 그 이유는, 자판기 커피 머신에 대고 드립커피 왜 안나와! 라고 짜증내는 것과 같은 격인데 inline 요소에 패딩값 줘놓고 왜 안바뀌냐며 짜증이 났던 것이다... 정확히는, inline 요소에 패딩 값을 지정할 수는 있다. 하지만 그 요소 위와 아래에 block 요소를 배치해보면 레이아웃이 겹치게 된다. 그 이유는 inline 요소가 height를 가지지 않기 때문이다. 블록의 경우 heig..
-
HTML 문서에 이미지를 삽입하는 방법 2가지Language/HTML&CSS 2022. 10. 18. 10:21
1. HTML 문서에 이미지를 삽입하는 방법 1. HTML 태그를 삽입하는 방법 2. CSS의 backgound-image 속성으로 이미지를 삽입하는 방법 우리에게 주어진 선택지는 2가지, 그렇다면 어떤 방법을 언제 사용할지 선택하는 기준은 무엇일까 궁금했다. 일단 둘의 차이를 보자면, 1. HTML태그는 HTML문서에, CSS는 CSS문서에 담는다. 2. 웹브라우저는 HTML 태그는 태그에 담긴 내용(정보)은 정보로 인식하지만, CSS 문서는 정보로 인식하지 않는다. 일단 두 방법에서 가장 큰 차이는 사용 목적이다. 따라서 HTML의 역할은 이 웹문서가 어떤 구조로 어떤 정보를 담고있는 문서인지를 설명하는 것이고 CSS는 그 문서를 보기 좋게 다듬어주는 역할을 한다. 여기서 차이가 생긴다. 그래서 본래..
-
JavaScript 100제 오답노트 26번_행성문제 2Language/JavaScript 2022. 10. 6. 00:59
JEJU CODING BASE CAMP - CODE FESTIVAL JavaScript 100제 26. 행성 문제2 우리 태양계를 이루는 행성은 수성, 금성, 지구, 화성, 목성, 토성, 천왕성, 해왕성이 있습니다. 이 행성들의 영어 이름은 Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune입니다. 행성의 한글 이름을 입력하면 영어 이름을 반환하는 프로그램을 만들어 주세요. //문제 답안 const planets = { '수성' : 'Mercury', '금성' : 'Venus', '지구' : 'Earth', '화성' : 'Mars', '목성' : 'Jupiter', '토성' : 'Saturn', '천왕성' : 'Uranus', '해왕성' : 'N..
-
JavaScript 100제 1부 오답노트 (1~20)Language/JavaScript 2022. 9. 30. 20:23
JEJU CODING BASE CAMP - CODE FESTIVAL JavaScript 100제 1부 8. 객체의 키 이름 중복 자바스크립트 객체를 다음과 같이 만들었다. 출력값을 입력하시오. (출력값은 공백을 넣지 않습니다. ) var d = { 'height':180, 'weight':78, 'weight':84, 'temperature':36, 'eyesight':1 }; console.log(d['weight']); -> 객체의 키 값이 중복되었을 경우, 마지막 키의 값을 가져온다. 따라서 출력값은 84이다. 9. concat을 활용한 출력 방법 다음 소스 코드를 완성하여 날짜와 시간을 출력하시오. var year = '2019'; var month = '04'; var day = '26'; va..
-
삼항연산자(조건부연산자, ?)Language/JavaScript 2022. 9. 22. 18:44
조건부 연산자(?, 삼항연산자) -출처 : https://ko.javascript.info/ifelse '물음표(question mark) 연산자’라고도 불리는 '조건부(conditional) 연산자’를 사용하면 if문을 짧고 간결하게 변형할 수 있습니다. 조건부 연산자는 물음표 '?' 로 표시합니다. 피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자’라고 부르는 사람도 있습니다. 참고로, 자바스크립트에서 피연산자를 3개나 받는 연산자는 조건부 연산자가 유일합니다. let result = condition ? value1 : value2; // 평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환됩니다. 또한, if문을 중첩할 수 있듯..
-
Value Types and Reference TypesLanguage/JavaScript 2022. 9. 22. 18:02
(EP 03.) 자바스크립트 개발자라면 알아야하는 핵심 컨셉 33개 | #3. Value Types and Reference Types * 간단요약 1. Value Types : string, number, boolean, NaN, undefined, null let a = 50; let b = a; a = 10; console.log(b); //50 value 데이터 타입을 새로운 변수에 할당(=)하는 경우 변수에 복사된 새로운 value는 기존 value를 참조하지 않는다. - Reference Types : array, object, function const sexy = ['kimchi', 'potato']; const pretty = sexy; sexy.push('hello'); console...
-
문자열을 배열로 변환, 배열을 문자열로 변환, Spread OperatorLanguage/JavaScript 2022. 9. 22. 16:30
1. 문자열을 배열로 변환 -출처 : https://codechacha.com/ko/javascript-convert-string-to-array/ // 예제 // 변수 myString에 담긴 문자열 'JavaScript'를 배열로 반환하라. const myString = 'JavaScript' /* 단어(str 인자)가 주어졌을 때 함수의 리턴값은 주어진 단어를 구성하는 모든 문자를 담고 있는 배열입니다. 만약 빈 문자열이 주어졌다면, 빈 배열을 반환해야 합니다. 결과값 : let output = getAllLetters(myString); console.log(output); --> ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't'] */ 1.1 string.c..