나만의 코딩 일지

태그 - 폼 만들기 태그는 폼을 만드는 가장 기본적인 태그로 태그와 태그 사이에 여러 폼 요소와 관련된 태그를 넣는다. 태그의 속성 method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다. 속성 값 : get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 256byte ~ 4096byte까지의 데이터만 서버로 넘길 수 있다.(입력 길이에 제한을 받는다.) post : 대부분 이 방식을 사용한다. 사용자의 입력을 표준 입력(Standard input)으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러자지 않는다. name : 폼의 이름을 지정한다. 한 문서 안에 여러 개의 태그가 있을 경우, 폼들을 구분하기 위해 사용한다. a..

텍스트를 덩어리로 묶어주는 태그 는 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경우 줄이 자동으로 바뀐다. 태그는 horizintal의 줄임말로, 수평(가로) 줄을 삽입할 때 사용한다 보통 분위기 전환을 할 때 사용한다. 인용문을 넣을 때 사용한다. 태그를 사용할 경우, 소스에 표시한 공백이 브라우저에 그대로 표시된다. (preformat의 줄임말t) 텍스트를 한 줄로 표시하는 태그 태그, 태그 -> 굵게 표시하기 차이점 : 태그는 여러번 겹쳐 쓸 수 있고 보통 경고나 주의 사항처럼 중요한 내용을 강조할 때 사용한다. 태그는 단순히 굵게 표현할 때 사용한다. 태그, 태그 -> 이탤릭체로 표시하기 차이점 : : 이탤릭체로 강조할 때 사용한다. : 단순히 이탤릭체로 ..

background-image 속성 - 웹 요소에 배경 이미지 넣기 background-image : url('이미지 경로'); background-repeat 속성 - 배경 이미지 반복 방법 지정하기 background-repeat : repeat | repeat-x | repeat-y | no-repeat repeat : 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복 repeat-x : 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복 repeat-y : 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복 no-repeat : 배경 이미지를 한 번만 표시하고 반복하지 않는다. background-clip 속성 - 배경 적용 범위 조절하기 background-cl..

caption-side 속성 - 표 제목 위치 정하기 caption-side : top | bottom top : 캡션을 표의 윗부분에 표시 (기본 값) bottom : 캡션을 표의 아랫부분을 표시 border-collapse 속성 - 테두리 통합 분리하기 border-collapse : collapse | separate collapse : 테두리를 하나로 합쳐 표시 separate : 테두리를 따로 표시 (기본 값) border-spacing 속성 - 인접한 셀 테두리 사이 거리 지정하기 border-spacing 속성은 border-collapse: separate를 사용해 셀들을 분리했을 경우, 인접한 셀 테두리 사이의 거리를 지정한다. border-spacing : border-spacing :..

box-sizing 속성 - 박스 너비 기준 정하기 box-sizing 속성은 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성을 지정할 수 있다. box-sizing: content-box | border-box content-box : width 속성 값을 콘텐츠 영역 너비 값으로 사용한다.(기본 값) border-box : width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용한다. float 속성 - 왼쪽이나 오른쪽으로 배치하기 float 속성은 '떠 있다' 라는 의미로 외쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻이다. left : 해당 요소를 왼쪽으로 배치 right : 해당 요소를 오른쪽으로 배치 none : 좌우 어느 쪽으로도 배치하지 ..

태그 - 오디오 파일 삽입하기 태그 속성들 autoplay : 오디오를 자동 재생 controls : 웹 화면에 컨트롤 막대를 표시. 컨트롤 막대에는 재생/멈춤, 진행 바, 불륨 등이 표시 (플레이어) loop : 오디오를 반복 재생 muted : 오디오를 재생해 진행하지만 소리는 끔 preload : 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해 준비해 둔다. 태그 - 비디오 파일 삽입하기 poster : 브라우저 문제나 인터넷 연결 문제 등 비디오를 재생할 수 없을 겨우, 비디오 화면 자리에 대신 표시하는 이미지를 '포스토 이미지'한다. 태그 - 여러 미디어 파일 한꺼번에 지정하기 src : 미디어 파일의 경로를 지정하는 필수 속성으로 파일 경로를 지정할 때는 경로에 공백이 있으면 안된다...

, 태그 - 이미지 설명 글 붙이기 태그는 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서안에서 한 단위가 된는 요소를 묶을 때 사용한다. 한 단위가 되는 요소를 나타내기 위해서는 태그만 사용하고 설명 글을 사용하기 위해서는 태그 안에 태그를 사용해 설명 글을 표시한다. ex) 링크 만들기 태그 속성 href : 링크한 문서나 사이트의 주소를 입력한다. target : 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정한다. download : 링크한 내용을 보여 주는 것이 아니라 다운로드한다. rel : 현재 문서와 링크한 문서의 관계를 알려준다. hreflang : 링크한 문서의 언어를 지정 type : 링크..

column-width -> 단의 너비 고정하고 다단 구성하기 column-width는 다단으로 편집할 때 단의 너비를 고정해 놓기 위해서 사용한다. column-width : | auto : 단 너비를 직접 지정한다. auto : 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 지동 계산된다. column-count 속성 - 단의 개수 고정하고 다단 구성하기 column-count : | auto : 콘텐츠가 들어갈 단의 개수를 지정한다. 0보다 큰 수를 사용 auto : 단의 너비(column-width) 같은 다른 속성에 따라 단의 개수가 자동 계산된다. column-gap 속성 - 단과 단 사이 여백 지정하기 column-gap : | normal : 단과 단 사이의 여백을..