FE

1. formform 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다....form elements (input, checkbox, radio button, submit button...)... actionURL입력 데이터(form data)가 전송될 URL 지정methodget / post입력 데이터(form data) 전달 방식 지정GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라 한다1.1 GETGET 방식은 전송 URL에 입력 데이터를 쿼..

아래 내용은 원본 사이트 글을 정리한 내용입니다. 원본 사이트를 참고하실 분들은 링크를 페이지 하단에 남겼으니 참고하시면, 좋을거 같습니다.1. 제목 (Headings) 태그Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다. h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 크다.시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다. heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 2. 글자 형태 (Text Formatting) 태그2.1 bbold체를 지정한다. 제목 태그와 같이 의미론적(Seman..

1. 문서 형식 정의 tag문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달합니다.문서의 최상위에 위치해야 하며 대소문자를 구별하지 않습니다.2. html taghtml 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 는 예외입니다. 화면에 표시할 모든 콘텐츠는 이곳에 기술한다. 3. head taghead 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재합니다. 메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다. he..

시맨틱 태그란?이 세상에 존재하는 웹사이트들은 엄청나게 많고, 그것을 사용하는 유저들도 엄청나게 많습니다. 우리는 웹을 만들고, 결국 그 웹은 사용자에 의해 검색되어야지만, 사용될 수 있습니다. 이때, 필요로 한 개념이 바로 시맨틱 태그입니다.즉, 시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미(메타 데이터)를 명확히 설명하는 역할을 합니다.non - semantic 요소div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않습니다.semantic 요소form, table, img 등이 있으며, 이들 태그는 content의 의미를 명확히 설명합니다. 주로 사용 되는 시맨틱 태그로는header : 헤더를 의미합니다.nav : 내비게이션을 의미합니다.aside..

HTML이란?HTML은 웹페이지를 기술하기 위한 마크업 언어입니다. 조금 더 자세히 말하자면 웹페이지의 내용과 구조를 담당하는 언어로 주로 정보를 구조화 하는데 사용됩니다. 우리는 흔히 FE 개발하는데 있어 HTML,CSS,JS를 사용하게 되는데요. 이때, 비유를 통해 설명해보자면, HTML은 사람의 뼈, CSS는 뼈에 붙어 있는 근육, 그리고 JS는 사람을 움직이는 뇌라고 비유하면 편하실거 같습니다.마크업 언어란? 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어의 한 가지인데요, 위키백가에 따르면, 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다고 합니다. 따라서 일반적으로 데이터를 기술하는 정도로..

프로그래밍에서 변수를 선언하고 사용하는 것은 너무나 당연하게 여겨지지만, "왜 변수를 사용하는가?"라는 질문에 대해 깊이 고민해본 적이 없었습니다? 물론 전공 수업에서 배운 적은 있으나, 기억이 희미하기에 이번 글에서는 변수가 어떤 역할을 하는지, 그리고 메모리와 변수의 관계에 대해 한번 정리 해보려 합니다.컴퓨터는 데이터를 어떻게 저장하고 처리할까?컴퓨터는 CPU와 메모리를 활용해 데이터를 연산하고 처리합니다.CPU: 데이터를 읽고 연산하는 역할을 합니다.메모리: 데이터를 저장하고 필요할 때 CPU가 가져다 사용할 수 있도록 돕습니다.그러면 메모리란 무엇인가?메모리는 데이터를 저장할 수 있는 작은 공간들로 이루어져 있습니다. 이 공간을 메모리 셀이라고 하며, 각 셀의 크기는 1바이트(8비트)입니다. 모..

DOM(Document Object Model)텍스트 파일로 만들어져 있는 웹문서를 브라우저에 렌더링하려면, 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야합니다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여, 메모리에 적재하는데 이를 DOM이라 한다.즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다.이러한 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 제공하는데 이를 DOM API라고 부른다.정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는..

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어자바스크립트로 작성한 프로그램을 "스크립트라고 부른다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있으며, 웹페이지를 불러올 때 스크립트가 자동으로 실행 된다.브라우저에서 할 수 있는 일모던 자바스크립트는 ‘안전한’ 프로그래밍 언어이다. 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않는다. 애초에 이러한 접근이 필요치 않은 브라우저를 대상으로 만든 언어이기 때문이다.브라우저에서는 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든일을 할 수 있는데 다음과 같다.페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기..