Programmers

1) color 문자의 색상을 지정, 요소의 속성이 아닌 글자의 색상을 바꿀 때 사용하는 속성 속성 값 값 의미 기본값 색상 문자의 색상을 지정 reb(0, 0, 0) 색상 표현 표현 의미 예시 색상이름 브라우저에서 제공하는 색상의이름 red, blue Hex 색상코드 16 진수 색상(Hexadecimal Colors) #000000 RGB 빛의 삼원색 rgb(255, 255, 255) RGBA 빛의 삼원색, 투명도 rgba(255, 0, 0, .5) HSL 색상, 채도, 명도 hsl(120, 100%, 50%) HSLA 색상, 채도, 명도, 투명도 hsla(120, 100%, 50%, .3) ※ 위 표는 색상을 이용하는 모든 속성(property)의 값으로 사용할 수 있습니다. RGBA: Red, Gr..

1) font-family 글꼴(서체) 지정 속성 값 값 의미 기본값 글꼴이름 글꼴(서체) 후보 목록을 지정 serif 글꼴 계열 이름을 지정 sans-serif monospace cursive fantasy 사용법 font-family: [글꼴후보1, 글꼴후보2...], 글꼴 계열; .box { font-family: Arial, "Open Sans", "돋움", dotum, sans-serif; } ※ 글꼴 계열은 필수로 입력해야 한다. 이유: 원래는 사용자브라우저에서 웹사이트로부터 폰트를 다운받아서 사용해야 한다. 하지만 폰트는 용량이 크기 때문에 웹사이트에서 사용자브라우저로 폰트를 보내는 것 보다 폰트의 목록들을 주고 사용자브라우저의 운영체제에 있는 폰트를 사용하도록 명시함으로써 다운받아야 하는 ..

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값이 안 먹혀서 아무것도 출력이 되지 않는다. ..