개발새발 로그

모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)로 구성된다. 브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다. Box 모델을 구성하는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)에 대한 설명은 아래와 같다. Content 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다. Padding 테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명(tr..

CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. 키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다. 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px은 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다. px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다. 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 ..

style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표( , )로 구분한다. h1, h2 { color: red; } 전체 셀렉터 ( * ) HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다) * { color: red; } 태그 셀렉터 지정된 태그명을 가지는 요소를 선택한다. p { color: red; } ID 셀렉터 id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다. #p1 { color: red; } 클래스 셀렉터 class 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. c..

CSS는 HTML 요소의 style(design, layout etc)을 정의하는데 사용된다. 이를 위해서 선행되어야하는 것은 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 한다. 셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다. Link HTML에서 외부에 있는 CSS 파일을 로드하는 방식이다. 가장 일반적으로 사용된다. Embedding style HTML 내부에 CSS를 포함시키는 방식이다. Inline style HTML요소의 style 프로퍼티에 CSS를 기술하는 방식이다. Hello World Reset CSS 사용하기 Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용한다. Eric Meyer’s reset n..

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

1. 이미지 웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다. src 이미지 파일 경로 alt 이미지 파일이 없을 경우 표시되는 문장 width 이미지의 너비 (CSS에서 지정하는 것이 일반적) height 이미지의 높이 (CSS에서 지정하는 것이 일반적) 2. 미디어 2.1 audio audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다. src 음악 파일 경로 preload 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay 음악 파일을 자동의 재생 개시할 것인지 지정 loop 음악을 반복할 것인지 지정 controls 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. 웹브라우저 별로 지원하는 음악 파일..

1. List 순서없는 목록 (Unordered List) Coffee Tea Milk 순서있는 목록 (Ordered List) Coffee Tea Milk type 어트리뷰트를 사용하여 type="I" 이런 식으로 순서를 나타내는 문자를 지정할 수 있다. “1” 숫자 (기본값) “A” 대문자 알파벳 “a” 소문자 알파벳 “I” 대문자 로마숫자 “i” 소문자 로마숫자 start 어트리뷰트로 리스트의 시작값을 지정할 수 있다. start = "3" reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다. 중첩 목록 Coffee Tea Black tea Green tea Milk 2. table 표(table)를 만들 때 사용하는 태그이다. 과거에는 테이블 태그를 사용하여 레이아웃을 구성하기..

HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다. Visit google.com! 디렉터리(Directory) 디렉터리는 파일과 다른 디렉터리를 갖는 파일 시스템 내의 존재물로서 폴더라고도 불리운다. 파일 경로(File path) 파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법이다. 경로에는 절대경로와 상대경로가 있다. Go to top - 이걸로 브라우저 창 맨위로 이동도 가능 target 어트리뷰트 target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다. _self 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다 (기본값) _blank 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다 Visit go..