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 배경색, 투명도, 높이, 길이 설정해주고. border-radius는 원으로 만들기 위한 것! 결과물

지도 위 배너에 아래와 같이 나타내려고 한다. 현재 날짜 2020.10.03 이제 CSS 입히기~ 흰색 배경 박스, 글자 중간 정렬로 나타내기 #infoBox { position: absolute; top : 100px; z-index : 10000; background : white; left : 20px; padding : 15px; border : ; border-radius: 4px; text-align : center; } 현재날짜도 Bold값으로 나타내기 #intoTitle { font-size font-weight }

#style.css body { padding: 0px !important; margin : 0px !important; } !important : 강제로 전체적용 시키는 것 지도를 전체화면으로 적용시키기 위해 height:100vh으로 설정!

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-..