뉴데이

padding 속성 기본 값 : 0 length 고정값으로 지정합니다. (ex. px, em ....) percent 요소의 width에 상대적인 크기를 지정합니다. padding-top content 영역의 위쪽 여백을 지정합니다. padding-right content 영역의 오른쪽 여백을 지정합니다. padding-bottom content 영역의 아래쪽 여백을 지정합니다. padding-left content 영역의 왼쪽 여백을 지정합니다. syntax padding: [-top] [-right] [-bottom] [-left]; 0 10px 20px 30px /* 상, 우, 하, 좌 다름 */ 0 10px 20px /* 좌, 우 같음 */ 0 10px /* 상, 하 같음 & 좌, 우 같음 */ ..

border 관련 속성 border-width 기본 값 : medium 선의 굵기를 지정하는 속성입니다. border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있습니다. border-width: [top] [right] [bottom] [left]; 키워드 thin, medium, thick 단위 px, em, rem ... ( % , 정수 단위 사용불가 ) border-style 기본 값 : none 선의 모양을 지정하는 속성입니다. border-top-style, border-bottom-style, border-right-style, border-left-style을..

문서를 배치할 때 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각 요소를 사각형 상자로 나타냅니다 . CSS를 이용해 이 상자의 크기, 위치 및 속성(색상, 배경, 테두리 크기 등)을 변경할 수 있습니다. boxmodel 구성 Content 영역 요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비 및 높이를 나타냅니다. Border 영역 content 영역을 감싸는 테두리 선을 border라고 합니다. Padding 영역 content 영역과 테두리 사이의 여백을 padding이라고 합니다. content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다. 이에 따라 padding을 content의 연장으로 볼 수도 있습니다. Margin 영역 bor..

background 관련 속성 background-color 기본 값 : transparent 배경의 색상을 지정하는 속성입니다. 앞선 색상 강의에서 배운 색상 값 적용 방식과 같습니다. background-image 기본 값 : none 배경으로 사용할 이미지의 경로를 지정하는 속성입니다. url의 경로는 절대 경로, 상대 경로 모두 사용 가능합니다. 만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 그 부분에 background-color 색상이 노출됩니다. background- repeat 기본 값 : repeat 이미지의 반복 여부와 방향을 지정하는 속성입니다. 기본값이 repeat이기 때문에 따로 설정하지 않으면 ..

Color 속성 폰트의 색상 값을 적용할 때 사용하는 속성입니다. h1 { color: 색상 값;} 색상 값 지정 방식 컬러 키워드 CSS 자체에서 사용 가능한 문자 식별자입니다. red, blue, black 등과 같이 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있습니다. * 참고 : transparent는 투명을 나타내는 키워드 * 16 진법 ex. #RRGGBB 6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타냅니다. 첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미합니다. 각 자리의 알파벳은 대소문자를 구분하지 않습니다. 16 진법 ex. #RGB 6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리..

단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어 집니다. 절대 길이 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다. px ( 1px = 1/96th of 1 inch ) 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다. pt ( 1pt - 1/72 of 1 inch ) 컴퓨터가 없던 시절부터 있던 단위입니다. 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다. 웹 화면에 인쇄용 문서를 위한 스타일을 적용..

CSS Reference를 통해 확인 가능한 사항들은 다음과 같습니다. 정의 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있습니다. 기본 값 상속 여부 애니메이션 가능 여부 사용 가능한 CSS버전 문법 해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악할 수 있습니다. 속성 값 해당 속성이 인식하여 적용할 수 있는 값의 형태나, 키워드 등을 파악할 수 있습니다. Initial : 초기값, 즉 속성의 기본값으로 정의 (ie에서 지원하지 않음) Inherit : 부모 요소의 해당 속성 값을 적용 (상속 가능할 요소일 경우) 즉, 상속이 불가능한 속성일 경우에는 적용 되지 않습니다. 지원 범위 해당 속성이 정의에 맞게 동작 가능한 CSS 버전, 브라우저별 버전을 확인할 수 있습니다. 어떤 ..

앞서 배운 구체성은 cascading 규칙 중 하나입니다. 만약 구체성이 같은 두 규칙이 동일한 요소에 적용된다면 어떻게 될까요? h1 { color: red; } h1 { color: blue; } 위 에는 같은 구체성을 가진 두 규칙이 적용되었습니다. 그렇다면 에는 어떤 color가 적용될까요? 에는 color: blue가 적용되며 이는 cascading 규칙에 의해 적용된 결과입니다. cascading 규칙 cascading에는 다음과 같이 3가지 규칙이 있습니다. 중요도(!important)와 출처 구체성 선언 순서 위에서의 출처는 CSS 출처를 의미합니다. CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분합니다. 제작자의 경우는 사이트를 실제 제작하는 개발..

상속되는 속성 h1 { color: gray; } Hello, CSS 위 코드에서 은 부모인 의 color: gray를 상속받습니다. 상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아닙니다. 아직 속성에 대해 다 배우지는 않았지만, margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다는 것을 알고 계시면 됩니다. 상속되는 속성들은 보통 상식적으로 구분될만한 속성들이며, 후에 속성들에 대해 배우게 되면 자연스럽게 이해할 수 있습니다. 상속되는 속성의 구체성 * { color: red; } h1#page { color: gray; } Hello, CSS 위 코드에서는 전체 선택자를 이용해 color: red를 적용하고 id 선택자를 이용..

구체성 요소를 선택하는 데는 여러 방법이 있습니다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있습니다. 만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까요? h1 { color: red; } body h1 { color: green; } 두 규칙은 모두 을 선택하게 됩니다. 하지만 두 규칙이 지정하는 스타일은 서로 다릅니다. 그렇다면 은 어떻게 표현이 될까요? 에는 color: green이 적용되는데 이는 구체성과 연관이 있습니다. 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있습니다. 이 규칙을 '구체성'이라고 합니다. 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 ..