CSS(10)
-
Day3 VSCODE_CSS 마진+ 박스사이징 + 디스플레이 + 포지션
마진(Margin) - 테두리(border)와 이웃하는 요소들의 간격 - 마진은 눈에 보이지 않음 - 세로 겹침 현상이 일어난다. ✔ 세로 겹침 현상 세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 더 큰 값을 선택하는 현상 박스사이징(Box-Sizing) - width, height 값에 padding border영역은 포함되지 않는다.(content 크기만!) - 만약content width가 100%로 설정되는 경우 padding이나 border 속성을 사용하면 content가 찌그러진다. - box -sizing속성값을 border-box로 설정하면, width와 height값에 padding과 border를 포함 -> 한마디로 찌그러지지 않는다. 디스플레이 - 웹페이지의 레이아웃을..
2023.03.29 -
Day3_VSCODE_CSS 텍스트+ 배경+ 패딩+ 테두리
폰트 🟡font-size 텍스트 크기를 지정 속성: px % em rem (em은 default가 pc에서는 16px, 모바일 12px) (rem은 html에 설정하는 단위 / 전체 모든 단위에 16px로 설정) 🟡font-family -텍스트에 글꼴을 설정 🟡font-weight - 텍스트의 굵기를 설정 - 기본 굵기 : 400 (범위 100 ~ 900) CSS배경 🟡background-color -HTML 요소의 배경색을 설정 🟡backgroud-image - HTML 요소의 배경으로 나타낼 배경 이미지를 설정 - 배경 이미지는 기본 설정으로 반복되어 나타남 🟡backgroud-repeat - 배경 이미지를 수평이나 수직방향으로 반복하도록 설정() 🟡backgroud-position -반복되지 않는 ..
2023.03.29 -
Day1_VSCODE_CSS CSS문법과 선택자
CSS 문법 HTML 문서 요소 안에 p { color:deepskyblue;} 7. 자손 선택자 -조상 요소 하위의 모든 요소의 스타일을 적용 -자손은 자식을 포함 [예시] body p {color:deepskyblue} 8. 인접 형제 선택자 -동일한 부모의 요소가 갖는 자식 요소들의 관계 -연속된 동생 요소의 스타일을 적용 [예시] h2 + p {color: deepskyblue;} 9. 일반 형제 선택자 -형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용 [예시] h2 ~ p {color:deepink;} 10. 속성 선택자 - HTML요소에서 src,href,style,type,id,class.. 등 속성을 선택자로 지정해서 스타일을 적용 - 패턴이 많음 -> M..
2023.03.29 -
CSS 서포트 사이트
https://developer.mozilla.org/ko/
2023.03.28