속성3 [CSS] 마진(margin)과 패딩(padding) 웹에서 마진과 패딩을 여백을 의미합니다. 마진과 패딩을 이용하면 콘텐츠를 원하는 곳에 배치할 수 있기에 활용도가 높습니다. 들어가기전에 마진과 패딩을 한눈에 볼 수 있게 표현하면 다음과 같습니다. 콘텐츠와 패딩을 묶어서 하나의 요소로 보고, 요소와 마진 사이의 경계를 테두리(border)라고 합니다. 1. 마진 (margin) 마진은 현재 요소 주위의 여백입니다. 마진을 조절하여 요소와 요소사이의 간격을 조절할 수 있습니다. 마진은 다음과 같은 속성으로 조절합니다. 마진 속성: 속성 값; ▽ margin-top: 상단의 여백 크기 지정 ▽ margin-bottom: 하단의 여백 크기 지정 ▽ margin-left: 좌측의 여백 크기 지정 ▽ margin-right: 우측의 여백 크기 지정 ▽ margin.. 2021. 1. 25. [CSS] 텍스트 스타일 속성 2 텍스트와 관련된 스타일 속성을 몇가지만 더 소개합니다. text-align: 속성 값; text-align은 문서 편집기에서 보는 좌측정렬, 가운데정렬, 우측정렬을 지원하는 속성입니다. 속성값 효과 start / end 현재 위치한 텍스트 줄의 시작/끝 위치에 맞추어 문단을 정렬 left / right 왼쪽/오른쪽 정렬 center 가운데 정렬 justify 양쪽에 맞춘 정렬 match-parent 부모 요소에 정렬 효과에 따라서 정렬 line-height: 속성 값; line-height 속성은 텍스트가 두 줄 이상일때 생기는 줄 사이 간격을 조정하는 속성입니다. 속성값으로는 숫자값, 실제 크기값, 백분율, inherit가 설정가능합니다. 마지막으로 소개드릴 속성은 이하의 두가지입니다. list-sty.. 2021. 1. 21. [CSS] 셀렉터 3 - 속성 셀렉터 이번 포스트에서는 태그 내부의 속성에 따라서 스타일을 다르게 적용할 수 있는 속성 셀렉터들에 대해서 다루겠습니다. 같은 태그라도 속성에 따라 다른 스타일을 적용할 수 있기 때문에 더 다채로운 구성이 가능해집니다. 1. 속성 셀렉터의 기본 속성 셀렉터는 기본적으로 다음과 같은 형태를 띕니다. 셀렉터[속성] { 속성: 속성 값; } [ ]사이에 원하는 속성을 지정하여 효과를 주게 됩니다. 셀렉터를 지정하지 않았을 경우 문서 내의 모든 요소에서 해당 속성을 가진 요소에 스타일이 적용됩니다. 아래 예제는 a태그에 href속성이 존재하면 붉은 글씨로 나타나게 스타일을 적용시킨 모습입니다. 이와같이 href속성이 없을 경우에는 스타일이 지정되지 않아 속성에 따라 다른 스타일을 적용할 수 있음을 보여줍니다. 2. 속.. 2020. 9. 27. 이전 1 다음 300x250
