YoonStudyNote

글자 크기를 지정 속성 값 값 의미 기본값 단위 px, em, cm 등 단위로 지정 16px % 부모(상위) 요소의 비율로 지정 -->주로 em을 추천 xx-small 가장 작은 크기 주로 사용하지 않는다 x-small 더 작은 크기 주로 사용하지 않는다 small 작은 크기 주로 사용하지 않는다 medium 중간 크기 주로 사용하지 않는다 large 큰 크기 주로 사용하지 않는다 x-large 더 큰 크기 주로 사용하지 않는다 xx-large 가장 큰 크기 주로 사용하지 않는다 smaller 부모(상위) 요소보다 작은 크기 주로 사용하지 않는다 larger 부모(상위) 요소보다 큰 크기 주로 사용하지 않는다 body{ font-size : 14px; } font-size는 기본적으로 16px값으로 지정..

글자 두께(가중치)를 지정 값 의미 기본값 normal 기본 글자 두께, 400과 동일 normal(400) bold 글자 두껍게, 700과 동일 bolder 부모(상위) 요소보다 더 두껍게 (bold보다 두껍다는 개념이 아님) 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)..

font 글자 관련 속성들을 지정 값 의미 기본값 font-style 글자 기울기 지정 normal font-weight 글자 두께 지정 normal font-size 글자 크기 지정 medium(16px) line-height 줄 높이(줄 간격) 지정 normal(Reset.css 적용시 1) font-family 글꼴(서체) 지정 운영체제(브라우저)에 따라 달라짐 font : 기울기 두께 크기 / 줄높이 글꼴; 기울기, 두께, 글꼴은 순서가 바뀌어도 제대로 동작한다. 하지만 크기 / 줄높이는 순서가 바뀌면 안된다. .box { font : italic bold 20px / 1.5 "Arial", sans-serif; } .box{ font: 30px / 1.5; /* ERROR */ font: bol..

요소의 투명도를 지정 속성 값 값 의미 기본값 숫자 0부터 1사이의 소수점 숫자 1 사용법 opacity: 투명도 .half{ opacity: 0.5; /* 50%투명도, 반투명 */ } .transparent{ opacity: 0; /* 0%투명도, 투명 */ } .box{ opacity: .75; /* 75%투명도, 반투명(0을 생략하기도 한다) */ } display: none VS opacity: 0 display:none은 요소를 없애버리는거고, opacity는 요소를 안보이게 만드는것이다.

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

요소의 박스 타입(유형)을 설정 속성 값 값 의미 block 블록 요소 inline 인라인 요소 inline-block 인라인-블록 요소(등) 인라인 요소이지만, 추가적으로 블록의 특성을 추가적으로 가지고 있다. 즉, width&height&margin&padding의 값을 가질 수 있다. 기타 table, table-cell, flex 등 none 요소의 박스 타입이 없음(요소가 사라짐) 1. 인라인 요소를 블록 요소로 바꿈 span{ display: block; width: 100px; height: 100px; background: tomato; } 2. 블록 요소를 인라인 요소로 바꿈 div{ display: inline; width: 100px; height: 100px; background: ..

요소의 크기 계산 기준을 지정 속성 값 값 의미 기본값 content-box 너비(width, height)만으로 요소의 크기를 계산 content-box border-box 너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산 상황에 따라서 content-box를 사용할것인지 border-box를 사용할것인지 결정하면 된다.

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

요소의 '내부(안) 여백'을 지정 속성 값 값 의미 기본값 단위 px, em, cm 등 단위로 지정 0 % 부모 요소의 너비에 대한 비율로 지정 사용법 padding : 위 우 아래 좌; padding : 위 [좌, 우] 아래; padding : [위, 아래] [좌,우]; padding : [위, 아래, 좌, 우]; .box{ padding: 10px 20px 30px 40px; padding: 10px 20px 40px; padding: 10px 40px; padding: 10px; } 크기 증가 추가된 padding 값만큼 요소의 크기가 커지는 현상 Hello world! div { width: 100px; height: 100px; background : tomato; } padding값을 추가하면..

마진 특정 값들이 '중복'되어 합쳐지는 현상 "마진 중복"은 버그(오류)가 아니다. 현상을 우회하거나 응용할 수 있다. 마진 중복이 생기는 현상 1. 형제 요소들의 margin-top과 margin-bottom이 만났을때 2. 부모 요소의 margin-top과 자식요소의 margin-top이 만났을때 3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을때 예시 1) 일단 reset을 사용하고 실험을 해봤다. .parent{ } .child{ width: 100px; height: 100px; background : tomato; float : left; margin : 20px; } margin은 20px씩 떨어지게 만들었다. 하지만, 다음 margin은 20+20이..