css 스타일 적용 썸네일형 리스트형 07. font요소 _ 텍스트 꾸밈 요소 앞에 이어서 텍스트의 여러가지 요소를 변경합니다. font-family 텍스트 폰트를 선택해 줍니다. 일단 원하는 폰트를 설정한 후, 만약 그 폰트가 구현이 안될경우 기본으로 사용할 폰트를 골라야 합니다. serif와 sans-serif가 있는데 자신이 적용한 폰트가 삐침이 있으면 serif, 삐침이 없이 고딕같은 폰트라면 sans-serif를 선택합니다. 두가지 폰트 선택시의 차이를 볼까요 sans-serif 삐침이 없어요 serif 삐침이 있어요 CSS sans-serif 삐침이 없어요 serif 삐침이 있어요 sans-serif와 serif의 차이를 아시겠나요? http://www.google.com/fonts/에 가면 다양한 폰트들이 있습니다. 여기서 폰트를 골라서 font-family에 적용하면.. 더보기 06. text요소 _ 텍스트 꾸밈 요소 텍스트의 여러가지 요소를 변경합니다. text-로 시작하는 요소와 font-로 시작하는 요소, line-으로 시작하는 요소 등이 있습니다. color 텍스트의 색상을 변경해 줍니다. 색상을 변경합니다 CSS 색상을 변경합니다 text-align 텍스트의 정렬방식을 변경합니다. value값으로는 left, right, center, justify가 있습니다. left, right, center는 말그대로 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬이고 justify를 입력하면 양쪽정렬이 됩니다. 양쪽정렬이란 양옆을 꽉 채워서 정렬되는 것을 말합니다. 띄어쓰기가 조금씩 조정되서 네모 반듯하게 정렬됩니다. 왼쪽 정렬 가운데 정렬 오른쪽 정렬 "Lorem ipsum dolor sit amet, consectetur .. 더보기 05. color 표기법 _ 16진수, 컬러네임, rgb color 표기법은 크게 세가지로 나눌 수 있습니다. 16진수, 색상 이름으로, rgb의 비율로 명시할 수 있습니다. 편하신대로 사용하시면 됩니다. 대표적인 색상을 사용할때는 이름으로, 좀 더 디테일한 색상은 16진수나 rgb로, 투명도를 추가할때는 rgba를 사용하면 됩니다. 16진수 #뒤에 각 색상에 맞는 6자리 숫자,알파벳을 나열해 색상을 표시하는 방법입니다. 자세한 설명과 컬러표는 http://html-color-codes.info/Korean/를 참고하세요. 같은 숫자나 알파벳이 반복되는 경우에는 줄여서 사용할 수 있습니다. 예를 들면 #000000이나 #ffffff의 경우 #000, #fff로 줄여 쓸 수 있습니다. 16진수로 색상을 명시합니다 CSS 16진수로 색상을 명시합니다 color n.. 더보기 04. background _ 배경 효과 background는 배경효과를 정의해주는 요소입니다. 배경의 색깔, 배경그림, 반복여부, 위치 등을 결정해 줍니다. 코드만 봐도 느낌이 오니 바로 예제를 봅시다. background-color 배경의 색깔을 변경해 줍니다. 배경색을 입혀주세요 CSS 배경색을 입혀주세요 background-image 배경에 이미지를 삽입해 줍니다. 배경이미지를 깝시다 CSS 배경이미지를 깝시다 배경이미지의 크기가 영역과 딱 맞는다면 좋겠지만 그렇지 않은 경우도 더러 있습니다. 그럴때 background-size를 사용합니다. value값을 contain으로 주면, 가로세로 중 작은 값에 배경 크기를 맞춥니다. 어떤 크기에도 딱 맞게 담기지요. 가로나 세로 중 크기가 남을 경우에는 이미지를 반복하여 처리합니다. 반면 vl.. 더보기 03. css문법 _ 표기법 및 선택자 css는 선택자, 속성, 값으로 구성됩니다. 선택자는 어떤 태그에 css를 입혀줄건지 선언하는 겁니다. 속성은 선택한 태그에서 어떠한 부분을 바꿀것인지, 값은 그 속성에 대해 어떻게 바꿔줄 건지 정해줍니다. 값을 적은 후에는 꼭 뒤에 ;를 붙여 각 속성을 분리해 줍니다. 선택자 selector 선택자에는 태그, id, class가 있습니다. 태그는 말그대로 태그명을 써주면 됩니다. id선택자의 경우, #을 붙이고 id를 써주면 됩니다. #idSelector 이렇게 됩니다. class는 . 뒤에 class명을 써주므로 .classSelector가 됩니다. 예시로 확인합시다. 나는 태그선택자에요 나는 id선택자에요 나는 class 선택자에요 CSS 나는 태그선택자에요 나는 id선택자에요 나는 class 선택.. 더보기 02. css 속성 상속 _ 부모, 자식, 자손 자식, 자손요소들은 부모의 속성값을 그대로 상속받습니다. 먼저 부모, 자식, 자손 요소에 대해 알아볼까요? 우리가 생각하는 가계도와 똑같습니다. 일단 제일 위에 값을 부모라고 합니다. 그 바로 밑에 위치하는 애들이 자식요소입니다. 이 자식 요소안에 위치하는 애들은 자손입니다. 모든 부모에게 부모가 있는 것처럼 부모요소 또한 상위개념 요소에게는 자식요소가 됩니다. 상속 자식, 자손요소는 부모요소의 속성값을 상속받습니다. 하지만 상속은 절대적인 것은 아닙니다. 상속이 안되는 속성값도 있고, 특정속성을 상속받지 않는 태그도 있습니다. 그건 차차 알아보도록 합시다. 일단 상속 예시를 봅시다. 부모요소인 #parent에 color값을 주면 자식, 자손들이 상속받습니다. 나는 자식입니다. 나도 자식입니다. 나는 자.. 더보기 01. css style _ 스타일 적용방법 css는 앞서 말했듯 html로 잡은 구조를 꾸며주는 기능을 합니다. css 사용시 3가지 방법이 있습니다. 대충 방법만 숙지하고 넘어갑니다. inline style 태그에 직접 코딩하는 것을 말합니다. 제 1순위로 적용이 되므로 급할때 쓰면 좋습니다. 하지만 나중에 유지보수나 수정이 힘들기 때문에 가급적 쓰지 않도록 합시다. 빨간 네모 안 처럼 태그의 여는 부분 뒤에 style=""를 넣어주고 그 사이에 작성하면 됩니다. 내부 스타일 시트 html 문서 안 head 사이에 을 입력 후 style태그 안쪽에 css를 입력합니다. style이 들어간 html 문서 안 모든 태그에 영향을 줍니다. 벗, 다른 페이지에서 똑같은 css를 사용하고 싶다면 똑같이 복사해서 또 넣어야 하므로 낭비낭비입니다. 그래서 .. 더보기 이전 1 다음
