Programmers

1) line-height 줄 높이(줄 간격) 지정, 행간 속성 값 값 의미 기본값 normal 브라우저의 기본 정의를 사용(1~1.4) normal 숫자 요소 자체 글꼴 크기의 배수로 지정 단위 px, em, cm등 단위로 지정 % 요소 자체 글꼴 크기의 비율로 지정 ※ 보통은 1.4 ~ 1.7정도의 line-height로 사용한다. 숫자사용▷ line-height: 2; 코드 html Helping Small Businesses Succeed The primary goal of certification is to level the playing field by providing certified firms a fair opportunity to compete for government contract..

1) font-size 글자의 크기를 지정 속성 값 값 의미 기본값 단위 px, em, cm등으로 단위 지정 16px % 부모(상위)요소의 비율로 지정 xx-small 가장 작은 크기 x-small 더 작은 크기 small 작은 크기 medium 중간 크기 medium large 큰 크기 x-large 더 큰 크기 xx-large 가장 큰 크기 smaller 부모(상위)요소보다 작은 크기 larger 부모(상위)요소보다 큰 크기 ※ 가능하면 단위와 %를 사용, 나머지는 불명확하다. font-size의 기본값은 16이다. 만약에 기본값을 변경하거나 명확하게 하고 싶다면 css의 body태그에서 font-size:16px;로 지정해주면 된다.

1) font-weight 글자의 두께(가중치)를 지정 속성 값 값 의미 기본값 normal 기본 글자 두께, 400과 동일 normal (400) bold 글자 두껍게, 700과 동일 bolder 부모(상위)요소보다 더 얇게 lighter 부모(상위) 요소보다 더 얇게 숫자 100부터 900까지의 100단위의 숫자 9개, normal과 bold 이외의 두께를 제공하는 글꼴(서체)를 위한 설정 일반적인 두께의 이름 font-weight의 각 값은 일반적으로 다음과 같은 글꼴의 이름으로 표현됨 값 일반적인 두께 이름 100 Thin(Hairline) 200 Extra Light(Ultra Light) 300 Light 400 Normal 500 Medium 600 Semi Bold(Demi Bold) 70..

1) opacity 요소의 투명도를 지정 속성 값 값 의미 기본값 숫자 0부터 1사이의 소수점 숫자 1 사용법 border: 투명도(0~1소수점); .half { opacity: 0.5;/* 50% 투명도, 반투명 */ } .transparent { opacity: 0;/* 0% 투명도, 투명 */ } .box { opacity: .75;/* 75% 투명도, 반투명 */ } ※ .75 = 0.75 코드 opacity: 1; html 123 css .parent { width: 300px; height: 250px; background: blue; overflow: auto; } .parent .child { width: 150px; height: 100px; background: tomato; displ..

1) overflow 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어 속성 값 값 의미 기본값 visible 넘친 부분을 자르지 않고 그대로 보여줌 visible hidden 넘친 부분을 잘라내고, 보이지 않도록 함 scroll 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 auto 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼수 있도록 함 ※ scroll: 강제 ※ auto: 자동 사용법) overflow: visible; html 1 2 3 .parent { width: 300px; height: 250px; border: 4px solid; overflow: visible; } .parent .child { width: 100px; height: ..

1) display 요소의 박스 타입(유형)을 설정 속성 값 값 의미 기본값 block 블록 요소( 등) inline 인라인 요소( 등) inline-block 인라인-블록 요소( 등) 기타 table, table-cell, flex 등 none 요소의 박스 타입이 없음(요소가 사라짐) ※ block: 가로, 세로, 패딩, 마진 사용 가능 ※ inline: 가로, 세로, 패딩, 마진 사용 불가능, 우측으로 쌓임, 텍스트를 다루는데 특화 ※ inline-block: inline의 특성을 가지지만 가로, 세로, 패딩, 마진의 위아래를 사용 가능 display: none; 화면에서 사라짐 사용법 ※ span태그는 inline요소이기 때문에 width, height값이 안 먹혀서 아무것도 출력이 되지 않는다. ..

1) box-sizing 요소의 크기 계산 기준을 지정 속성 값 값 의미 기본값 content-box 너비(width, height)만으로 요소의 크기를 계산 content-box border-box 너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산 사용법 html css .box { width: 200px; height: 200px; background: orange; padding: 40px; border: 10px solid red; } ※ 개발자도구를 통해 영역을 확인해보면 200x200인 default(content-box)를 고정하고 padding을 더하기 때문에 당연히 크기가 커진다. border-box속성을 추가하면 외부 ..

1) border 요소의 '테두리 선'을 지정 속성 값 값 의미 기본값 border-width 선의 두께(너비) medium border-style 선의 종류 none border-color 선의 색상 black 사용법 border: 두께 종류 색상; .box { border: 1px solid red; } 2) border-width 선의 두께(너비)를 지정 속성 값 값 의미 기본값 medium 중간 두께 medium thin 얇은 두께 thick 두꺼운 두께 단위 px, em, cm 등 단위로 지정 ※ 단위로 지정하는 것을 추천 사용법 border-width: 위 우 아래 좌; border-width: 위 [좌,우] 아래; border-width: [위, 아래] [좌, 우]; border-width:..