Reload0213 devNote

● 이 파일은 html이라고 정의 내리고 항상 마지막은 로 마무리 해줘야 합니다. ● 이 영역에는 ,,등의 시맨틱 태그가 들어갑니다. 는 인코딩 타입이 들어가고, 은 문서의 제목, 에는 자바스크립트나 CSS를 넣습니다. ● body영역에 코드들이 들어가면 웹 브라우저에 표시됩니다. 또 대부분의 시맨틱 태그들이 이 영역에서 사용되죠. 밑에서 정리할 ,,,,태그들이 화면을 구성합니다. ■ 웹에서 표시되는 BODY영역의 구조 HTML5의 꽃이라 불리는 body영역안에 위 사진과 같이 화면을 나누기 위해 시맨틱 태그를 이용합니다. 자주 방문하는 포탈 사이트인 네이버나 다음을 방문해봐도 이렇게 구성되어 있죠. 일단 하나 하나 정리해볼게요. ● 위에서 언급한 는 바로 밑에 쓰이지만 는 안에 있기 때문에 둘은 전혀 ..

제일 처음 HTML과 CSS를 배우기 시작하고, 클론코딩을 시도하려 했을때 가장 애를 먹었던 부분이 컨텐츠들을 정렬하고 위치를 내가 원하는 대로 두는것이 어렵게 다가왔습니다. 지금도 다른 영역을 배우다가 다시 앞에 보여지는 부분들 즉 이러한 컨텐츠들을 구성하려니 또 다시 처음하는 것처럼 가물가물하여 블로그에 정리해봅니다. 여러방법이 있으나 absolute를 이용한 방식은 개인적으로 별로인 것 같아 다른 2가지 정도씩으로 정리해보겠습니다. div 가운데 정렬 하는 방법 div 영역을 중앙에 배치하는 방향에 따라 다양한 방법이 존재합니다. 다음과 같이 정렬 방향에 따라 케이스를 나눠서 방법을 소개해드리도록 하겠습니다. 정렬 방향 div의 가로만 정렬 div의 세로만 정렬 div의 가로와 세로 모두 정렬 di..

작업을 하면서 가장 많이 구현하게 되는 기능 중 하나인 탭메뉴를 2가지 방법으로 구현해보자. 1. 탭 버튼과 탭 컨텐츠가 한 영역으로 묶여 있는 경우 전체 소스 Tab Button1 Tab Content1 Tab Button2 Tab Content2 Tab Button3 Tab Content3 위와 같이 버튼(.btn)과 창(.cont)이 인접해 있을때 하나의 li 태그로 묶여서 li태그를 제어하면 버튼과 컨텐츠 영역을 모두 제어할 수 있게 마크업을 하는 방법에선 더욱 간단하고 효율적으로 만들 수 있다. 구현 결과 및 소스 리뷰 1. .tab_menu .list의 li안에 있는 각 버튼에 addEventListener로 'click' 이벤트를 걸어준다. (for문을 통해) 2. 해당 이벤트에 preven..

비슷비슷하지만 서로 다른 세 가지 속성 innerHTML, innerText, textContent 세가지의 차이점을 정리해보겠습니다. innerHTML vs innerText vs textContent 눈으로 쉽게 확인 할 수 있도록 예시로 만들어 보았습니다. 1. innerHTML innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있습니다. 위 예제에서 'innerHTML' 버튼을 클릭하면, div안에 있는 HTML 전체 내용을 가져오는 것을 확인 할 수 있습니다. 사용자가 브라우저에서 div의 내용을 Ctrl+C하여 클립보드에 복사한 내용을 가져온다고 생각하면 이해하기 쉽습니다. 2. innerText innerText는 'Elemen..

position-fixed의 특징 CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있게 됩니다. 뿐만 아니라, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기 때문에, 다른 엘리먼트들이 상하좌우로 움직일 때, position 속성이 fixed로 설정되어 있는 엘리먼트는 그 자리에서 움직이지 않습니다. 상단에 고정되어 있는 메뉴바/네비게이션을 만드는 방법에 대해서 알아보겠습니다. - 우선 상단 메뉴영역과 메인영역을 Html을 통해 간단히 작성해준 후 메뉴바를 ..

