YoonStudyNote

요소를 좌우 방향으로 띄움(수평 정렬) 속성 값 값 의미 기본값 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값으로 지정..

글자 두께(가중치)를 지정 값 의미 기본값 normal 기본 글자 두께, 400과 동일 normal(400) bold 글자 두껍게, 700과 동일 bolder 부모(상위) 요소보다 더 두껍게 (bold보다 두껍다는 개념이 아님) lighter 부모(상위) 요소보다 더 얇게 숫자 100부터 900까지의 100단위의 숫자 9개, normal과 bold 이외의 두께를 제공하는 글꼴(서체)을 위한 설정 일반적인 두께의 이름 font-weight의 각 값은 일반적으로 다음과 같은 글꼴의 이름으로 표현된다. 값 일반적인 두께 이름 100 Thin(Hairline) 200 Extra Light(Ultra Light) 300 Light 400 Normal 500 Medium 600 Semi Bold(Demi Bold)..

font 글자 관련 속성들을 지정 값 의미 기본값 font-style 글자 기울기 지정 normal font-weight 글자 두께 지정 normal font-size 글자 크기 지정 medium(16px) line-height 줄 높이(줄 간격) 지정 normal(Reset.css 적용시 1) font-family 글꼴(서체) 지정 운영체제(브라우저)에 따라 달라짐 font : 기울기 두께 크기 / 줄높이 글꼴; 기울기, 두께, 글꼴은 순서가 바뀌어도 제대로 동작한다. 하지만 크기 / 줄높이는 순서가 바뀌면 안된다. .box { font : italic bold 20px / 1.5 "Arial", sans-serif; } .box{ font: 30px / 1.5; /* ERROR */ font: bol..

요소의 투명도를 지정 속성 값 값 의미 기본값 숫자 0부터 1사이의 소수점 숫자 1 사용법 opacity: 투명도 .half{ opacity: 0.5; /* 50%투명도, 반투명 */ } .transparent{ opacity: 0; /* 0%투명도, 투명 */ } .box{ opacity: .75; /* 75%투명도, 반투명(0을 생략하기도 한다) */ } display: none VS opacity: 0 display:none은 요소를 없애버리는거고, opacity는 요소를 안보이게 만드는것이다.