루체

= : 대입 연산자 value에 1이라는 값을 넣겠다. +,-,/,* : 산술 연산자, 사칙연산 등 console.log(++value) : value의 값을 출력하는 시점에 더하면서 출력을 한다. 전위연산자 cosnole.log(value++) : value의 값을 출력하는 시점에 더하지 않고 출력을 하고 더해준다. 후위연산자 논리 연산자 NOT ! 특정 boolean을 반전시켜준다 (!true : false) AND && 양 옆의 조건이 true일 때 true로 실행 (true && true : true) OR || 하나의 조건만 true여도 true로 실행 (true || false : false) 논리 연산자의 순서 NOT -> AND -> OR 비교 연산자 == 와 ===의 차이점 == : 데이..

변수는 바뀔 수 있는 값을 말하고 상수는 바뀌지 않는 값을 말합니다. 새로운 변수나 상수를 선언할 때는 변수명이 겹치지 않게 해야 합니다. let value = 1; let value = 2; /* 이렇게 하면 안된다*/ const test = 1; const test = 2; /* 이렇게 하면 안된다*/ 변수를 선언할 때는 let을 사용을 하고 상수를 선언할 때는 const를 사용을 합니다. 제가 여태까지 봤던 유튜브 강좌에서나 다른 어디에서든 변수를 사용을 할 때 var키워드를 많이 사용을 했었는데 이 온라인 강의는 var키워드가 예전에만 사용하던 거라 요새는 사용을 하지 않는다고 합니다. var 키워드 예전에 사용하던 것 let과 사용범위가 다르다 똑같은 변수명으로 선언해도 사용이 가능하다 구형 브..

일치 선택자(Basic Combinator) E와 F를 동시에 만족하는 요소 선택 /* css */ span.orange{ color:red; } 사과 딸기 오렌지 당근 토마토 오렌지 태그와 클래스가 붙어있는 형태입니다. 이것을 일치 선택자라고 부를 수 있습니다. 이것은 span태그이면서 orange라는 클래스 값을 가지는 것을 찾아야 합니다. 자식 선택자(Child Combinator) E의 자식 요소 F를 선택 /* css */ ul > .orange{ color:red; } 사과 딸기 오렌지 당근 토마토 오렌지 > 이 기호가 뜻하는 것이 자식 태그를 찾으라는 뜻입니다. ul의 자식요소로서 li태그가 들어있는 것을 확인할 수 있습니다. 그 중에서 .orange라는 클래스 값을 가지는 태그를 선택해서 ..

1. 전체 선택자 요소 내부의 모든 요소를 선택한다. * /* css */ * { color: red; } 사과 파인애플 귤 오이 당근 토메이토 이렇게 css에 작성을 하게 되면 모든 태그에 대해 글자색을 빨간색으로 바꾸겠다! 라는 말이된다. 2. 태그 선택자(Type Selector) 해당하는 태그 이름의 요소를 선택 E /* css */ li { /* 앞 뒤에 기호가 없으면 태그 선택자 */ color: red; } 사과 딸기 오렌지 태그 전체를 찾아서 적용을 시키기 때문에 원하는 거 하나를 집어내기가 쉽지 않다. 그래서 클래스 선택자와 아이디 선택자를 사용을 하면 하나만 집어내서 적용할 수가 있다. 3. 클래스 선택자(Class Selector) HTML class 속성의 값이 E인 요소를 찾아 선..

인라인(in-line) 방식 - HTML 태그에 'style' 속성을 직접 작성하는 방식 안녕 이렇게 사용을 하면 css에서 선택자를 작성을 하지 않아도 style이 적용이 가능합니다. 근데 그럼 이 방식이 css에 작성을 하는 것보다 좋은 방식이냐? 더 좋은건 아닙니다. 조금 더 복잡한 웹 디자인을 만들 때는 반복적인 사용과 유지보수를 추후에 할 때는 class로 지정을 해줘서 고치는 것이 더 좋은 방법입니다. 물론 이 방법이 안좋다라는 것은 아닙니다. 나중에 공부하게 되는 내용에서 특정한 기능들이 자동으로 삽입이 되게 하는 것으로 사용을 하는 것은 괜찮으나 직접적으로 작성을 하는 것은 피해야 합니다. 내장(embedded)방식 HTML head안에 안에 작성하는 방식 HELLO HELLO라는 텍스트가..

