나만의 코딩 일지

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

, 태그 - 이미지 설명 글 붙이기 태그는 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서안에서 한 단위가 된는 요소를 묶을 때 사용한다. 한 단위가 되는 요소를 나타내기 위해서는 태그만 사용하고 설명 글을 사용하기 위해서는 태그 안에 태그를 사용해 설명 글을 표시한다. 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 : 단과 단 사이의 여백을..