식초의 지식보관소

CSS 포지셔닝 ~검색창, 로그인창, 광고, 뉴스, 실시간 검색 순위 등을 적절히 배치 ~각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것= float속성, position속성 box-sizing 속성 : 박스 너비 기준 정하기 ~웹문서에 요소 배치하려면 각 요소의 너비를 계산해야 한다 ~콘텐츠 영역(width)값을 계산하기 어렵다면 border-box 지정해 박스모델 너비 계산 border-box: width값=콘텐츠+패딩+테두리 너비 .box1{ box-sizing: border-box; width:300px; height:150px; padding:30px; border: 2px solid red; margin:10px; } content-box: width값=콘텐츠 너비 .box2{ box-sizi..

박스 모델이란? 웹 문서의 내용을 박스 형태로 정의하는 방법. 마진, 패딩, 테두리 등 여러 겹의 박스가 있다. 블록 레벨(block-level)요소 -혼자 한 줄 차지하는 요소 -너비, 마진, 패딩을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. -종류: ,,,,,,,,,, 인라인 레벨(inline-level)요소 -콘텐츠 만큼만 영역을 차지, 나머지 공간에는 다른 요소 올 수 있다. -종류: ,,,,, ,,, 박스모델 - 구글>검사>element>computed width, height 속성 : 콘텐츠 영역의 크기 width - 콘텐츠의 너비 height - 콘텐츠의 높이 .box { width: 50%; height: 100px; } ~px, cm, %, auto 속성값 ~%는 부모요소..

글꼴 관련 스타일 : 글자의 모양새, 글꼴, 크기, 굵기 등 font-family 속성 : 글꼴 지정 p{ font-family : "맑은 고딕", 굴림, 돋움 } ~텍스트를 사용하는 요소에서 사용 - ,, 등 ~지정한 글꼴이 없을 경우 대비, 2번째, 3번째 글꼴까지 지정 ~두단어 이상으로 된 글꼴이름은 ""로 묶어준다 ~기본 글꼴, 스타일 속성을 이용해 다른 글꼴 정의 가능 @font-face 속성 : 웹 폰트 사용 ~웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식 *구글 웹 폰트 사용 ~https://fonts.google.com 에 접속해서 글꼴 선택 > [Select this style] 클릭 > [Emb..