코드를 작성하고 라이브 서버를 띄우며 확인하다보면 발생하는 오류이다. 기능상의 장애를 일으키는 것은 아니나, 빨간 줄로 에러메세지가 남는게 너무나도 신경 쓰인다. 아이콘이 없거나 경로가 맞지 않으면 오류가 나는 것 같습니다. 해결을 하려면 아이콘을 맞춰주거나 경로를 맞춰주면 되는데, 그게 번거롭다면 위와 같이 head 태그 안에 한 줄만 추가해주시면, 에러가 해결됩니다.

자바스크립트 데이터 화면 및 출력 내용 변경 *● document.write( ) * : ()안에 것을 화면에 출력시키는 method ●w**indow.alert() ** : 경고(알림)창을 띄워 ()안의 것을 출력시키는 method ●*innerHTML=" " * : 예를 가지고 이해하는 것이 빠르다. 예를 들어 HTML로 [ 피카츄 ]이라는 콘텐츠를 화면에 출력하였다. 이 HTML 요소에 접근하여 [ 피카츄 ]을 [ 라이츄 ]으로 바꿔 출력하게 만들려면 이 innerHTML=" " **속성을 사용해야 한다. 그리고 HTML 요소에 접근하려면document.getElementById**메서드를 함께 사용한다. 기본의 피카츄를 출력하는 HTML 요소의 id인 "pikachu"로 접근하여 **innerHT..

Selector : 선택자 HTML의 요소는 Element, CSS은 Property라고 한다. CSS에서 선택자는 HTML의 요소(E)와 조건(F, Filter)을 조합한다. 샘플 코드에서 E는 Element, F는 Filter를 의미한다. Basic selectors : 기본선택자 기본 선택자(basic selectors)의 종류 전체 선택자(Universal selector) ' * ' : 범위 내(요소 내부의), 모든 요소를 선택. => 모든 태그를 대상으로 스타일을 적용할 때 사용(' * '(별)으로 사용) => 주로 태그의 스타일 초기화를 할 때 사용하기도 한다 ex ) * { color: red; } 태그 선택자 (Type selector) : 태그 이름이 E인 요소를 선택. => 특정 태그..

※ position : 웹 문서 안의 요소들을 배치해주는 속성 웹 문서를 만들 때 배치와 관련해서 중요하게 사용되는 속성position으로 쓸 수 있는 값으로는 static, relative, absolute, fixed가 있다. ● static => 요소를 단순히 위에서 아래로 흐름에 맞춰 배치할 경우 사용하는 속성. 기본적으로 position을 선언하지 않았을 시 default 값이 static이다. 인라인은 좌에서 우로 블록태그는 위에서 아래로 배치 되는 정적인 배치를 할 경우 static을 통해 배치가 가능하다. ● relative => static일 시 배치된 위치를 기준으로 상대적인 이동을 할 경우 사용되는 속성. 안쪽의 블럭들의 자유로운 이동을 위해 static 속성을 없애기 위한 용도로 사..

form의 input태그의 속성중 radio 중복선택 문제 해결 ● radio : 라디오 버튼을 제공하는 type. 이 타입은 복수개의 input이 반드시 존재하며 checkbox와 많은 부분이 동일하지만 차이점이 있다면 체크박스는 값을 복수개를 선택하여 보낼 수 있는 반면 radio 버튼은 단수 개만 가능하다. 라디오1 라디오2 라디오3 해결방법 위 문제는 각각 radio 버튼의 라디오 버튼들이 묶여 있지않고 각각의 다른 영역으로 인식되기 때문이다. 이를 묶기 위해서는 name을 통일하여 선언한다. 라디오1 라디오2 라디오3 각각의 input 타입의 name값을 "ra"로 통일해주니 아래와 같이 해결됨.