Frank의 공부 일지

CSS는 HTML 요소의 스타일을 정의하는데 그러려면 HTML이 존재하고 또한 스타일을 적용하고자 하는 HTML 요소에 특정할 필요가 있다. 이럴 때 셀렉터가 사용된다. 복수 개의 셀렉터를 연속하여 지정할 수 있고 쉼표로 구분한다. h1, p { color: red; } 1. 전체 셀렉터 * - HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함) * { color: red; } 2. 태그 셀렉터 - 지정된 태그명을 가지는 요소를 선택 p { color: red; } -> 모든 p 태그 요소를 선택 3. ID 셀렉터 #id 속성 값 - id 속성 값을 지정하여 일치하는 요소를 선택. 중복될 수 없는 유일한 값 #p1 { color: red; }..

CSS는 HTML이나 XML과 같은 구조화 된 문서를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, HTML의 각 요소의 style을 정의하여 화면 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다. HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS가 없이도 어느 정도의 스타일 표현이 가능하였으나 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가됨으로서 복잡하고 혼란스러운 언어가 되어 버렸다. 그래서 HTML5 에서는 HTML은 정보와 구조화, CSS는 styling 정의라는 본연의 임무에 충실한 명확한 구분이 이루어졌다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며..

header - 헤더를 의미 nav - 내비게이션을 의미 aside - 사이드에 위치하는 공간을 의미 section - 본문의 여러 내용을 포함하는 공간을 의미 article - 본문의 주내용이 들어가는 공간을 의미 footer - 푸터를 의미 이와 같은 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할을 하게 된다.

1. form - 사용자가 입력한 데이터를 수집하기 위해 사용되면 입력 양식 태그를 포함할 수 있다. 속성 action(value: URL) - 입력 데이터가 전송될 URL 지정 method(value: get/post) - 입력 데이터 전달 방식 지정 get/post는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라고 한다. GET - 전송 URL에 입력 데이터를 쿼리 스트링으로 보내는 방식 예) http://tistory.com/posts?userId=1&id=1 전송 URL 바로 뒤에 '?'를 통해 데이터의 시작을 알려주고 key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 '&'로 구분한다 - URL에 전송 ..

1. 이미지 속성 src - 이미지 파일 경로 alt - 이미지 파일이 없을 경우 표시되는 문장 width - 이미지의 너비 height - 이미지의 높이 2. 오디오 속성 src - 음악 파일 경로 preload - 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay - 음악 파일을 자동의 재생할 것인지 지정 loop - 음악을 반복할 것인지 지정 controls - 음악 재생 도구를 표시할 것인지 지정 3. 비디오 속성 src - 동영상 파일 경로 poster - 동영상 준비 중에 표시될 이미지 파일 경로 preload - 재생 전에 동영상 파일을 모두 불러올 것인지 지정 autoplay - 동영상 파일을 자동 재생할 것인지 지정 loop - 동영상을 반복할 것인지 지정 controls ..

1. 목록 1) 순서없는 목록 2) 순서있는 목록 3) type 속성 사용하여 순서 나타내는 문자 지정 가능 "1" - 숫자 (기본값) "A" - 대문자 알파벳 "a" - 소문자 알파벳 "I" - 대문자 로마숫자 "i" - 소문자 로마숫자 4) start 속성 사용하여 리스트의 시작값 지정 가능 5) reversed 속성 사용하여 리스트의 순서값 역으로 표현 가능 6) 중첩 목록 2. 테이블 table - 표를 감싸는 태그 tr - 표 내부의 행 th - 행 내부의 제목 셀 td - 행 내부의 일반 셀 1) 테이블 태그의 속성 border - 표 테두리 두께 지정 rowspan - 해당 셀이 점유하는 행의 수 지정 colspan - 해당 셀이 점유하는 열의 수 지정

분산버전관리시스템 git vs git hub git은 소스 코드를 관리할 수 있는 툴이고 git hub은 클라우드 서비스 git으로 관리하고 있는 코드들은 git hub에 올린 다음에 git hub에서 많은 사람들과 공유도 하고 수정도 할 수 있게 해준다. git init - git 저장소 생성 git status - git 상태 확인 Working Directory Staging Area Git repository(local) Git repository(remote) -> -> -> git add git commit git push .gitignore 하면 저장소에서 입력한 폴더는 없어지게 되는데 git add 하기 전에 해야 한다. 안전하게 git hub에 통신하려면 SSH(Secure Shell)을..

HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 하이퍼링크라고 한다. HTML link는 hyperlink를 의미하며 a tag가 그 역할을 한다. 1. href 속성 이동하고자 하는 파일의 파일 시스템 상에서 특정 파일의 위치를 값으로 받는다. 사용 가능한 값은 아래와 같다 1) 절대 URL - 웹사이트 URL 2) 상대 URL - 자신의 위치를 기준으로한 대상의..

HTML 콘텐츠의 대부분은 텍스트로 구성된다. 1. 제목 태그 h1~h6까지 있으며 h1이 가장 중요한 제목을 의미하고 글자의 크기도 가장 크다. 시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 2. 글자 형태 태그 1) b - bold체 지정 2) strong - b와 동일하게 bold체 지정 하지만 중요한 의미를 갖는다. 웹표준을 준수하고자 하면 strong 사용하는 것이 바람직 3) i - Italic체 지정 4) em - emphasize text 지정 i tag와 동일하게 Italic체로 표현. 중요한 의미를 갖는다. 5) small - small text를 지정 6) mark - highlighted text를 지정 7) del - deleted text 지정 글자 앞에 -..

1. 문서 형식 정의 태그 html5 - 2. HTML 태그 html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재 3. head 태그 head 요소는 메타데이터(데이터의 데이터)를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재 head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다. 4. title 태그 문서의 제목을 정의, 정의된 제목은 브라우저의 탭에 표시된다. 5. style 태그 HTML 문서를 위한 style 정보를 정의(color 등) 6. link 태그 외부 리소스와의 연계 정보를 정의. 주로 HTML과 외부 CSS 파일을 연계에 사용된다. 예)