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..

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

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 속성을 없애기 위한 용도로 사..

개발자 도구를 열어보면 이렇게 margin , border , padding , content의 각각의 영역을 확인 할 수 있다. box-sizing 속성은 2가지가 있는데 content-box , border-box 두 가지가 있으며 이 중 default값은 cotent-box 이다. content-box는 기본 content만 지정하는 것을 말하고, border-box는 박스 사이즈를 결정할 때 border , padding, content 3가지를 합쳐서 포함하는 것을 말한다. 아래의 코드 예시와 결과 값을 비교해보자. ※ 실행결과 및 box-sizing 주의 할 점 및 용도 같은 크기의 너비와 높이로 코드를 작성했지만 content-box는 그 너비와 높이에 border , padding, con..