본문 바로가기

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값을 주면 자식, 자손들이 상속받습니다. 나는 자식입니다. 나도 자식입니다. 나는 자.. 더보기