Display CSS Box Model이란? 전체 CSS box model은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용할 수 있다. Block level 에서는 div를 사용하고, Inline level 에서는 span을 사용한다. div의 사이즈를 조절하고 싶을 때는 display: inline; 컨텐츠 크기만큼만 display: inline-block; 한줄에 여러개 박스 span의 사이즈를 조절하고 싶을 때는 display: block; 한줄에 하나씩 표현된다. Position position: static; static이 기본값 position: relative; 원래 있어야할 item에서 옮겨감 position: fixed; 상자에서 완전히 벗어나서 페이지상에서 ..

1. CSS 기본 문법 보통 웹 개발을 할 때 HTML 태그로 요소들을 구현하고 CSS로 디자인을 입히고 배치를 도와준다. 선택자 { 속성1: 값; 속성2: 값; } 선택자(Selector) -> 스타일을 적용할 대상 (태그, id, class 등을 선택) p { color: orange; } /* 태그를 id로 했을 때 */ #title { color: blue; } /* 태그를 class로 했을 때 */ .item { color: red; } 태그를 선택자로 하면 모든 태그에 스타일이 적용된다. id는 딱 한 요소에만 적용된다. class는 class가 적용된 모든 요소에게 적용된다. 상품리스트에서 상품의 디자인이 다 동일한 것은 class를 부여해줬기 때문이다. 선택자 조합 ->선택자 여럿을 ,로 ..

CSS는 html 문서에 디자인적인 요소를 추가한 것. 첫번째 예 CSS 1. 아래 : 기존 html 코드를 CSS문법으로 바꿔보기 HTML CSS JavaScript :중복된 코드 발생 -> CSS 문법으로 바꾼 결과 :a는 selector 라는 의미 { }는 declaration의 의미 color는 property의 의미 red는 property의 value ->html은 하나하나 바꿔야해서 숫자가 많아지면..? (wow) ->반면 css는 style 하나로 바뀔 수 있음. 하나가 바뀌면 모든 것이 바뀐다! "중복의 제거" 2. style 속성쓰기 CSS CSS 글자 크기는 어떻게? -> h1 { font-size: 60px; } 글자 중간 정렬까지! h1 { font-size: 60px; text-..