본문 바로가기

728x90

css6

[css]display: grid 플렉스박스는 한 방향으로 배치되지만 그리드는 여러 방향(바둑판처럼)으로 배치가 가능함 원하는 위치에 자유롭게 배치 가능함 한칸을 그리드 셀이라함 grid-template-rows & columnns 격자 나누기 gap 간격 grid-auto-rows & columns 크기 미리정하기 grid-row & column, span 원하는 위치에, 여러칸에 걸쳐서 배치 grid-area, grid-template-areas 이름으로 배치 ex) 3 x 3 그리드 형태 display: grid grid-template-rows: 200px 200px 200px; grid-template-columnns : 200px 200px 200px; 또는 grid-template: 200px 200px 200px / 200.. 2023. 9. 11.

[css]display: flex flex-box 유연한 박스 1. container 박스에 주는 속성 *display: flex; ->block에서 flex로 변경 *flex-direction -> 아이템의 배치방향(주축)을 지정 속성 값: row/column / row-reverse/ column-reverse default(기본값) => row *flex-wrap -> 아이템의 배치를 1줄 또는 여러줄 지정 속성 값: wrap/no-wrap/wrap-reverse 여러줄/1줄/줄 반대로 default(기본값) => nowrap *justify-content -> 주축 방향 정렬 속성 값: flex-start/ flex-end/ center/ space-between/space-around (space-between : 아.. 2023. 9. 11.

[css]position html요소의 위치를 결정하는 방식을 설정 위치를 결정하는방식 static 정적 위치 - default (기본값) relative 상대위치 (상대 box 기준) absolute 절대위치 (윈도우 기준) fixed 고정 위치 위치 변경 속성 top, left, right, bottom position: static; position: relative; top: 30px; left: 30px; position: absolute; top: 30px; left: 30px; position: fixed; position: sticky; static 처럼 원래위치에 있다가 브라우저 스크롤이 내려가면 fixed 처럼 고정됨 반응 범위는 부모 요소안까지만 반응함 추가 right: 0; left: 0; 를 주게 되면 w.. 2023. 9. 8.

[css]크기(size) width, height, font-size, padding, margin 등 css 크기(size)에는 절대적 크기 단위 픽셀(px) - 절대적인 단위. - 화면을 표시하는 기준이 되는 크기 ex) 10px = 정사각형 10개의 길이 상대적인 크기 단위 퍼센트(%) - 부모태그에 대해서 상대적인 크기 - 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면됨 ex) 부모가 200px X 100px 일때 자식이 50% X 50% 면 자식은 100px X 50px em, rem -글자 크기를 기준으로 상대적인 크기를 정함 1. em - css에서 1em = 부모태그의 font-size임 ex) 부모가 16px 이고 자식이 2em이면 16x2 = 32px임 2. rem - css에서 1rem = 최상위 태그(html.. 2023. 9. 5.

[css]css 선택자 css선택자 {속성: 속성값;} 1. 태그 선택자 ex) div {background: red;} 2.아이디선택자 (tagname)#idname ex> #header {font-size:14px;} div#header 3.클래스 선택자 (tagname).classname ex> .large {font-size: 24px;} p.large 4.모든 선택자 * ex> * {padding:0; margin:0;} (*복합 선택자) 5. 하위 선택자 ex> #header li { width:25%;} (선택자 선택자) 6. 자식 선택자 ex> #header > p {width:200px;} (선택자 > 선택자) 7.형제 선택자 1)인접 형제 선택자 선택자 A+선택자B ex) h2 + p.. 2023. 5. 22.

[css]css속성 css 기본구문 선택자 {속성: 속성값;} 1. 태그선택자 h1 2. 아이디 선택자 #title 3. 클래스 선택자 .left ex) text속성 color 글자색상 색상명 red, green, yellow, 16진수 #000000~#ffffff, 컬러함수 rgb(r, g, b) 0~255, rgba(r, g, b, a) 0~1 font-size 글자 크기 단위: px / 기본 14px line-height 줄높이 20px, 1.6 font-weight 글자 두껍게 normal / bold 100~300 가늘게 400~600 중간 그뒤는 두껍게 letter-spacing 글자와 글자사이 간격 px text-decoration 글자 꾸미기 underline(아래라인) none line-throu.. 2023. 5. 22.

이전 1 다음

728x90

티스토리툴바