코딩 공부/CSS10 [CSS] Bootstrap Bootstrap 트위터에서 시작된 오픈 소스 프론트엔드 프레임워크입니다. 웹페이지에서 많이 쓰이는 대부분의 요소를 내장하고 있기 때문에 bootstrap관련 사항설치 후 미리 지정되어 있는 css클래스 javascript 함수를 불러와서 바로 사용 가능합니다. 장점 - html과 css에 대한 기본 지식만 있으면 사용하기 쉽다. - 반응형 디자인을 지원합니다. 단점 - html5에 맞춰져있다보니 구형 브라우저 지원이 미흡하다. 사용방법 1. 부트 스트랩 파일 다운로드 후, 압축 해제 후 사용한다. 2. CDN(Content Delivery Network)으로 사용한다. - 어딘가에 올려져 있는 CSS 파일을 우리는 링크를 통해 단순히 접속해서 사용한다. (필요한 내용을 자유롭게 가져다 사용한다.) Co.. 2022. 11. 16. [CSS] Grid과 CSS Unit Grid Flex는 1차원(한 방향)의 레이아웃 시스템을 제공하지만 Grid는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flex와 동일하게 Container, item이 필요합니다. - 부모요소 : Grid Container - 자식요소 : Grid item .container { display: grid; } Grid 용어 정리 그리드 트랙 (Grid Track) 2개의 그리드 라인 사이 공간을 말합니다. 이 공간은 수평/수직 방향 모두를 말합니다. 그리드 셀 (Grid Cell) Grid를 구성하는 단일 유닛(single unit)을 말합니다. 그리드 라인(Grid Line) Grid를 행(rows)/열(columns)로 나누는 수평, 수직 선을 말합니다. 그리드 번호(Grid Number).. 2022. 11. 15. [CSS] 전환과 변환 전환 요소의 전환 효과를 지정하는 속성 (transition) ▶ 속성 목록 4가지 1. transition-property : 전환 효과가 일어난 CSS속성 이름 명시 transition-property: value; value all : transition 효과 적용 가능한 속성에 전부 적용 width, height, background-color 등이 있음(ex. background-color 3s, width 5s ) 2. transition-duration : 전환 효과가 일어날 시간 명시 transition-duration: value; value 0s : 시간이 없다. 시간 : 소수점 작성 시, 0 생략 가능 (0.5 → .5) 3. transition-timing-function : 타이밍.. 2022. 9. 16. [CSS] 배경과 배치 배경 1. 요소의 배경 색상 (background-color) background-color: red; color처럼 rgb 등 여러 가지 방법이 있습니다. 2. 배경 이미지 삽입 (background-image) background-image: url("경로"); 경로 지정을 해줘야 한다. 요소의 크기가 이미지의 크기보다 크면 반복 출력 (바둑판식 배열) 3. 배경 이미지 반복 제어 (background-repeat) background-repeat: no-repeat; value no-repeat : 반복 없음 repeat : 수평, 수직 반복 repeat-x : 수평 반복 repeat-y : 수직 반복 4. 배경 이미지 위치 (background-position) background-position.. 2022. 9. 15. [CSS] 요소의 투명도, 글꼴과 문자 요소의 투명도(opacity) 요소의 투명도를 지정합니다. opacity: value; Value 1: 불투명 0~1: 까지 소수점 숫자 입력 예시(CSS/출력) div { width: 200px; height: 100px; border: 2px dashed teal; background-color: steelblue; margin: 20px; } .a { opacity: 0; } .b { opacity: 0.5; } .c { opacity: 1; } .d { opacity: 0.8; } 글꼴 1. 기울기 (font-style) font-style: italic; 값 : normal (기울기 없음), italic(기울어진 글자) 2. 두께 (font-weight) font-weight: bold; 값 :.. 2022. 9. 15. [CSS] display와 float, Felx display 요소가 화면에 어떻게 보여질지 특성을 지정합니다. .container { display: ; } Value 1. none : 보여지지 않는다. 요소는 존재하지만 화면에서는 사라진다. 2. inline : 글자요소 3. block : 상자 (레이아웃) 요소 4. inline-blokc : 글자 + 상자 요소 5. flex box : 1차원 레이아웃(x축, y축) 6. grid : 2차원 (x축, y축) 행과 열을 동시에 사용 float 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성 float: value; value inherit: 부모 요소에서 상속 left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. rig.. 2022. 9. 15. 이전 1 2 다음
