나만의 코딩 일지

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

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