본문 바로가기
반응형

css124

[html/css] text-transform 속성 (대문자 전환) [html/css] text-transform 속성 (대문자 전환) text-transform 속성은, 문자를 대문자로 전환하는 속성입니다. none 기본값으로, 텍스트를 html 코드에 있는 그대로 읽음 capitalize 각 단어의 첫번째 문자를 대문자로 만듦(예: Seoul National Univ.) uppercase 모든 문자를 대문자로 바꿈 (예: SEOUL NATIONAL UNIV.) lowercase 모든 문자를 소문자로 바꿈 (예: seoul national univ.) 상속 여부: yes ▶ html/css 작성 예 html text-transform : none Cascading Style Sheets (CSS) is a style sheet language used for descr.. 2014. 6. 12.
[html/css] 수직으로 가운데 정렬 방법 (다섯 가지) [html/css] 수직으로 가운데 정렬 방법(다섯 가지) html/css 배우면서 골치 아픈 부분 중 하나죠. 수평과 수직 중앙 정렬하는 방법이, 왜 이렇게 난해해야만 되는가 다시 한 번 의아해 하며 정리해 보았습니다. 수평 중앙 정렬 방법은 아래 글 참조해 주시고요. div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬) [html/css] table 중앙 정렬하기 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법) 저작권 관련 공지 바로가기 !important 오늘 배워볼 부분은 수직으로 가운데 정렬하기입니다. 1. 인라인 요소와 인라인 블록 요소의 수직 중앙 정렬 2. table 수직 중앙 정렬 1. 2는 하기 링크 참조해주세요. 또 3번 .. 2014. 6. 11.
[html/css] text-indent 속성(들여쓰기) [html/css] text-indent 속성(들여쓰기) text-indent는 문단의 첫줄 들여쓰기할 때 쓰는 속성입니다. 들여쓰기만 잘 써도 문장이 멋스러워 보이죠...^^ text-indent 속성은 텍스트를 담고 있는 블록 컨테이너에 적용합니다. ▶속성값 길이값 px, em, cm 등의 단위로 지정, 기본값은 0임. % 부모 요소 너비에 상대적인 백분율 *음수값도 가능. ▶사용 예: div{text-indent:} ▶html/css 작성해 보겠습니다 부분엔 30px 들여쓰기 부분엔 10% 들여쓰기를 설정해 보겠습니다. html/css Cascading Style Sheets (CSS) is a style sheet language used for describing the look and form.. 2014. 6. 10.
text-decoration 속성(none, underline, overline, line-through) text-decoration 속성(none, underline, overline, line-through) Css에서는 글씨에 밑줄이나 윗줄, 중간줄을 넣을 때 text-decoration 속성을 사용합니다. ▶text-decoration 속성값 none 기본값으로 밑줄이 없는 보통 글자 underline 글자 아래에 밑줄 overline 글자 위에 줄이 그어짐 line-through 글자 중간에 줄이 그어짐 blink 글자를 반짝거리게 만듬. 퇴화 속성으로 사용을 권장하지 않습니다. css 명세에서는 브라우저가 이 속성값을 무시하도록 하고 있음. 참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration 상속 여부 : no ▶링크 밑줄 .. 2014. 6. 9.
[html/css] vertical-align 속성 자세히 알기(수직 정렬) [html/css] vertical-align 속성 자세히 알기(인라인 요소의 수직 정렬) vertical-align 속성, 그저 수직 정렬할 때 쓰이는 걸로만 알고 있었는데 정리하다 보니 너무 너무 어렵네요 필요하신 부분만 골라서 보시면 되겠습니다~ css에서는 인라인 요소와 인라인 블록 요소를 수직 정렬할 때 vertical-align 속성을 씁니다. vertical-align 속성은 다음과 같은 특징이 있습니다. 『 1. inline이나 inline-block 요소에만 적용 됨 따라서 block 요소인 는 이 속성을 썼을 때 작동되지 않음. 2. 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않음. (table cell에 적용할 때는 제외) 3. table cell에 적용할 때는 내용에 영향을 미.. 2014. 6. 5.
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE 비표준 모드quirks mode, 표준 모드standards mode 차이와 DOCTYPE 선언 HTML과 CSS를 공부하다 보면 이런 단어를 많이 접합니다. 비표준 모드quirks mode, 표준 모드standards mode, 거의 표준 모드 almost standards mode , 엄격 모드strict mode 영어 자체의 뜻도 어렵지만, 우리말로 써도 솔직히 무슨 말인지 감이 잡히지 않았습니다.. -_-; 그래서 이들 단어 유래(?)와 뜻을 한 번 정리해 보았습니다. 상호호환성을 위한 렌더링 모드 웹페이지는 HTML과 CSS로 만들어지는데, 오래된 브라우저는 HTML과 CSS 명세(W3C 표준)가 완성되기도 전에 개발되어서, 이들 표준에 잘 부응하지 못하였습니다. 크로스브라우징, 웹표준과 핵(h.. 2014. 6. 2.
[html/css]background 속성(배경 전체 지정) [html/css]background 속성(배경 전체 지정) 차례 : background-image background-repeat background-attachment background-position background-size background 끝나지 않을 것만 같았던 배경 관련 속성이 오늘로 끝나네요. 배경 이미지와 관련해서는 background-origin 속성과 background-clip 속성이 더 있지만 이 부분은 나중에 다루어 보겠습니다. background 속성은 지금까지 다루었던 배경과 관련된 속성을 한꺼번에 지정할 수 있습니다. 사용 예 : body { background: green url('brabbit.png') no-repeat fixed 50% 50%/100% 100%.. 2014. 5. 30.
[html/css]background-size 속성(배경이미지 크기 조절) [html/css]background-size 속성(배경이미지 크기 조절) 차례 : background-image background-repeat background-attachment background-position background-size background 배경 이미지에 대한 속성을 다뤄 보고 있습니다. 오늘은 배경 이미지 크기를 조절하는 background-size 속성입니다. 나머지 하나만 다루면 배경 이미지에 대한 것은 모두 끝나네요^^ 모두 힘 내세요!^^ background-size 속성 우선 배경 이미지 크기(너비와, 높이)를 조절하는 이 속성은 아래 브라우저에서만 지원합니다. IE9+, Firefox, Opera, Chrome, and Safari ▶속성값 auto 기본값으로 배.. 2014. 5. 29.
[html/css] line-height 속성 배우기 [html/css] line-height 속성 배우기(줄간격) font 속성을 배우면서 같이 다루었어야 하는데 이제야 정리를 합니다. line-height는 줄간격을 지정하는 속성입니다. ▶ 속성값 normal 기본값으로 보통 1.0 ~1.2 입니다. 숫자 현재 글꼴에서 몇 배 크기로 할지 지정 현재 글꼴이 14px 이라면, line-height: 1.5로 할 경우, 줄간격이 21px 높이로 지정됨 길이 px, pt, cm, em등의 고정된 폭 % 현재 글꼴크기의 백분율로 높이를 지정 상속 여부 : 상속 됨. *음수 값은 지정되지 않음 글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) ▶ 사용 예 숫자로 지정 할 때 : div{ font-size: 1em; line-height.. 2014. 5. 27.
[html/css]background-position 속성(배경이미지 위치 지정) [html/css]background-position 속성(배경이미지 위치 지정) 차례 : background-image background-repeat background-attachment background-position background-size background 지난 시간엔, 배경 이미지를 고정하는 background-attachment 속성에 대해 배웠는데요 오늘은 배경 이미지 위치를 지정하는 background-position 속성입니다. background-position 속성 ▶속성값 left top 왼쪽 상단 left center 왼쪽 중앙 left bottom 왼쪽 맨아래 right top 오른쪽 상단 right center 오른쪽 중앙 right bottom 오른쪽 맨아래 ce.. 2014. 5. 26.
반응형

티스토리툴바