Practice makes perfect

그림자 속성 - 태그에 그림자를 부여해주는 스타일 속성. - 종류 . text-shadow 속성 : 글자에 그림자를 부여하는 스타일 속성. . box-shadow 속성 : 박스에 그림자를 부여하는 스타일 속성. - http://css3generator.com/ CSS3Generator by @RandyJensen Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to mak..

위치 속성 - 프로그램 개발시 요소의 위치를 2가지 방법으로 설정. . 절대적 위치 좌표 : 요소의 x좌표와 y좌표를 설정해 절대적 위치를 지정합니다. . 상대적 위치 좌표 : 요소를 입력한 순서대로 상대적으로 위치를 지정합니다. . * position 속성 : 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성( 양/음수 모두 사용 가능). - HTML 태그의 위치 설정 방법을 변경할 때 사용. - 상대적 위치 좌표 사용시 키워드 1) static : 요소를 문서의 흐름에 맞추어 배치(top / right / bottom / left 이용 배치 변경 불가). float 속성을 이용해 좌우로 배치합니다. - 브라우저가 알아서 배치 - boby를 기준으로 출력 2) relative : 현재 위치를 기준으로..

폰트 속성 : 글자와 관련된 스타일 속성. font-size 속성 - 글자의 크기를 지정하는 스타일 속성. 참고) h1태그의 기본크기: 32px, p태그의 기본크기: 16px 키워드와 값을 통해서 변경이 가능합니다. - em : 배수 이므로, p태그의 기본 사이즈는 16px 이므로 a와 같은 크기 font-family 속성 - 폰트를 지정하는 스타일 속성. - 일반적으로 한 단어로 이루어진 폰트는 따옴표를 사용하지 않습니다. 하지만 두 단어 이상으로 이루어진 단어는 따옴표를 반드시 적용합니다. 원하는 글꼴을 넣어주고, 마지막에는 브라우저가 설정해주는 이름인 serif 또는 sans-serif를 넣어주는 것이 기본 형식입니다. font-style 속성 - 폰트의 기울기 지정하는 스타일 속성. - 키워드 :..

박스 속성 - 웹페이지의 레이아웃을 구성할 때 가장 중요한 스타일 속성 - width/height 속성 글자를 감싸는 영역의 크기를 지정하는 속성 div 태그는 원래 block형식으로 전체 폭을 사용하지만 width, height속성을 추가함으로써 영역을 조정하여 할당 할 수 있습니다. - margin/padding 속성 . margin:마진의 너비를 지정하는 속성. Margin : 경계선 밖의 간격 (위, 오른쪽, 아래, 외쪽 - 시계방향) 홍길동과 이순신의 간격은 15 + 5 = 20이 아니라 가장 큰 간격인 15로 간격을 가집니다. 순서와 상관없이 속성의 이름을 각각 부여해서 값을 넣을 수 있습니다. padding: 패딩의 너비를 지정하는 속성. Padding : 테두리와 텍스트 사이의 간격 (위,..

색상단위 - 키워드를 사용한 색상 적용(red, orange, ...) - RGB 색상단위 . rgb(red, green, blue) → 0 ~ 255(0x00~0xFF) . rgba(... , alpha) → alpha(투명도:0.0(완전투명)~1.0(완전불투명)) - Hex코드 색상 단위 : #000000 - HSL 색상단위:hsl(hue(색상), saturation(채도), lightness(명도)) - hsla(... , alpha) 활용 사이트 http://www.workwithcolor.com/hsl-color-picker-01.htm HSL Color Picker; HTML Color Picker; Web, HEX, CSS, HSLa HSL Color Picker The HSL Color P..

형태구조선택자 종류.(동위 관계) :first-of-type =형제 관계 중에서 첫번째로 등장하는 특정 태그를 선택 :last-of-type =관계 중에서 마지막으로 등장하는 특정 태그를 선택. :nth-of-type() = ()번째로 등장하는 특정 태그를 선택. :nth-last-of-type() = 뒤에서 ()번째로 등장하는 특정 태그를 선택. (*) 활용 형태구조 선택자 Body 태그의 자식 중 첫번째 등장하는 모든 형태의 태그를 선택합니다. 문자선택자 1) 문자 가상요소 선택자 : 태그 내부의 특정한 조건의 문자를 선택하는 선택자 = 첫번쨰 글자 first-letter = 첫번쨰 줄 first-line = 기호 표준은 (::) 이지만 (:)으로 작성해도 브라우저가 호환성 있게 제공. *em : d..

자손 선택자 : A > B = 단독으로 쓰여지기 보다는 타 선택자와 함께 사용합니다 후손 선택자 : A ( 여백 ) B 기준이 되어지는 것 안에 포함되는 모든 것 = 단독으로 쓰여지기 보다는 타 선택자와 함께 사용합니다. 동위 선택자 : 같은 태그(대등한 관계)인 태그들 = 단독으로 쓰여지기 보다는 타 선택자와 함께 사용합니다. 인접 선택자 ( 선택자 + 인접태그 { } ) 인접하고 있는 바로 뒤에 있는 하나의 선택자 만 선택합니다 . h1 태그의 바로 뒤에 위치하는 h2 태그의 color 속성에 red 키워들 적용합니다. 형제 선택자 ( 선택자 ~ 인접태그 { } ) 기준이 되어지는 선택자의 동의 관계에 있는 바로 따라붙는 h2가 선택이 되어집니다. h1 태그 뒤에 위치하는 h2 태그 backgroun..

* 클래스 선택자 - 특정한 클래스를 가지고 있는 태그를 선택할 때 사용하는 선택자. - 태그마다 클래스 속성을 부여해서 구별 단위를 구별 - 웹페이지를 개발할 때 가장 많이 사용하는 선택자. - 여러 개의 클래스 선택자 사용. - class 속성은 공백으로 구분해서 여러 클래스를 사용할 수 있습니다. - id 속성은 웹페이지 내부에서 중복되지 않으므로 상관없지만 class 속성은 중복될 수 있습니다. - class 속성은 서로 다른 태그에 적용된다면 태그선택자와 클래스선택자를 함께 사용해서 더 정확하게 태그를 선택 수 있습니다. 아이디 선택자 = # , 클래스 선택자 = . Id 태그는 레이아웃을 구성할 때, 고유 이름을 부여하는 이름으로 사용합니다. 동시에 두개 이상을 선택하고 싶을 때는 id선택자가..