나만의 코딩 일지

overflow 넘치다, 넘쳐나다 라는 뜻을 가진다. 요소 내의 콘텐츠가 너무 커서 요소 내에 모두 보여주기 힘들 때 내용물에 어떻게 보여줄지를 지정하는 속성 overflow가 가지는 속성들 hidden : 영역을 벗어나는 부분이 보이지 않게 처리 scroll : 영역을 벗어나는 부분의 양에 상관없이 스크롤바가 형성 auto : 요소가 영역을 넘지 않으면 스크롤바가 나오지 않고, 요소 안에 내용물이 넘치는 경우에 스크롤바가 형성 콘텐츠양이 일정 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1..

박스 나열 float float은 띄우다, 나열하다라는 뜻으로 말 그대로 박스를 나열하고자 할 때 사용하는 속성이다. float 기본 속성 none : 나열하지 않음 left : 외쪽으로부터 나열 right : 오른쪽으로부터 나열 initial : 기본 값으로 설정 inherit : 부모 요소로부터 상속 왼쪽으로 나열 box1 box2 box3 오른쪽으로 나열 box1 box2 box3 clear "해제한다"라는 의미를 갖는다. float와 함께 사용 float을 제거할 때 사용 clear 기본 속성 left : 좌측 나열을 제거 right : 우측 나열을 제거 both : 양쪽 나열을 제거 box1 box2 box3 float의 외쪽으로 나열돼 있던 box3이 clear의 left 속성을 지정해 왼쪽 ..

글자 관련 속성 color: 색상을 뜻하며 정확히는 글자 색상을 뜻한다. font-size : 글자 사이즈 - px, em, pt... 단위 font-weight : 글자의 굵기 - 100 ~ 900 [100-300 : 가늘게], [400-600 : 중간], [700-900 : 굵게] font-family : 글꼴 - 내 컴퓨터에 저장된 글자가 표현(웹 폰트 예외) font-style : 글자 스타일 - italic, normal 등 line-height : 행간, 줄 간격 - px, em, pt, %...단위 letter-spacing : 자간, 글자 사이의 간격 - 숫자 입력(px, %...) text-align : 문단 정렬(글자 정렬) - left, right, center text-decorat..

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