본문 바로가기
반응형

css124

[html/css] font-weight 속성 (bold, 100~900, bolder, lighter) [html/css] 글꼴 굵기를 지정하는 font-weight 속성 (bold, 100~900, bolder, lighter) 오늘은 font-weight 속성을 알아 보겠습니다. font-weight은 사실 bold만 알아두셔도 좋지만, 필요하신 분들을 위해 상세하게 정리해 보았습니다 글꼴을 지정하는 font 속성 배우기 font-weight 속성 font-weight 속성은 글꼴의 굵기를 지정합니다 속성값 ☞ normal : 기본값 bold : 진하게 표시 100~900 : 숫자 별로 글꼴 굵기를 지정할 수 있음 bolder : 상위 요소에서 상속된 굵기보다 더 진하게 lighter : 상위 요소에서 상속된 굵기보다 더 흐리게 설명 ☞ font-weight: bold 글꼴을 진하게 표시하는데요 htm.. 2014. 5. 7.
[html/css] font-style 속성 (normal, italic, oblique 차이) [html/css] font-style 속성 (normal, italic, oblique 차이) 글꼴은 font 속성을 사용해 글꼴, 스타일, 글꼴 굵기, 글꼴 사이즈를 한꺼번에 지정하거나 각각 지정할 수도 있다고 했습니다. [html/css] 글꼴을 지정하는 font 속성 배우기 글꼴체를 지정할 때는 font-style 속성을 사용하며 글꼴 굵기는 font-weight 속성 글꼴 크기는 font-size 속성 글꼴을 지정할 때는 font-family 속성을 사용합니다. 오늘 배울 부분은 글꼴을 이탤릭체로 만다는 font-style 속성 입니다. font-style 속성 속성값은 다음과 같습니다 normal : 기본값 ltalic : 이탤릭체 oblique : 기울어짐꼴 상속 여부 : 상속됨 설명 ☞ f.. 2014. 5. 6.
[html/css] 글꼴을 지정하는 font 속성 배우기 [html/css] 글꼴을 지정하는 font 속성 배우기 css에서 글꼴에 대해 설정할 때는 font 속성을 사용합니다. font 속성은 글씨체, 글꼴 대문자 사용 여부, 글꼴 굵기, 글꼴 크기, 글꼴 집합을 한꺼번에 같이 지정할 수 있습니다. 오늘은 font 속성으로 한꺼번에 글꼴 스타일을 주는 방법을 배워 보고 다음 시간부터는 각각의 속성에 대해서도 차례차례 알아보겠습니다. 글꼴은 각각 스타일을 줄 수도 있고, 전체를 한꺼번에 지정할 수도 있습니다. p { font-style: italic; font-variant: small-cpas; font-weight: bold; font-size: 17px; font-family: arial, "Times New Roman", sans; } *font-fam.. 2014. 5. 4.
[html/css] 스타일 적용 우선 순위와 속성 강제 적용 !important [html/css] 스타일 적용 우선 순위와 속성 강제 적용 !important css 스타일 시트를 배울 때 초반에 다루었어야 할 부분이 아닌가 싶은데 저도 배우는 입장이다 보니, 공부하면 할수록 어렵게 느껴져서 함부로 글 쓸 엄두가 안 나더라고요. 그래도 조금이라도 정리된 부분을 써 보려 합니다~ CSS에서는 많은 스타일을 적용할 수 있는 장점이 있는 반면, 여러 스타일 적용이 반복됨으로써, 어떤 스타일을 먼저 적용해야할지 많이 혼동스럽습니다. 그래서, 스타일 적용 순서를 알아두면 편리하겠죠? 스타일 적용 우선 순위 CSS란? (HTML과 CSS의 차이, CSS 작성법) * 인라인 스타일(inline style) >내부 스타일(internal style)>외부 스타일(external sytle)>브라.. 2014. 4. 24.
[html/css] div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬) [html/css] div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬) 얼마 전에 div 1개 정렬하는 방법을 알아 보았습니다. [html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) 이번 시간에는 div 2개 정렬하는 방법에 대해 알아 볼게요. div가 2개일 때는 조금 더 복잡합니다. 2개 이상의 div는 문장 속에 삽입되는 경우도 있지만, 대부분은 레이아웃을 할 때 자주 사용되지요 그래서, 예제도 레이아웃 중심으로 배워 보겠습니다. STEP 0. 브라우저 기본값 초기화하기(reset) 각 브라우저마다 기본값이 달라, 여백에 약간씩의 오차가 발생하는데.. 브라우저 기본값의 초기화 리셋(reset.css)의 개념 모든 브라우저에서 통일된 화면을 볼 수 있도록 초기화(reset) 하는 과.. 2014. 4. 23.
[html/css]브라우저 기본값의 초기화 리셋(reset.css)의 개념 [html/css]브라우저 기본값의 초기화 리셋(reset.css)의 개념 브라우저는 HTML언어를 번역해서 보여주는 기능을 한다고 했는데요, HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이) 대표적인 브라우저로 IE(인터넷 익스폴러러) Firefox(파이어 폭스) Chrome(구글 크롬) Safari(사파리) Opera(오페라) 가 있습니다. 이들 브라우저는 모두 같은 기본값을 사용하고 있지 않습니다. 예를 들어, margin과 paddding을 적용했을 때 브라우저마다 보이는 방식이 다릅니다. 또한 들여쓰기의 거리나, line height의 폭, heading 크기의 기본값이 저마다 다르고요 리셋(reset) 의 개념 리셋(reset) 이라는 개념은, .. 2014. 4. 21.
[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) [html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) div 태그는 하나 이상의 태그를 마치 그릇처럼 담아서 여러 스타일을 주기에 편리합니다. 즉 div는 여러 요소를 담는 박스라고 보시면 됩니다. 보통 div 1개를 쓰는 경우는 글 속에 삽입하는 경우가 많으므로, css 작성은 인라인 스타일로 작성했습니다. [html/css기초] span, div CSS란? (HTML과 CSS의 차이, CSS 작성법) div 만드는 법 내용 여는 태그와 닫는 태그 사이에 내용을 넣으면 됩니다. 함께 사용할 수 있는 속성 width 너비 height 높이 margin 객체와 객체 사이의 공간 (여기서는 박스를 정렬할 때 사용하기도 함) padding 선과 내용사이의 공간 text-align 박스 안에 .. 2014. 4. 15.
[html/css] table 중앙 정렬하기 [html/css] table 중앙 정렬하기 부제: align, center를 사용하지 않고 css로 table 정렬하기 제가 10년 전에 html을 배울 당시에는, 문서를 정렬할 때 와 을 썼던 기억이 나는데요 이 둘은 일부 브라우저에서 지원이 되긴 하지만, 다른 브라우저에서는 깨져 보일 수 있고 현재는 소위 사용을 권장하지 않는 퇴화(deprecated) 태그라고 부르더군요. 이전 시간에는 inline 요소를 정렬하는 text-align에 대해 배웠는데요 text-align 속성으로 정렬하기 (left, right, center, justify) 오늘은 block 요소인 table 정렬하는 방법에 대해 알아보겠습니다. table 정렬하기 table을 오른쪽 왼쪽 정렬하기는 쉽습니다. float: le.. 2014. 4. 12.
[html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법) [html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법) 오늘 알아볼 태그는 사진이나 그림 같은 이미지를 넣는 태그입니다... 또한 이미지와 함께 사용하는 여러 속성이나, 이미지 중앙 정렬 방법도 같이 알아볼게요 태그 태그는 브라우저에게 이미지가 들어간다고 알리는 태그이며, 닫는 태그는 없습니다. xhtml에서는 로 시작 태그와 닫는 태그를 대신함. 예 태그에 넣을 수 있는 이미지로는 다음 파일입니다. GIF : 256 색상만 지원하므로, 단순한 이미지에 최적화 됨 JPG/JPEG : 수백가지 색상을 지원하며, 사진에 최적화 됨 PNG : JPG보다 저용량에 수백가지 색상을 지원함 됨 는 이미지가 위치한 곳을 알려주는 src 속성과 같이 사용합니다. src 속성 source의 약자.. 2014. 4. 9.
[html/css] a: link, a: visited, a: active, a: hover 사용법 자세히 알기 [html/css] a: link, a: visited, a: active, a: hover 사용법 자세히 알기 어제 문서를 연결시키는 태그를 알아보았는데요 문서를 연결하는 a 태그 (href, title, target 속성) 오늘은 태그와, 링크 자체에 다양한 효과를 주는 방법을 알아보겠습니다. 태그에 스타일 적용 방법 인라인으로 스타일 적용 예: abc 홈페이지 바로가기 실제로 이렇게 복잡하게 스타일을 적용하는 분은 없겠지만 연습 삼아 적어 봅니다.. internal이나 external 스타일 적용 예: a{ color: red; 글자색 background-color:pink; 배경색 font-style: italic; 글씨체 font-weight: bold; 굵기 font-size: 30px; 글자.. 2014. 4. 8.
반응형

티스토리툴바