Today Hailie Learned

visibility 속성 요소의 화면 표시 여부를 지정하는 속성입니다. 기본 값 : visible visibility: visible | hidden | collapse | initial | inherit; visible 화면에 표시 hidden 화면에 표시되지 않음(공간은 차지함) collapse 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능) / 익스프로어, 파이어폭스에만 사용 visibility: visible; /* 보임 기본값 */ visibility: hidden; /* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */ visibility: collapse; /* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지..

display 속성 요소의 렌더링 박스 유형을 결정하는 속성입니다. 기본 값 : - (요소마다 다름) display: value; none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 / 그 구역만 차지 block block level 요소처럼 렌더링 / 전체 다 차지 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다. 배치는 inline처럼, box model은 block처럼! 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재 inline level 요소 사이의 공백과 개..

font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용한다. font-family 속성 글꼴을 지정하는 속성입니다. font-family: family-name | generic-family ( | initial | inherit ); family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다. generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-fam..

width width 속성은 요소의 가로 크기를 정의하는 데 사용하는 속성이고, 정확히는 content 영역의 너비를 지정하는 것을 의미한다. 크기를 지정한다는 것은 같지만, 요소의 종류나 특징에 따라서 다르게 동작하기도 한다. 요소의 가로 크기를 지정하는 width 속성은 인라인 레벨 요소를 제외한 모든 요소에 적용됩니다. 블록&인라인 강의에서 다룬 블록 레벨 요소와 인라인 레벨 요소의 특징을 되짚어보시기 바랍니다. width 속성 기본 값 : 0 auto 브라우저에 의해 자동으로 계산하여 적용합니다. * 요소의 레벨 기본 특성에 따라 다르게 동작합니다. length 고정값으로 지정합니다. (ex. px, em ....) percent 부모 요소의 width에 상대적인 크기를 지정합니다. width는 ..

HTML의 모든 요소는 사각형의 박스 형태로 만들어집니다. 박스는 총 4가지의 세분된 영역으로 구성되어있으며 영역마다 다양한 스타일을 적용할 수 있습니다. 이 4가지 영역을 통틀어서 박스모델이라고 합니다. Content 영역 요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비 및 높이를 나타냅니다. Border 영역 content 영역을 감싸는 테두리 선을 border라고 합니다. Padding 영역 content 영역과 테두리 사이의 여백을 padding이라고 합니다. content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다. 이에 따라 padding을 content의 연장으로 볼 수도 있습니다. Margin 영역 border 바깥쪽의 영역을 margin이라..

= 블록 요소이기 때문에 텍스트를 포함한 전체 콘텐츠 영역만큼 배경을 차지한다. (전체너비) = 인라인 요소이기 때문에 텍스트의 길이 만큼의 배경을 차지한다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. background 관련 속성 background-color 기본 값 : transparent 배경의 색상을 지정하는 속성이다. 색상 값 적용 방식과 같다. background-image 기본 값 : none 배경으로 사용할 이미지의 경로를 지정하는 속성입니다. url의 경로는 절대 경로, 상대 경로 모두 사용 가능합니다. 만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한..

절대 길이 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다. px ( 1px = 1/96th of 1 inch ) 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다. pt ( 1pt - 1/72 of 1 inch ) 컴퓨터가 없던 시절부터 있던 단위입니다. 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다. 웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다. 그러나 사용하는 기기의 해상도..

👇예제, 정의, 사용방법 확인할 수 있다. 👇 https://www.w3schools.com/cssref/ CSS Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com ⬆️위의 홈페이지에서 사용하고자 하는 속성의 정의, 문법, 속성 값, 지원범위, 예제를 확인할 수 있습니다. 문법 = syntax initial: 속성의 기본값으로 초기화된다. (익스플로어에는 ..

cascading 캐스케이딩 이란? 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙이다. cascading은 폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며, 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용된다. 구체성은 cascading 규칙 중 하나!! 구체성이 같은 두 규칙이 동일한 요소에 적용된다면 어떻게 될까요? h1 { color: red; } h1 { color: blue; } ⬆️의 결과로 에는 color: blue가 적용되며 이는 cascading 규칙에 의해 적용된 결과입니다. cascading 규칙 cascading에는 다음과 같이 3가지 규칙이 있습니다. 중요도(!important)와 출처 구체성 선언 순서 !important로 선언된..

CSS에서 상속은 우리가 기본적으로 알고 있는 부모가 가진 특성을 자식이 물려받는 개념과 같다. 어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것을 말한다. 상속은 구체성과 더불어 스타일 규칙들이 문서에 어떻게 적용되는지 이해하기 위한 또 다른 중요한 핵심 개념! 상속 관계를 잘 활용하여 CSS의 생산성을 높일 수 있다. css h1 { color: gray; } html Hello, CSS ⬆️ 위에서 요소는 부모의 칼라인 gray를 상속받을까? 은 부모인 의 color: gray를 상속받는다. 상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아니다. 아직 속성에 대해 다 배우지는 않았지만, margin, padding, background, border 등 박..