YoonStudyNote

1. relative 1 2 3 .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 30px; } .relative{ position: relative; bottom: 20px; right:30px; } relative의 문제점 2 3 .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-..

position 요소의 위치 지정 방법의 유형(기준)을 설정 속성 값 값 의미 기본값 static 유형(기준) 없음/ 배치 불가능 static relative 요소 자신을 기준으로 배치 absolute 위치 상 부모 요소를 기준으로 배치 fixed 브라우저(뷰포트)를 기준으로 배치 sticky 스크롤 영역 기준으로 배치 .parent{ width: 400px; height: 300px; border : 4px dashed lightgray; position: relative; } .child{ width: 150px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; position: absolute; /* ab..

float 속성이 적용되지 않도록 지정(해제) 속성 값 값 의미 기본값 none 요소 띄움 허용 none left 왼쪽 띄움 해제 right 오른쪽 띄움 해제 both 양쪽(왼쪽, 오른쪽) 모두 띄움 해제

요소를 좌우 방향으로 띄움(수평 정렬) 속성 값 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 article .picture{ width: 200px; height: 150px; background: tomato; float:left; margin-right: 20px; margin-bottom: 10px; } article .text{ clear:left; /* clear는 흐르는 부분을 없애버린다. */ } clear: left는 float의 흐르는 부분을 없애고, 왼쪽정렬로 하겠다는 뜻이다. 수평정렬 .box{ width: 150px; height: 100px; background:tomato; color:white; font-size:30px;..

1. letter-spacing 문자의 자간(글자 사이 간격)을 설정 속성값 값 의미 기본값 normal 단어 사이의 일반 간격 normal 단위 px, em, cm 등 단위로 지정 .momo{ letter-spacing: 10px; } 2. word-spacing 단어 사이(띄어쓰기)의 간격을 설정 속성값 값 의미 기본값 normal 단어 사이의 일반 간격 normal 단위 px, em, cm 등 단위로 지정 .momo{ word-spacing: 20px; }

1. text-align 문자 정렬 방식을 지원 속성값 값 의미 기본값 left 왼쪽정렬 right 오른쪽 정렬 center 가운데 정렬 justify 양쪽 맞춤 완성된 두줄이상에서 동작한다. 2. text-decoration 문자의 장식(line)을 설정 속성값 값 의미 기본값 none 선 없음 none underline 밑줄을 지정 overline 윗줄을 지정 line-through 중앙 선(가로지르는)을 지정 3. text-indent (첫번째줄의) 들여쓰기를 지정 음수 값(Negative Values)을 사용할 수 있다. 음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기) 된다. 들여쓰기 예) .momo{ text-indent: 20px; } 내어쓰기 예) .momo{ text-indent..

문자의 색상을 지정 속성 값 값 의미 기본값 색상 문자의 색상을 지정 rgb(0, 0, 0) 색상표현 표현 의미 예시 색상이름 브라우저에서 제공하는 색상의 이름 --> 부정확하므로 보통 사용하지 않음 red, blue Hex 색상코드 16진수 색상(Hexadecimal Colors) --> 가장 많이 사용한다. #000000 RGB 빛의 삼원색 --> 많이 사용하는편이다. rgb(255, 255, 255) RGBA 빛의 삼원색, 투명도 --> 많이 사용하는편이다. rgba(255, 0, 0, .5) HSL 색상, 채도, 명도 hsl(120, 100%, 50%) HSLA 색상, 채도, 명도, 투명도 hsla(120, 100%, 50%, .3)

속성 값 값 의미 기본값 글꼴이름 글꼴(서체) 후보 목록을 지정 serif sans-serif monospace cursive fantasy 글꼴 계열 이름을 지정 사용법 font-family: [글꼴후보1, 글꼴후보2...], 글꼴계열; .box { font-family: Arial, "Open Sans", "돋움", dotum, sans-serif; } 글꼴 계열은 필수로 입력해야 한다. 글꼴자체를 입력한다면, 용량을 많이 차지하게 된다. 그래서 만약에 브라우저를 열었을때, 브라우저가 자체로 가지고 있는 글꼴을 찾아서 제공해달라고 우리는 명령을 해야한다. 이 소스코드를 해석한다면, 1순위로 Arial의 폰트로 출력해달라, 만약에 Arial폰트가 없으면 2순위로 open sans폰트로 출력해달라, 만약..

줄 높이를 지정 속성 값 값 의미 기본 값 normal 브라우저의 기본 정의를 사용(1~1.4) normal 숫자 요소 자체 글꼴 크기의 배수로 지정 단위를 설정하지 않을 경우 사용 가능 단위 px, em, cm 등 단위로 지정 % 요소 자체 글꼴 크기의 비율로 지정 보통 글자의 높이를 지정하는데 font-size의 두배로 사용하고 싶다. 하지만 수정할때마다 높이와 글자크기를 계산하면서 코딩을 짜고 싶지않다. 했을때는 숫자로 글꼴 크기의 배수로 지정하는것도 방법이다. 예를들어) div { line-height : 32px; } div { line-height : 2; } 16px의 두배인 32px을 지정하는것과 배수 2를 지정하는것은 같은 모습으로 출력이 된다. div { font-size : 30px;..

글자 크기를 지정 속성 값 값 의미 기본값 단위 px, em, cm 등 단위로 지정 16px % 부모(상위) 요소의 비율로 지정 -->주로 em을 추천 xx-small 가장 작은 크기 주로 사용하지 않는다 x-small 더 작은 크기 주로 사용하지 않는다 small 작은 크기 주로 사용하지 않는다 medium 중간 크기 주로 사용하지 않는다 large 큰 크기 주로 사용하지 않는다 x-large 더 큰 크기 주로 사용하지 않는다 xx-large 가장 큰 크기 주로 사용하지 않는다 smaller 부모(상위) 요소보다 작은 크기 주로 사용하지 않는다 larger 부모(상위) 요소보다 큰 크기 주로 사용하지 않는다 body{ font-size : 14px; } font-size는 기본적으로 16px값으로 지정..