display : display 에는 주요 inline . block . inline-block . none 요소 들이 있다. : inline 기본적으로 텍스트 속성을 가져 인라인 요소간의 수평 나열이 가능. 크기 지정은 불가. : block 높이는 내부 컨텐트에 의해 결정되지만 , 너비는 수평 영역 전체를 차지. 수평나열이 불가. :inline-block 인라인 요소와 같이 요소간의 수평 나열이 가능하면서도 , 블럭 요소와 같이 크기 지정이 가능한 특성. a { display: inline-block; width: 5em; height: 5em; text-align: center; line-height: 5em; } div { display: inline-block; width: 5em; height:..
헷갈림의 주의 하자, 이전에 배운 vh 와 vw 도 함께 보자. vh 단위 : viewport의 높이에 대한 백분율. vw 단위 : viewport의 너비에 대한 백분율. min-width : ( 이상 - 너비 ) 요소가 가질 수 있는 최소 너비를 지정. 단 , 이는 요소의 최초 너비를 지정하는 것. 브라우저 창의 너비를 늘린다고해서 그 최대 크기를 제한하지 않음. 제한 함으로 스크롤이 생성되나, 브라우저 창의 너비가 min-width 보다 큰 경우 요소 최대 크기를 제한하지 않음의 주의. max-width : ( 이하 - 너비 ) 요소가 가질 수 있는 최대 너비를 지정. 브라우저 창의 너비를 늘려도 요소의 너비가 최대 너비로 제한됨. min-height : ( 이상 - 높이 ) 요소가 가질 수 있는 최..
viewport 를 알아보기 이전에 블럭 레벨 요소 와 % 단위의 특성을 한번 더 확인하고 가자. 블럭 레벨 요소는 높이는 내부컨텐트에 의해 결정되나 , 너비는 수평영역 전체를 차지. % 는 부모 요소를 기준으로 부모 요소의 컨텐트 영역 내에서 상대적 백분율 적용. p태그는 블럭 레벨 요소이다. 부모요소에 별도의 높이가 결정되지 않는 이상, p 태그의 높이에 대한 100% 지정은 부모 요소내에서 그 크기가 상대적으로 결정되는 % 단위의 특성과 내부 컨텐트의 크기에 의하여 높이가 결정되는 body 와 html등의 블럭 요소 특성이 서로 상쇄되어 의미 없는 높이 지정에 불과하다. p{ height: 100%; /*바보 코딩*/ } 부모의 컨텐트 영역 내에서 상대적 비율이 적용되는 % 단위의 특성으로 인해 p..
% / em / rem / root 를 쓰는 이유 ? 사용처에 의해 화면 배율이 달라졌을 경우 px 로 직접 지정한다면 , 추후 사용처 마다 직접 전부 수정해야 하는 단점이 있음. 하지만 비율로 적용 시키게 되면 , 사용처 마다 자연스럽게 비율로 따라가게 됨. % 단위 부모 요소를 기준으로 적용되는 모든 단위에 대한 상대적 백분율. 부모요소 중첩 , 계층별 부모요소에 % 단위가 각각 적용시 → 누적 비율 적용. section:nth-child(1) p { background-color: brown; font-size: 80%; /* 16px * 0.8 = 12.8px */ } section:nth-child(1) p strong { color: white; font-size: 150%; /* 12.8px..
색상명 지정 약속된 고유한 색상명을 직접 지정. VSCODE 에서는 지정후 , 마우스 포인터를 가져가면 rgb view 를 통해 직접 지정 가능. rgb와 opacity 2가지 방법이 있다. 16진수 값 또는 함수형 표현. 1) 16진수 값의 지정. 접두사 # 뒤에 색상 3가지를 2자리씩 묶어 혼합하는 형태 형식 : # ff ff ff [ff] red green bule [ opacity ] 16 진수의 값이 클수록 빛의 세기가 증가 → 명도 증가 16 진수의 값이 작을수록 빛의 세기가 감소 → 명도 감소 #ffffff[ff] 흰색 #000000[00] 검은색 ul:nth-of-type(2) li:first-child { background-color: #ff0000; /* background-color..
선택자의 우선순위 지난번의 스타일 우선순위를 알아보았다. 선택자의 우선순위도 같이 본다면 , 이해하기에 도움이 될듯 하다. !important > 인라인스타일 > id 선택자 > 클래스 선택자 > 태그 선택자 > 범용 선택자 일반적인 선택자 우선순위는 계층이 동일한 경우 위에 명시된 순서로 우선 순위가 적용된다. 상속계층간에서의 스타일 적용은 계층이 다를 경우 , 일반적인 선택자 우선순위가 무시되고 , 가장 가깝고 명시적 표현이 우선 적용 된다. important는 특별한 경우 ( 다른 사용자의 스타일 코드를 차용하여 수정이 필요한 경우) 를 제외하고는 사용을 지양할 것. CSS Priority CSS priority settings!! 범용 선택자 스타일 우선 적용!! Complete!! CSS pri..