💻Programming/👩‍🎨HTML&CSS

[css] 04. 레이아웃 포지셔닝 - margin 겹침 현상

탑 바텀이 맞물리면 값이 큰 걸로 적용됨 해결 방법은 아래 여백을 늘려주거나 인라인 블록을 적용해야 함

[CSS] 04. 레이아웃 포지셔닝

박스 모델 1) 블록 레벨 블록 레벨 요소는 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지 2) 인라인 레벨 박스 모델으로 구성되고 표처럼 사각형 같은 형태로 만들어짐 width, height 계산 magin, border, padding 을 합산해줘야 함 width 안에는 선의 두께와 padding이 포함되어 있음으로 이를 감해야 함 연산은 훨씬 쉬움 margin은 포함되지 않는다. min-height min-width 자동으로 contet의 높이가 늘어남 알아 둘 것 그냥 height를 주면 높이보다 많은 내용을 담으면 넘친다는 문제가 있음 은 width, height 속성은 무시되며, padding은 반영되고, margin은 좌우 간격만 반영이 되고 상하 간격은 반영이..

[CSS] 03. 배경 및 이미지 관련 스타일

background-color 요소의 배경 색을 설정 하나의 값을 사용해 설정 background-image 요소의 배경 이미지를 설정 배경이미지가 적으면 기본적으로 반복 배경은 마우스 우측을 누르면 다운로드가 되지 않음 .bg1 { background-image: url("bg1.png"); } background - repeat 단축형 배경 이미지를 어떻게 반복할지를 설정 background으로 no-repeat 사용 가능 배경 두 개 사용 가능 .bg1 { background-image: url("bg1.png"); } .bg2 {background-image: url("bg1.png"); background-repeat: repeat-x; } .bg3 {background-image: url("b..

[CSS]

font-family 자바 스크립트는 자바와 유사하여 변수명에 -(하이픈)을 줄 수 없음. 스크립트로 고칠 때, -(하이픈)이 들어간 것은 -을 빼고 뒷 단어의 첫 글자를 대문자로 수정함 font-family -> fontFamily로 사용한다. Sans-Serif 글꼴은 거의 모든 os에서 지원을 해줌 arial 은 제목에 많이 사용하는 글꼴 @font-face 속성 클라이언트에게 없는 폰트도 이용할 수 있도록 지원해줌 Web Fonts 1) CDN 방식 웹에서 폰트를 가져와야 하므로 속도가 느리지만 아주 간단하다는 장점 실무에서는 사용하지 않는 방식 CDN에서 import @import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); C..