Life and IT

웹페이지의 레이아웃을 구성하기 위해서 공간을 분할해야 한다. 공간을 분할할 수 있는 태그는 div, span, table이 있다. 현재 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. IE에서 작동하지 않기 때문에 주의가 필요하겠지만, div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 시멘틱 태그를 사용하는 것이 더 나은 방법이다. 또한 div와 span에도 차이가 있는데, block 레벨 요소와 inline 레벨 요소에 대한 이해가 필요하다. 출처 poiemaweb.com/html5-tag-structure HTML5 Tag - Structure | PoiemaWeb 웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그 poiemaweb.com

1. form 사용자가 입력한 데이터를 수집하기 위해 사용 input, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있음 ... form elements (input, checkbox, radio button, submit button...) ... attribute 값 의미 action URL 입력 데이터가 전송될 URL 지정 method get / post 입력 데이터 전달 방식 지정 GET, POST는 HTTP 프로토콜을 이용하여 사용자 입력 데이터를 서버에 전달하는 방식 (HTTP request method) *HTTP 프로토콜 HTTP(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고받기 위한 서버/클라이언트..

1. 이미지 attribute 의미 src 파일의 경로 alt 파일이 없을 경우 표시되는 문장 width 너비 (일반적으로는 CSS에서 지정) height 높이 (일반적으로는 CSS에서 지정) 2. 미디어 2.1 오디오 HTML5에서 새롭게 추가된 기능이며, IE8 이하에서 사용이 불가하다. attribute 의미 src 파일의 경로 preload 재생 전에 파일을 모두 불러올 것인지 지정 autoplay 파일을 자동 재생으로 개시할 것인지 지정 loop 파일을 반복 재생할 것인지 지정 control 재생 도구를 표시할 것인지 (외관은 브라우저마다 다르다.) 브라우저 별 파일 지원 형식 여기서 source 태그를 사용하면 파일 형식의 차이 문제를 해결할 수 있다고 한다. 어떤 방식으로 해결하는지 궁금하여..

1. List 1.1 순서 없는 목록 (Unordered List) 순서없는 목록 (Unordered List) Coffee Tea Milk 1.2 순서있는 목록 (Ordered List) 순서있는 목록 (Ordered List) Coffee Tea Milk type 어트리뷰트 사용 Value 의미 "1" 숫자 (기본) "A" 대문자 알파벳 "a" 소문자 알파벳 "I" 대문자 로마숫자 "i" 소문자 로마숫자 Coffee Tea Milk start 어트리뷰트 사용 Coffee Tea Milk reversed 어트리뷰트 사용 Coffee Tea Milk 1.3 중첩 목록 중첩 목록 Coffee Tea Black tea Green tea Milk 내비게이션 메뉴에 자주 사용된다 2. 테이블 tag 의미 tab..

Hyper : 정보가 다중으로 연결되어 있는 상태 Hyper link : 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능 HTML Link = hyperlink a(anchor) tag가 그 역할을 담당한다. Visit google.com! 1. href 어트리뷰트 href 어트리뷰트는 이동하고자 하는 파일의 위치를 값으로 받는다. 1.1 디렉터리(폴더) 루트 디렉터리 (파일 시스템 계층 구조 상의 최상위 디렉터리) Unix : / Window : C:\ 홈 디렉터리 (시스템 사용자에게 할당된 개별 디렉터리) Unix : /Users/[계정명] Window : C:\Users\[계정명] 작업 디렉터리 (작업 중인 파일에 위치한 디렉터리) ./ 부모 디렉터리 (작업 디렉터리의 부모 디렉터리) ....

HTML5 Tag - Text 제목 중요도 순서 (semantic) > > > > > 글자 형태 semantic X semantic O 볼드체 기울임꼴 (상대적) 작은 글씨 하이라이트 삭제줄 밑줄 아래첨자 위첨자 본문 단락 줄바꿈 *empty element, 몇 개를 넣어도 하나의 줄바꿈으로 표시됨 연속 공백   *(non-break space) 형식화된 text 수평줄 *empty element 인용 (quotation) 긴 인용 블록문 출처 : poiemaweb.com/

1. 문서 형식 정의 Tag HTML5 2. html tag 웹페이지에 단 하나만 존재 화면에 표시할 모든 콘텐츠는 이곳에 기술한다. 글로벌 어트리뷰트를 지원하며, 특히 lang 어트리뷰트를 사용하는 경우가 많다. 3. head tag head 요소는 메타데이터를 포함하기 위한 요소, html 태그와 같이 웹페이지에 단 하나만 존재 화면에 표시되는 일체의 요소를 포함하지 않는다. 3.1 title tag 문서의 제목을 정의하며, 브라우저의 탭에 표시된다. 3.2 style tag HTML 문서를 위한 style 정보를 정의 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e..

Semantic Tag 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있게 하는 역할 Semantic Web 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상 non-semantic 태그 div, span 등이 있으며 content에 대하여 어떤 설명도 하지 않는다. semantic 태그 form, table, img 등이 있으며 content의 의미를 명확히 설명한다. HTML Semantic Element 출처 : poiemaweb.com/

1. HTML (HyperText Markup Language) 웹페이지를 기술하기 위한 마크업 언어 * 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지 * 태그 : 어떤 정보에 메타데이터로 부여된 키워드 또는 분류 즉, 웹페이지의 내용과 구조를 담당하는 언어 HTML5) 2014년 10월 28일 확정된 차세대 웹 표준 추가된 기능 1. 플래시 필요 없이 비디오 & 오디오 자체적 지원 2. SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽 지원 3. 서버와의 소켓 통신을 지원하여 이제 단방향이 아닌 양방향 통신이 가능 4. 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어 가능 5. 오프라인 상태에서 애플리케이션 동작 가능 ->..

1. 책이나 수업의 내용이 하나도 이해가 안 된다. 주변 개발자의 말을 알아들을 수 없다. - 기본적인 Computer Science에 대한 지식 부족 (ex. CPU, 2진수 .. etc) - 업계의 전문 용어에 대한 이해 부족 (ex. 변수.. etx ) - 기본적인 상식 부족 (ex. 문서나 메일을 포함한 언어 표현적인 능력) 2. 어떻게 만들어야할지 감도 안 잡힌다. - 문제 해결 능력 부족 - 문제 해결 능력 문제가 무엇인지 알아차리는 능력 + Computational thinking + 알고리즘 / 자료구조 + 경험 문제 해결 과정 해결 과제의 명확한 이해 - 복잡함을 단순하게 분해 - 자료를 정리, 구분(Modeling) - 순서에 맞게 행위 배열 알고리즘, 자료 구조에 대한 공부 필요 3...