나만의 코딩 일지

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..

CSS 속성 글자 관련 속성 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-..

CSS CSS란 각 요소들이 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어로, 홈페이지의 스타일 즉 디자인 요소를 담당한다. CSS 기본 구조 외부 스타일 시트(External style sheet) 외부에 작성된 .CSS 문서 즉 스타일 시트 파일을 연결하여 적용하는 방법 내부 스타일 시트(Internal style sheet) 태그에태그를 사용하여 CSS 스타일을 적용하는 방법 인라인 스타일(Inline style} HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법 (실무에서는 권장하지 않음) 선택자 특정한 요소를 선택 해주는 것 -> 선택자라는 것을 통해 특정 요소들을 선택하여 스타일을 적용 전체 선택자 */ html 등장하는 모든 형태를 선택하는 선택자(초기..

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

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 :..