Front/CSS
-
CSS 배경Front/CSS 2021. 6. 2. 15:18
개인 공부 후 정리 목적의 글입니다. 배경을 지정하는 background 속성 background-color - 배경색을 지정 background-clip - 배경색의 적용 범위를 조절 border-box 박스 모델의 가장 외각인 테두리까지 적용, 기본값 padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box 박스 모델에서 내용(콘텐츠) 부분에만 적용 background-image: url('이미지 파일 경로') - 웹 요소에 배경 이미지를 넣는 속성 background-repeat - 배경 이미지의 반복 방법을 지정하는 속성 repeat 브라우저 화면에 가득 찰 때까지 가로,세로로 반복, 기본값 repeat-x 브라우저 화면 너비에 가득 찰 때까지 가로로 반복 repe..
-
CSS 레이아웃Front/CSS 2021. 5. 31. 11:03
개인공부 후 정리 목적의 글입니다. CSS 레이아웃 레이아웃 : 웹사이트에서 정보와 내용을 보기 좋게 한 화면에 영역을 나누고 디자인한 것 레이아웃의 종류 고정형 레이아웃 : 전체 페이지의 너비를 정하고 콘텐츠에 따라 단을 나누어 정렬하는 방식 유동형 레이아웃 : 어떤 해상도의 모니터라도 좌우 공백 없이 콘텐츠 영역이 모니터 화면을 다 채우도록 하는 방식 반응형 레이아웃 : 기기에 따라 사용자 화면에 맞게 레이아웃이 변하는 것 레이아웃 속성 overflow - 박스 모델 안의 내용이 박스의 범위를 초과할 때 어떤 형태로 출력할지를 결정한다. visible : 박스 범위를 초과하는 내용도 보여진다. scroll : 우측에 스크롤바를 이용하여 위, 아래로 이동하며 내용 확인 가능 hidden : 박스를 벗어..
-
CSSFront/CSS 2021. 5. 12. 10:25
개인 공부 후 정리 목적인 글입니다. CSS 작성 방법 ● 주석 방법 : /* ………… */ ● CSS 코드를 만드는 3가지의 방법 1. 내부 스타일 시트 : HTML 문서 안의 안에 CSS 코드를 추가 2. 외부 스타일 시트 : LINK를 이용하여 CSS파일을 불러오는 것, @import를 이용 3. HTML 태그의 style 속성에 CSS 코드를 추가하는 방법 ● CSS에서 사용하는 색상 표현 색상 단위 설명 사용 예 RGB red, green, blue의 조합 rgb(255,0,0), rgb(0,0,0) HEX 색상을 16진수로 표현 #fff, #000, #ffcc00 기본적인 CSS3 선택자 1. 전체 선택자 : *{속성: 값;} 2. 타입(태그) 선택자 : 태그명{속성: 값;} 3. 아이디(ID..