dailyoon

>상대크기 em, rem 1. em 단위는 상위 요소 크기의 몇 배인지로 크기를 설정 ex) 2em 상위요소 글자크기 : 16px 현재요소 글자크기 : 32px 2. rem 단위는 문서의 최상위 요소, 즉 html 태그 크기의 몇 배인지로 크기를 설정 ex) 2rem 요소 글자크기: 16px(기준) 상위 요소 글자크기: 32px 현재 요소 글자크기: 32px >CSS 2D transform - 이차원 좌표에서 요소를 변형시키는 속성 - 이동(translate), 확대(scale), 축소(scale), 회전(rotate), 경사(screw) 등을 만들 수 있음 * transform 과 position의 차이 -transform 은 눈에 보이는것을 이동한다. 그러나 실제 위치가 변하지는 않는다. but, p..

>다단 레이아웃 - 텍스트 단을 column 속성으로 다단으로 생성 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count :단의 개수를 설정 column-rule :단과 단 사이의 구분선, 구분의 모양, 두께 색상을 설정 column-gap :단과 단 사이의 여백을 설정 column-span :안의 포함된 요소에서 주면 해당 요소는 다단편집에서 해제 >플렉서블 레이아웃(flex) - 대부분의 웹사이트는 수직 구성 - 레이아웃을 구성할 때 가장 많이 사용되는 요소들이 대부분 블록개념으로 표기 - 수직 구성은 쉽게 구성할 수 있으나, 수평 구성은 구현하기 쉽지 않음 - 과거에는 수평구성을 , float속성, inline-block 형태로 구성했다. - 좀 더 쉽게 수평구성을 ..

>CSS display - 웹 페이지의 레이아웃을 결정하는 속성 1. block : display 속성이 블록인 요소는 새로운 라인에서 시작하고 해당 라인의 모든 너비를 차지, width, height 적용 2. inline : display 속성이 인라인인 요소는 같은 라인에서 시작하고 line-height가 적용 3. inline-block : block 성질과 inline 성질을 둘 다 적용 : width, height, margin, padding, line-height 모두 적용 : 요소를 가로로 나열 4. none : 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐. : 둘다 수행하면 보이지 않는것은 동일 -visibility: 해당하는 요소의 영역이 보이지 않을 뿐 빈공간으로 유..

>CSS의 배경 1. background-color HTML 요소의 배경색을 설정 2. background-image HTML 요소의 배경으로 나타날 배경 이미지로 설정 배경 이미지는 기본 설정으로 반복(바둑판 형식)되어 나타남 background-image : url('배경이미지 경로'); 3. background-repeat 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정 repeat, repeat-x, repeat-y, no-repeat 4. background-position 반복되지 않는 배경 이미지의 상대 위치를 설정 %나 px을 사용해서 상대위치를 직접 설정할 수 있음 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단 left top center top right top left ce..

10. 속성 선택자 HTML요소의 여러 속성들(src, href,type,class,...)을 이용해서 선택자로 사용하고 스타일을 적용 [속성명]{ 스타일 적용 } [속성명 = 값]{ 스타일 적용 } [속성명 ~= 값] : 속성값이 완벽히 일치하는 문자를 가지는 요소를 선택 ex) css / css funny / funny css (공백으로 나눠져 있어야 인식한다) [속성명 *= 값] : 속성값이 포함된 모든 문자를 가지는 요소를 선택 *공백 또는 하이픈으로 나뉘든 어떤 경우든 속성값이 포함되면 선택된다. ex) css/css funny /funny css / css-funny / css_funny / cssfunny ..... [속성명 |= 값] : 속성값이 접두사로 시작되는 문자중에서 완벽하게 일치하..

>CSS(Cascading Style Sheets) -HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어 >CSS 의 기본 문법 - HTML 문서 태그 안에 에 CSS문법을 작성 선택자 { 속성명: 속성값; 속성명: 속성값; } * { } 영역을 선언부 라고 한다. - HTML 문서의 각 태그 안에 style 속성 안에 CSS문법을 작성 style= "속성명: 속성값;, 속성명: 속성값;..." >CSS의 주석 /* 사이에 주석내용을 입력 */ >>CSS를 적용하는 방법 1. 인라인 스타일 HTML 요소 내부에 style 속성을 사용하여 적용하는 방법 그 style 속성이 적혀있는 요소에만 스타일을 적용 2. 내부 스타일 HTML 문서에 요소 안에 태그를 사용하여 적용하는 방법 해당 문서에만 스타일을 ..