한 줄 정리 float : 문서의 일반적인 흐름에서 제외 none (기본값), left, right clear: float 요소의 영향을 받지 않도록 해줌 none (기본값), left, right, both position : 문서상에 요소를 배치하는 방법을 정의 top, bottom, right, left static : 기본값 relative : 브라우저 기준으로 움직인다 absolute : 최근에 만든 객체를 기준으로 움직인다 fixed : 쇼핑몰에서 자주 볼 수 있는데 스크롤바를 내려도 고정이 된다 sticky : 지정한 위치에서 고정되게 하는 것 top, bottom flexbox : 여러 객체를 그룹으로 묶어 한번에 움직이게 하는 것 display: flex;로 사용 (기본 주축인 가로방향,..

한 줄 정리 # background-color : 배경의 색을 정의 # background-image : 배경의 이미지를 정의 # background-position : 배경의 초기 위치를 정의 # background-size : 배경의 이미지 크기를 정의 # background-repeat : 배경 이미지의 반복을 정의 ##CSS 요소의 배경 설정(background) -요소의 배경화면을 정의한다. -배경의 색상, 이미지, 반복등의 다양한 하위속성을 정의할 수 있다. -필수요소는 아니므로 필요한 경우에만 사용하면된다. # background-color : 배경의 색을 정의 # background-image : 배경의 이미지를 정의 -url()은 함수인데, 함수란 자주 이용하는 코드를 만들어 놓고 호출해..

한 줄 정리 padding: 컨텐츠 안쪽 여백 margin : 컨텐츠 바깥쪽 여백 box-sizing : 컨텐츠 사이즈 고정 or 유동 box-sizing: content-box; : border width + padding size 전부 포함한 값을 유동적으로 출력 box-sizing: border-box; : border width + padding size + contents size 를 전부 포함한 값을 고정 # 박스 모델 영역 -브라우저가 렌더링할때 각각의 요소는 기본적으로 사각형 형태의 영역을 차지하게된다. -이 영역을 박스모델이라고 하며 CSS는 박스의 크기, 형태, 속성을 결정할 수 있다. -컨텐츠 영역 : width(너비) , height(높이) -안쪽 여백 : padding -테두리 :..

한 줄 정리 border: 선 굵기, 선 스타일, 선 색상 ex) border: 2px soild red 선 스타일 : soild(실선), double(두 줄), dotted(점 선) border-color: 색상; border-style: 선 스타일; border-width: 선 두께; display: inline (인라인으로 처리한다) block (블록으로 처리한다) inline-block (인라인이면서, 블록 속성을 가지게 한다) none (디스플레이 화면에 나오지 않지만, 개발자 도구에는 존재한다) list-style : 리스트 모양 (리스트 목록의 앞에 문자를 바꿔준다) 리스트 모양 custom해서 사용하기 .menu2{ list-style: none; } .menu2 li::before{ co..

한 줄 정리 -font-family : 글꼴을 정의한다. -@font-face {font-family: "글꼴에 지정해줄 이름"; src: url("글꼴경로"); format("해당 확장자 명에 포멧 타입"): } : 글꼴 추가 -font-size : 글자의 크기를 정의한다. (px, em, rem) -text-algin : 정렬 방식을 정의한다. (center, right, left, justify) -color : 글자 색상을 정의한다. 키워드 = p{ color: red; } RGB 색상코드 = p{ color: #FF0000 ; } RGBA 색상코드 = p{ 255, 0, 0, 0.5 ; } RGB 함수 = p{ color: rgb(100%, 0%, 0%): } ## 텍스트 관련 속성 -font-..

한 줄 요약 전체선택자 : *{} 태그선택자 : p{}, h1{} 클래스선택자 : .해당클래스명{} 아이디선택자 : #해당아이디명{} 그룹선택자 : h1, p, div{} ## CSS선택자1 -선택자 : 어떤 요소에 스타일을 적용할것인가에 대한 정보이다. 선택자{ 속성명: 속성값; } 일단, 실습에 들어가기 전에 # 기본선택자 (전체 선택자) * : asterisk는 전체를 의미한다. * {

한 줄 요약 ## CSS란? -CSS는 Cascading Style Sheets를 의미한다. -계단식으로 스타일을 정의하는 문서 -CSS는 HTML문서에 스타일을 더해준다. -HTML 문서는 태그가 태그를 포함하는 계단식 구조를 갖고 있다. -HTML과 CSS를 더해서 웹브라우저로 실행하게되면 웹브라우저는 문서에 적혀있는대로 화면을 구성하고 사용자에게 보여준다 이 과정을 렌더링이라고 한다. -CSS문서는 자체적는 독립적으로 존재할 수 있지만 그 목적이 구조화된 HTML 문서의 스타일을 정리하는데 있으므로 HTML문서가 없는 CSS문서는 사실상 의미가 없다. -HTML : 웹문서의 콘텐츠를 구성하는 언어 -CSS : 웹문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치등...) -HTML과 함께 사..