우리는 외부에 있는 CSS파일을 읽어올 때 link 태그를 아래와 같이 사용을 했다. 경로는 임의로 설정 지금은 간단하니까 문제가 되지 않지만 이렇게 필요한 경로를 매번 ./css/ 이런식으로 작성을 하는 것은 생각보다 복잡하고 귀찮아질 수도 있다. 이럴 때 사용을 하는 것이 base 태그이다. base 태그는 head의 어느 위치에나 있어도 상관은 없다. 사용법은 아래와 같다. 특정 상대경로를 작성을 할 때 하나씩 타고타고 들어갈 필요 없이 base에 이렇게 작성을 해두면 됩니다. 자주 쓰이는 태그는 아니라고 하는데 그래도 유용하게 쓰일 것 같다. 단 주의 사항으로는 이 base라는 태그는 기본적으로 HTML문서에 단 한번만 작성을 할 수가 있습니다. 기준으로 삼는 것이기 때문에 딱 한 번! 주요하게 ..

각각의 파일이나 어떤 특정한 개념이 어떤 타입인지를 명시를 꼭 해줘야 되는 부분이 있을 수 있는데 이것을 MIME 타입이라고 합니다. MDN 문서에는 MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이라고 합니다. 간단히 설명을 드리면 연결하는 문서 즉 가지고 오는 문서의 타입 종류를 명시를 해줘야 서버나 클라에서 정확하게 인지하고 오류가 발생하지 않기 위한 방식을 설정을 해야된다는 것입니다. 이 MIME 타입도 종류가 엄청 많으니 다 외울 필요는 없습니다. text/html image/jpen, png 외부에 있는 html, jpeg, png 페이지를 가지고 오겠다라는 말입니다. audio나 video 등 종류가 많습니다. 이렇게 타입을 설정을 해줘야 문제가 발생하지 않고 ..

rel은 relationship의 약자이다. 현재 문서와 참조하려는 문서의 관계를 나타낼때 사용을 합니다. link 태그를 사용을 할 때 확실하게 설정을 해줘야 합니다. href(Hyper Text Reference)로 불러오려는 문서의 경로를 적어줘야 합니다. 항상 CSS파일을 외부로 빼는데 이 태그를 사용해서 다른 기능이 있는지 자세히 살펴보기 위해 MDN 사이트에 들어가보겠습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/link HTML Link 요소 (link) 는 현재 문서와 외부 리소스와의 관계를 명시합니다. 이 요소는 네비게이션을 위한 관계형 프레임워크의 정의에도 사용될 수 있습니다. 이 요소는 스타일 시트에 링크하는 데에 가장 많이..

Head부분의 meta 태그는 뒤에 닫는 태그가 없어 사용을 하면 오류가 생길 수 있다! 그리고 meta 태그는 속성을 가지지 않으면 역할을 충실히 이행을 할 수가 없습니다. meta 태그의 속성으로는 name이나 content나 charset등이 사용이 됩니다. charset Character Sets의 약자로 문자가 인코딩 되는 방식을 정해주는 것입니다. 대부분이 UTF-8을 값으로 정해준다. 문자가 인코딩되는 방식을 정해주는 것이기 때문에 title 태그와 같이 문자가 작성이 되어있는 것보다 상위에서 작성이 되어야 한다! EUC-KR이라는 것도 사용이 되긴 하는데 EUC-KR은 완성형이고 UTF-8은 조합형입니다. 완성형은 제대로 된 문장이 없으면 한글이 깨지는 현상이 발생할 수도 있습니다. .....

이번에는 인라인 요소와 블록 요소로 왜, 어떻게 구분되고 어떻게 바꿔서 쓸 수 있는지 알아보겠습니다. 우선 인라인 요소를 블록으로 바꾸는 것을 알아보기 위해 아래 코드를 작성을 해주세요. 안녕 body{ margin:0; padding:0; } span{ background: red; width : 120px; hegith : 80px; } 지금 CSS에 span에 높이와 너비를 입력을 했지만 인라인 요소라서 적용이 안됩니다. 이것을 적용시키기 위해 인라인 요소를 블록 요소로 바꿔보겠습니다. span{ background : red; width : 120px; hegith : 80px; display : block; } 이렇게 display : block 을 사용하면 인라인요소를 사용하는 태그를 블록으로..