![]()
Block & Inline Block : Y축 정렬, 공간 생성 O, 상하 배치 O Inline : X축 정렬, 공간 생성 X, 상하 배치 X Box Model 브라우저에서 HTML 요소의 공간 배치 기본 레이아웃 구조(틀). content(내용) > padding(패딩) > border(테두리) > margin(마진) 순으로 content를 감싸고 있다. content 글, 이미지, 비디오 등 요소의 실제 내용이 위치하는 영역, 즉 내용물. width(너비)와 height 속성으로 크기가 결정됨. (w,h 속성을 갖는다.) padding 테두리 안쪽의 내부 여백. 요소에 적용된 배경의 컬러/이미지는 패딩 영역까지 적용된다. border 테두리. border의 값은 테두리의 두께를 말한다. 보이지 않아도..
CSS 주요 속성 width, height width : 요소의 너비 설정 height: 요소의 높이 설정 고정값(px)과 가변값(%) %는 부모의 영향을 받는다. (상속 받는다.) font font-size: px, % font-family 브라우저마다 지원한 폰트가 다르므로 여러 개를 입력해야 함. 입력한 순서대로 우선순위가 적용된다. snas-seif: 모든 브라우저에서 적용 가능하기 때문에 맨 마지막에 속성값(=이 경우에는 폰트 종류)을 넣을 때 모두 넣을 때 쉼표를 넣는다. font-style: 이텔릭 font-weight는 굵기(bold)조절시 사용/ 100~900사이의 숫자를 넣을 수 있다. border 요소의 테두리의 두께, 색을 설정한다. border-style: 실선:soild, 점선:..
HTML 구조를 잡을 때 사용하는 태그 Semantic Tag 브라우저와 개발자 모두에게 정확한 의미를 설명해 준다. 구조상 안에 들어간다. According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities." 소개 및 탐색에 도움을 주는 콘텐츠를 나타냄. 웹 사이트의 머리글을 담는 공간. 이미지 등을 활용하여 로고 등이 존재함. 더보기 head / header / heading 구별하기 head 기본 구조 태그 (!doctype.html-html-head-body) 에 속함. 페이지를 열 때 브라우저에 나타나지 않는다. 메타 데이터(이 기록된다. h..
