하얀성의 개발 메타인지

앞으로는 외부스타일시트 쓰고, 유효성 검사를 진행하는 습관을 들일예정. ch2 조건: 이메일에 하이퍼 걸기. rowspan colspan 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 Document 이 력 서 성명 안 기 웅 주 민 등 록 번 호 123456-1234567 생년월일 1986년 01월 09일 (만 34 세) 주소 경기도 화성시 산척동 연락처 집 02 - 123 - 1234 전자우편 ankiwoong@gmail.com 핸드폰 010-123-1234 Colored by Color Scripter cs 1 2 3..

https://www.codingfactory.net/12593#transform_translate CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성 CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회 www.codingfactory.net 차차 더 채워나가보자. 부족한 부분이 있네 역시.

[ch5] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 Document body{ background-color: green; margin-left: 100px; } img{ width: 400px; height: 200px; position: absolute; top: 0%; } .container{ width: 200px; height: 120px; margin-left: 100px; background-color: yellow; border-style: dotted; border-color: red; border-width: ..

display 속성 요소의 렌더링 박스 유형을 결정하는 속성입니다. 기본 값 : - (요소마다 다름) display: value; none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재 display: none의 예시 display: inline의 예시 inline-block요소 (inline 처럼 화면에 나타나지만 block의 ..

font-family 속성 글꼴을 지정하는 속성입니다. font-family(필수) 글꼴의 이름을 지정 font-family: family-name | generic-family ( | initial | inherit ); family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다. generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인..

ch2 1 2 3 4 5 6 7 8 9 10 11 12 My First Page P c h Colored by Color Scripter cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 table td,th{ padding: 2px 2px; }

background 관련 속성 background-color, background-repeat, background-attachment, background-position 속성의 기본값들(순서대로) : transparent, repeat, scroll, 0% 0% background-color 기본 값 : transparent 배경의 색상을 지정하는 속성입니다. 앞선 색상 강의에서 배운 색상 값 적용 방식과 같습니다. background-position 기본 값 : 0% 0% 요소에서 배경 이미지의 위치를 지정하는 속성입니다. x축, y축으로부터의 위치를 지정할 수 있으며, 값의 선언 순서는 x축, y축으로부터의 간격입니다. 만일 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용됩니다. bac..

: bold, 글자 굴게 : italic, 이태릭체로 기울게 : underline, 밑줄 : strike, 글자 중간 줄 ㅡ> 아 태그 dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다. 은 앞서 배운 , 과는 구조가 조금 다릅니다. , 은 항목을 단순히 나열하는 구조지만, 은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다. 리플리 증후군 허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어 피그말리온 효과 타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상 언더독 효과 사람들이 약자라고 믿는 주체를 응원하게 되는 현상 : 용어를 나타..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 Document /* background의 크기를 결정하는 태그를 조절 */ html, body{ margin: 0; height: 100%; } body{ /* 이미지 저장 */ background-image: url('./flower.webp'); /* 이미지 출력횟수 제한. x축 반복, y축 반복, 단순 반복 사용가능 */ background-repeat: no-repeat; /* background 크기 조절 cover나 contain(비율조절) 사용 */ background-size: cover ; /* center center 처럼 x..

[정답과 달라도, 화면만 만들어내면 되니깐 이론만 보고 풀자] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Document .title { color: brown; font-size: large; font-weight: 800; } p{ margin-left: 50px; font-weight: 200; font-size: smaller; } 최신 웹 디자인 트렌드 반응형 웹 디자인 - 다양한 화면 크기에 최적화하다 플랫 디자인 - 입체에서 평면으로 풀스크린 배경 - 콘텐츠에 집중 원 페이지 사이트 - 한 페이지에 모든 내용을 담다 패럴랙스 스크롤링 - 동적인 효과로 강한 인상을! 웹 폰트 - 웹 타이포그래..