CSS (20) 썸네일형 리스트형 [CSS] 2. BOX 모델 (box-sizing: border-box) 👉 컨텐츠(Content): 텍스트, 이미지 등👉 테두리(Border): 요소 주위의 선, 여전히 요소 내부에 있음 border: 5px solid black; 이 때 그려지는 테두리 선이 border 라인 이다 👉 패딩(Padding): 컨텐츠 주위의 보이지 않는 공간, 요소 내부에 있음 border 와 컨텐츠 사이의 공간이다 👉 마진(Margin): 요소 외부의 공간, 요소들 사이의 공간 👉 채우기 영역(Fill area): 배경색이나 배경 이미지로 채워지는 영역 div { width: 300px; /* 콘텐츠의 너비 */ height: 200px; /* 콘텐츠의 높이 */ padding: 20px; /* 콘텐츠와 테두리 사이의 여백 */ border: 5.. [CSS] CSS 상속 CSS에서의 상속은 모든 속성이 상속되는 것이 아닌 주로 텍스트와 관련된 것들이 상속됩니다. 텍스트 관련 속성 colorfont-familyfont-sizefont-weightfont-styleline-heighttext-aligntext-transform상속되지 않는 속성레이아웃이나 박스 모델과 관련된 속성들은 일반적으로 상속되지 않습니다width, heightmargin, paddingborderbackgroundpositiondisplay예외 사항isibility와 opacity: visibility는 상속 가능, opacity는 상속 불가능list-style 관련 속성: list-style-type, list-style-position, list-style-image는 모두 상속 가능하지만 dis.. [CSS] CSS 적용 우선 순위 1. !important2. inline style (HTML에서 style을 직접 지정한 속성)3. ID( # ) 선택자4. Class( . ) 나 pseudo-class( : ) 선택자5. Element 선택자 ( p, div , li 등..)6. 전체 선택자 ( * ) 각 숫자에 해당하는 선택자가 여러 개 있고 서로 충돌되는 요소가 있으면마지막 선택자 값이 반영된다 [CSS] pseudo class CSS 의사 클래스(pseudo class)는 선택자에 추가되는 키워드로, 요소의 특정 상태를 지정합니다. 링크에 CSS 을 줄 때는 dynamic pseudo-classes 를 활용하여 아래처럼link , visited , hover , active 4개를 전부 꾸며줘야 합니다. /* 링크 스타일링 */ a:link { color: #1098ad; text-decoration: none; } a:visited { color: grey; } a:hover { color: orangered; font-weight: bold; text-decoration: underline orangered; } a:active { background-color: black; font-.. 이전 1 2 3 다음
