CSS21 CSS Text 관련 속성 mozilla에 css fonts, css text라고 검색하면 관련 속성이 30개가 넘게 나온다. 외울 수 없으니 자주 사용하는 것만 간단히 파악하고 다른 것들은 필요할 때 찾아서 쓰도록 하자. 한글이나 워드 프로그램에서 글자를 꾸며 보았을 것이다. 대표적으로 글자 크기 변경, 정렬, 글자 색 변경 이 있다. 이런 기능들을 css를 활용하여 적용하는 작업인 셈이다. 아래 설명할 것들은 글자가 들어가는 태그라면 가능하다. , 과 같은 것들에서 글자를 사용하기 때문이다. font 관련 속성 (글자 레벨에서의 속성) font-size : 글자의 크기를 조정 font-weight: 글자 굵기 조정 font-style: font 스타일로 normal | italic | oblique 등이 있음 color: 글자.. 2020. 5. 6. CSS Box align, content align 레이아웃을 구성하면서 정렬의 사용 빈도가 높다. 정렬의 종류는 두 가지이다. 하나는 박스를 정렬하는 방법이고 다른 하나는 박스 안의 컨텐츠를 정렬하는 방법이다. 박스를 화면 상에서 가운데 정렬하는 방법은 display 속성에 따라 다르다. block : width를 지정 후 margin: auto; inline: 부모 태그에 text-align: center; inline-block : inline과 동일 박스 내부의 컨텐츠를 정렬하는 방법은 display 속성에 따라 다르다. block: text-align: center; inline: 박스 자체를 정렬하는 방법을 이용 inline-block: text-align: center; 정리하면 1.박스 자체 정렬 1.1. block인 경우 width 지정 .. 2020. 5. 6. CSS Padding, Border, Margin Padding: Content영역에서부터 여유공간 치수이며 Padding을 변경하여도 content영역인 width, height는 변하지 않음. Border: content영역에서 padding만큼 떨어진 공간에 위치하는 테두리이며 테두리 선을 지정할 수 있다. 박스의 내부, 외부를 구분하는 테두리로 보면 된다. Margin: border와 다른 border사이의 여유공간. 박스 간의 여백을 위한 값이다. 주의할 점은 inline element의 경우에는 상하 padding, 상하 margin이 원활하게 적용되지 않음. 2020. 5. 5. CSS Height and Width css의 height, width에 설정할 수 있는 종류는 5가지이다. auto: 따로 지정하지 않으면 auto가 default이고 브라우저가 계산한 값으로 들어감. length: px, cm 등 수치를 입력하는 방법. %: 해당 element를 감싸는 block의 width, height를 기준으로 계산됨. initial: default value로 설정(?). 브라우저가 지정한 값으로 설정. inherit: 부모의 값을 사용. ?auto와 initial이 같은 의미로 보이나 다른 점을 발견하면 수정 필요함. height, width 설명 https://www.w3schools.com/css/css_dimension.asp initial 설명 https://developer.mozilla.org/ko/.. 2020. 5. 5. 이전 1 2 3 4 5 6 다음