잉고래의 잇다이어리

color 속성은 텍스트 색상을 설정할 때 사용합니다. 이전에도 말했지만 색상을 지정하는데는 이름, hex, rgb의 3가지 방법이 있다고 했습니다. 가령 이런 식이죠. color: blue; 혹은 color: #0000ff; 혹은 color: rgb(0, 0, 255); 입니다. 텍스트 정렬을 하는 방법은 text-align 속성을 사용하면 됩니다. 이 속성은 수평 방향 정렬을 위해 사용되죠. 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬으로 말이죠. 다음과 같이 사용합니다. text-align: left; 혹은 text-align: center; 혹은 text-align: right; 입니다. 참 쉽죠잉~ 그 밖에 justify란 text-align 속성 값이 있는데요. 요건 저스트란 말처럼 줄의 폭에 맞춰..

outline 속성 outline은 한글로 하면 윤곽선, 외곽선인데요. css에서 outline 속성은 요소 바깥 외곽선의 스타일, 색상, 폭을 정할때 사용합니다. 이 말이 무슨말이냐면 요소를 "눈에 띄게" 만들기 위해 테두리 주위에 그려진 선이 바로 윤곽선입니다. 요소(element)를 도드라져 보이게 만드는거죠.어떻게 보면 border 속성하고 비슷해 보이기도 하지만 border 속성과 다른 큰 특징을 갖습니다. 바로 요소의 일부가 아니라는 점입니다. 이 말은 outline의 폭을 조절해도 요소의 전체 크기에 영향을 주지 않습니다. 또 outline의 폭이 요소 바깥으로 넘어갈 수도 있다는 뜻이죠. 하지만 border는 해당 속성의 너비와 높이가 요소 전체 크기에 포함을 주어 영향을 줍니다. outl..

css의 box model이란 css에서 모든 요소(=엘리먼트, element)들은 박스들로 간주됩니다. 그래서 css에서 디자인과 레이아웃에 대해 이야기할 때에 주로 "박스모델(box model)"이란 용어를 자주 사용하죠. 이 박스모델은 모든 각각의 html 요소들을 감싸는 하나의 박스를 지칭합니다. 이 박스는 여백(margin), 테두리(border), 패딩(padding)과 실제 내용(content)로 구성이 되고요. box model의 각 요소 content - 텍스트 및 이미지가 나타나는 내용 영역입니다. padding - content 주위의 영역을 투명하게 분리합니다. 패딩을 조절해서 내용이 너무 답답해 보이지 않도록 할때도 사용하죠. border - 패딩과 content 주위를 둘러싸는 ..

css tutorial : order of margin face The order of the margin property of css is top, right, bottom, left. Same as clockwise. In the following css example, the margin for each direction would be 1px up, 2px right, 3px down, 4px left. .test { margin: 1px 2px 3px 4px; } To set the property values separately for each face, use the margin property below for each face. .test { margin-top: 1px; margin-r..

요소의 높이, 너비 설정 height와 width 속성은 요소(Element)의 높이 및 너비를 설정하는데 사용됩니다. 높이와 너비는 auto나 px, cm 등의 길이 값 또는 포함된 블록의 백분율(%)로 지정합니다. (auto : 브라우저가 높이와 너비를 계산한다는 의미) 여기서 주의할 점은 height 및 width 속성에는 padding, border 또는 margin의 길이가 포함되지 않습니다. 즉 width, height 속성은 오직 내의 높이와 너비를 설정합니다. max-width 설정 max-width 속성은 요소의 최대 너비를 설정하는 데 사용됩니다. max-width는 px, cm 등의 길이 값이나 포함하는 블록의 퍼센트(%) 값으로 지정하거나 none으로 설정 될 수 있습니다 (none..

css padding CSS 패딩 속성은 내용 주위에 공간을 생성하는데 사용됩니다. 요소의 각면(위쪽, 오른쪽, 아래쪽 및 왼쪽)에 대해 패딩을 설정하기 위한 다양한 CSS 속성들이 있습니다. 각면에 대한 패딩 설정 CSS에는 요소의 각면에 대해 패딩을 지정하는 속성이 있습니다. padding-top padding-right padding-bottom padding-left 모든 패딩 속성은 다음 값을 가질 수 있습니다. length - px, pt, cm 등의 패딩을 지정합니다. % - 포함하는 요소의 너비에 대한 패딩을 %로 지정합니다. inherit - 패딩을 부모 요소로부터 상속해야한다고 지정합니다. padding - 각각의 패딩속성을 줄여서 쓰기위한 속성 코드를 단축하려면 모든 패딩 속성을 하나..