font-family - font-family property로 원하는 글꼴을 선택할 수 있다. - 기본적으로는 해당 컴퓨터에 설치되지 않은 글꼴은 사용할 수 없다. - 글꼴이 존재하지 않는 경우를 대비해 여러가지 예비용 글꼴들을 설정해둘 수 있다. - 접속한 사용자에게 글꼴을 설치하게 하는 것보다는 CDN이라는 개념을 많이 사용한다. - CDN: Content Delivery Network, 다른 회사에서 인터넷에 올려놓고 배포하는 이미지, 글꼴 등의 리소스들을 의미한다. font-family: 'Gamja Flower', cursive; 팬그램 - A부터 Z(ㄱ ~ ㅎ)를 모두 사용하여 만든 문구를 팬그램이라고 하며, 주로 글꼴을 확인하는 용도로 사용한다. - 한국어 : 다람쥐 헌 쳇바퀴에 타고파 -..
text-shadow - 첫 번째 값: 그림자의 수평 위치(x) - 두 번째 값: 그림자의 수평 위치(y) - 세 번째 값: 그림자의 번짐 정도 - 네 번째 값: 그림자의 색상 - ,로 여러 옵션을 겹쳐서 적용하는 것이 가능하다. text-shadow: 5px -5px 3px red; # text-shadow 첫 번째 값: 그림자의 수평 위치(x) 두 번째 값: 그림자의 수평 위치(y) 세 번째 값: 그림자의 번짐 정도 네 번째 값: 그림자의 색상 ,로 여러 옵션을 겹쳐서 적용하는 것이 가능하다. TEXT SHADOW EFFECT TEXT SHADOW EFFECT TEXT SHADOW EFFECT # box-shadow BOX SHADOW EFFECT BOX SHADOW EFFECT BOX SHADOW ..
text-align :텍스트 정렬 - center : 중앙 - left : 왼쪽 - right : 오른쪽 - justify : 보편적으로 사용되는 정렬 vertical align : 줄 내에서의 높이 설정 - top : 상단 - middle : 중앙 - bottom : 하단 text-decoration:글자에 줄 긋기 text-decoration: solid 1px red underline; letter-spacing : 글자 간격 설정 letter-spacing: 0px; line-height : 줄 간격 설정 line-height: 5px; width: 100px; word-spacing : 단어 간격 설정 word-spacing: 5px; text-indent : 문단 첫 줄 들여쓰기 설정 text..
절대 길이 단위 - px: 픽셀(화소) - mm: 밀리미터 - cm: 센치미터 - in: 인치 상대 길이 단위 - em: 해당 요소의 font-size에 비례한 크기 설정 - rem: 현재 페이지 전체(html)에 설정된 font-size에 비례한 크기 설정 - vw: viewport width에 비례한 크기 설정 (1vw는 화면 너비의 1% 크기를 의미한다.) - vh: viewport height에 비례한 크기 설정 (1vh는 화면 높이의 1% 크기를 의미한다.) # 절대 길이 단위 px: 픽셀(화소) mm: 밀리미터 cm: 센치미터 in: 인치 100px 100mm 5cm 1inch # 상대 길이 단위 em: 해당 요소의 font-size에 비례한 크기 설정 rem: 현재 페이지 전체(html)에 ..
margin -해당 요소와 다른 요소의 거리를 결정하는 여백 - border 바깥 쪽의 여백 - margin-bottom과 magin-top이 만나는 곳에서는 둘 중 더 높은 margin만 적용된다. - margin을 auto로 설정하면 해당 요소를 가운데로 정렬해준다. padding -border 안쪽부터 컨텐츠까지의 여백 - 기본적으로는 padding의 크기가 요소의 전체 크기에 가산된다. HTML Box Model - HTML의 모든 요소는 박스 형태로 구성되어 있다. - 요소를 구성하는 박스의 제일 바깥쪽 여백이 margin이고 border, padding, content-box 순으로 요소를 박스현태로 구성하고 있다. - F12 개발자 도구를 통해 그림으로 확인할 수 있다. box-size 1...
테두리 기본 설정 border: royalblue 3px solid; /* color, width, style */ #border-style-list { /* border shorthand : 원래는 width, style, color를 각자 설정해야함 */ border: royalblue 3px solid; list-style-type:none; } #border-style-list > li { border:solid black 5px; padding: 3px; margin: 15px; font-size: 35px; } #border-style-list > li:first-child { border-style: solid; } #border-style-list > li:nth-child(2) { bor..
: 영역을 지정하는 용도로 사용하는 태그 Bakcground Test Div...1 Bakcground Test Div...2 Bakcground Test Div...3 Bakcground Test Div...4 배경 이미지 설정하는 법 background-image: url('https://cdn.maily.so/kmvujyhbpk5at4ic8dkjf51kdjbn'); border : 해당 요소의 테두리 설정 border: solid 3px black; height : 요소의 높이 설정 height: 300px; font-size : 해당 요소의 글자 크기 설정 font-size: 30px; background-size : 배경 이미지 크기 설정 (auto : 이미지에 맞게 자동 설정) /* 배경 이미..
웹 페이지에 스타일시트를 적용하는 3가지 방법 1. inline css (줄 내부 css) - HTML style attribute를 사용하는 방식 - 적용 우선 순위가 가장 높다. - style 속성의 값은 css 문법이다. 2. internal css (내부 css) - 페이지 내부의 style 태그를 사용하는 방식 - 더 나중에 나온 스타일이 우선 순위를 갖는다. 3. external css (외부 css) - 외부의 css 파일을 사용하는 방식 - 태그를 사용해 외부의 css를 불러와서 사용한다. - 더 나중에 나온 스타일이 우선 순위를 갖는다. # 웹 페이지에 스타일시트를 적용하는 3가지 방법 1. inline css (줄 내부 css) - HTML st..
