나만의 코딩 일지

lex 박스 레이아웃 플렉스 박스 레이아웃(flex box layout)이란 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것이다. 이 플렉스 박스를 이용하면 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있다. flex 레이아웃 사용방법 flex 레이아웃은 display 속성을 이용해 flex 레이아웃을 지정한다. flex 레이아웃은 block속성과 inline속성과 달리 레이아웃을 지정하려는 위치에 직접 레이아웃을 지정하는 것이 아니라 부모 태그에 flex 레이아웃을 지정해줘야 한다. flex 레이아웃은 기본적으로 왼쪽에서 오른쪽으로 수평 방향으로 박스가 나열된다. (inline 레이아웃과 같은 속성을 갖는다.) flex 레이아웃의 진행 반향을 주축이라고 하며 주축의..

태그 - 폼 만들기 태그는 폼을 만드는 가장 기본적인 태그로 태그와 태그 사이에 여러 폼 요소와 관련된 태그를 넣는다. 태그의 속성 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 : 링크..