YoonStudyNote

요소의 크기 이상으로 내용(자식요소)이 넘쳤을때, 내용의 보여짐을 제어 속성 값 값 의미 기본값 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이..

요소의 '외부(바깥) 여백'을 지정 값 의미 기본 값 단위 px, em, cm 등 단위로 지정 0 auto 브라우저가 너비를 계산 (보통 특수한 경우에 사용한다.) % 부모 요소의 너비에 대한 비율로 지정 .parent{ width : 400px; height: 200px; border : 4px solid tomato; } .child{ width: 100px; height: 100px; border : 4px solid; margin : 50% } 결과값을 보면 알 수 있듯이, 자식요소의 margin은 자식태그 기준에 50%가 아닌, 부모태그의 가로길이 50%로 만들어졌다는걸 알 수 있다. * 사용법 margin : 위 우 아래 좌; margin : 위 [좌, 우] 아래; margin : [위, 아래..

.parent{ width : 500px; height: 300px; border : 4px solid tomato; margin : 20px; } .child{ height: 200px; background : orange; } 다음과 같은 코드를 보면, parent클래스는 가로 길이가 500px로 정해져 있지만, child클래스는 정해져있지않다. child클래스의 가로길이는 부모클래스의 영향을 받아 100%여도 500px밖에 확장이 되지 않게 된다. 1. max-width, min-width, max-height, min-height 하지만, child클래스에 가로길이와 새로길이의 최대값과 최소값을 정해버리면 더이상 부모클래스 크기에 종속되지 않게 된다. .parent{ width : 500px; h..

1. 블럭 요소일때 .container{ width : auto; height : auto; background : tomato; } 다음과 같이 입력하면, 화면에 아무것도 나오지 않는다. width의 auto의 값은 100%이지만, height의 auto값은 0이기 때문이다. 그래서 height의 값을 변경하면 화면에 값을 볼 수 있게 된다. .container{ width : auto; height : 100px; background : tomato; } 2. 인라인 요소일때 하지만 이와같이 높이만 설정해도 출력이 되지않는 경우도 있다. span{ width : 100px; height : 100px; background : tomato; } 다음과 같이 입력하면 화면에 아무것도 출력되는것이 없다. ..

%는 부모 요소 크기의 영향을 받아서 크기를 결정하게 된다면, 1. em은 자신의 폰트 사이즈의 영향을 받는다. 그래서 보통 em은 조상요소 절대적인요소에 px단위로 크기를 지정하고, 그 밑에 하위 요소에는 em으로 설정을 많이한다. 그리고 상속의 개념이 있어서, 자식요소는 부모요소의 크기를 기반으로 단위를 측정한다. Container Parent Child1 Child2 body *{ border : 2px solid; } .container{ width : 60em; font-size : 15px; } .parent{ width : 30em; font-size : 2em; } .child{ width : 50%; font-size : 2em; } 여기서 알 수 있듯이, container클래스는 fon..