메뉴 건너뛰기

메뉴 건너뛰기 본문으로 바로가기
조회 수 20833 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
layout_li_inline.png

위와 같이 <li> 태그를 화면 가운데에서 가로로 정렬시키고 싶을 때
float:left 속성을 사용하면 리스트가 화면 가운데가 아닌 왼쪽에 붙어버린다.
그래서 이 때에는 float 속성이 아닌 display:inline 속성을 사용해주면 가로로 정렬이 된다.

<style>
#sitebar {text-align:center;}
#sitebar li {display:inline;}
</style>
<div id="sitebar">
<ul>
<li>ABOUT</li>
<li>BLOG</li>
<li>GUESTBOOK</li>
</ul>
</div>

  • ?
    이온디 2009.02.10 20:22
    단순히 레이어를 정렬시키고자 할 때에도 다음과 같이 하시면 됩니다.
     <style>
    #sitebar {text-align:center;}
    #sitebar span {display:inline;}
    </style>
    <div id="sitebar">
      <span>ABOUT</span>
      <span>BLOG</span>
      <span>GUESTBOOK</span>
    </div>



CSS

CSS, SCSS, SASS, CSS폰트 등 CSS의 고급 기술에 대해 같이 공부해봐요!

  1. ,,

    input disabled checked 상태선택자 (css, style)

    Date2013년 12월 09일 조회4076 좋아요0 댓글0
    ,,
    Read More
  2. CSS만 이용하여 멋진 스크롤바 만들기 (크롬)

    Date2013년 12월 01일 조회7909 좋아요0 댓글0
    Inset & Customized WebKit Scrollbar http://css-tricks.com/examples/WebKitScrollbars/ 문득 IE10을 보는데 스크롤바 색상이 참 단조롭고 예쁘더군요. 크롬은 일반 예전 스크롤바 디자인이던데 말이죠. :( 크롬&사파리 렌더링용 스크롤바 CSS 디자...
    Read More
  3. 크롬, 사파리, 오페라 등에서 나타나는 브라우저의 기본 설정중에서 커서가 이동하면 노란? 아니 오렌지 색?에 가까운 테두리가 생겨난다. 혹 css 상에 설정된것 처럼 말이다. 알아보니 기본 브라우저 기본속성으로 outline 관련 스타일이 자동설정된다. 아래 ...

    모던 브라우저 input의 커서이동 시 노란테두리의 없애기

    Date2013년 08월 25일 조회4424 좋아요0 댓글0
    크롬, 사파리, 오페라 등에서 나타나는 브라우저의 기본 설정중에서 커서가 이동하면 노란? 아니 오렌지 색?에 가까운 테두리가 생겨난다. 혹 css 상에 설정된것 처럼 말이다. 알아보니 기본 브라우저 기본속성으로 outline 관련 스타일이 자동설정된다. 아래 ...
    Read More
  4. display: table; 설정은 IE6-7에서는 작동하지 않습니다.IE8+ 에서 작동됩니다. 테이블을 마크업 하실 줄 안다면, display: table;을 이해하기도 사용하기도 어렵지 않습니다. 간단히 설명드리면... <table> <tr> <td> </td> </tr> </table> 위 마크업에는 아...

    table-cell

    Date2013년 08월 15일 조회4024 좋아요0 댓글0
    display: table; 설정은 IE6-7에서는 작동하지 않습니다.IE8+ 에서 작동됩니다. 테이블을 마크업 하실 줄 안다면, display: table;을 이해하기도 사용하기도 어렵지 않습니다. 간단히 설명드리면... <table> <tr> <td> </td> </tr> </table> 위 마크업에는 아...
    Read More
  5. css css3 box-shadow 예제 - Shadow Box 레이어 만들기 (섀도우박스)

    Date2013년 08월 09일 Categorycss 조회5775 좋아요0 댓글0
    닷플 홈페이지를 들어가봤는데 팝업창으로 예쁜 그림자가 둘러진 레이어가 있어서 소스를 소개합니다. ^^ 일단 코드는 이렇습니다. <style> /* 배경이미지 */ body {background: url("background.jpg") repeat;} /* 그림자 */ .signin-wrapper { display: in...
    Read More
  6. 모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작합니다. 초기화 코드는 모든 웹 브라우저에서 동일한 출력을 만드는데 사용합니다. 전 세계적으로 다음의 초기화 코드를 많이 사용합니다. http://meyerweb.com/eric/tools/css/reset/ eric-reset-...

    reset 초기화 코드

    Date2013년 08월 04일 Categoryreset 조회6018 좋아요0 댓글0
    모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작합니다. 초기화 코드는 모든 웹 브라우저에서 동일한 출력을 만드는데 사용합니다. 전 세계적으로 다음의 초기화 코드를 많이 사용합니다. http://meyerweb.com/eric/tools/css/reset/ eric-reset-...
    Read More
  7. Using Calc() Function

    Date2013년 03월 05일 조회4676 좋아요0 댓글0
    지원브라우저 : IE9 이상 참조 : https://developer.mozilla.org/ko/docs/Web/CSS/calc As mentioned above, we can use calc() to determine lengths like width, height, margin,padding, font-size, etc. To measure, we can use Mathematical expressions:...
    Read More
  8. bordercolorlight와 bordercolordark 는 IE 전용입니다. 그래서 크롬 등에서는 표현이 되질 않습니다. 그래서 이 방법을 css로 표현해봤습니다. table { border-bottom:1px solid #777777; border-right:1px solid #777777; border-top:1px solid #424242; bor...

    CSS로 table의 bordercolorlight 와 bodercolordark 값 표현하기

    Date2013년 02월 10일 조회4788 좋아요0 댓글0
    bordercolorlight와 bordercolordark 는 IE 전용입니다. 그래서 크롬 등에서는 표현이 되질 않습니다. 그래서 이 방법을 css로 표현해봤습니다. table { border-bottom:1px solid #777777; border-right:1px solid #777777; border-top:1px solid #424242; bor...
    Read More
  9. css인 box-shadow, border-radius를 사용하여 그림자 효과를 주었습니다. 멀티로 주시면 됩니다 ㅎ box-shadow : 10px 10px 3px #333, -10px 10px 3px #333, 10px -10px 3px #333, -10px -10px 3px #333

    curve-drop shadow 효과

    Date2012년 12월 14일 조회5501 좋아요0 댓글0
    css인 box-shadow, border-radius를 사용하여 그림자 효과를 주었습니다. 멀티로 주시면 됩니다 ㅎ box-shadow : 10px 10px 3px #333, -10px 10px 3px #333, 10px -10px 3px #333, -10px -10px 3px #333
    Read More
  10. CSS, radio버튼, Checkbox 세로 정렬Checkbox나 Radio 버튼을 활용할 때, 텍스트와 정확하게 정렬이 되지 않죠. 딱 1 pixel 정도 위로 치우친 모양으로 나타납니다. Checkbox와 Radio 버튼의 세로정렬을 위한 Style

    CSS, radio버튼, Checkbox 세로 정렬

    Date2012년 12월 01일 조회10250 좋아요0 댓글0
    CSS, radio버튼, Checkbox 세로 정렬Checkbox나 Radio 버튼을 활용할 때, 텍스트와 정확하게 정렬이 되지 않죠. 딱 1 pixel 정도 위로 치우친 모양으로 나타납니다. Checkbox와 Radio 버튼의 세로정렬을 위한 Style
    Read More
  11. 이미지를 흑백으로 표현하기

    Date2010년 07월 06일 조회10663 좋아요0 댓글2
    크로스브라우징용 /* Firefox 10+, Firefox on Android */ filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 ...
    Read More
  12. 스크롤에 영향을 받지 않고 화면에 고정된 바로가기 메뉴를 말씀하시는것이 맞다면 HTML과 CSS코드만으로 제작된 아래 예제를 한번 봐주세요. http://naradesign.net/open_content/reference/fixedLayer/index.html http://naradesign.net/wp/2007/09/08/128/ ...

    스크롤에 영향을 받지 않고 화면에 고정된 레이어

    Date2009년 02월 20일 조회14960 좋아요0 댓글0
    스크롤에 영향을 받지 않고 화면에 고정된 바로가기 메뉴를 말씀하시는것이 맞다면 HTML과 CSS코드만으로 제작된 아래 예제를 한번 봐주세요. http://naradesign.net/open_content/reference/fixedLayer/index.html http://naradesign.net/wp/2007/09/08/128/ ...
    Read More
  13. 모든 글자를 대문자로 font-variant : small-caps; 첫문자만 대문자로 text-transform:capitalize; 모든 글자를 대문자로 text-transform:uppercase 글자 속성 없음 text-decoration:none; 1. 폰트(fonts) 자체에 대한 스타일 시트 CSS를 활용하여 글자의 속성...

    font 속성

    Date2009년 02월 09일 조회9979 좋아요0 댓글0
    모든 글자를 대문자로 font-variant : small-caps; 첫문자만 대문자로 text-transform:capitalize; 모든 글자를 대문자로 text-transform:uppercase 글자 속성 없음 text-decoration:none; 1. 폰트(fonts) 자체에 대한 스타일 시트 CSS를 활용하여 글자의 속성...
    Read More
  14. 형식: filter:alpha(opacity=70); opacity:0.7; -moz-opacity:0.7; 예)<style type="text/css"> #mm { filter:alpha(opacity=30); opacity:0.3; -moz-opacity:0.3; } </style> <div id=mm> <img src=http://www.ssamss.net/blog/attach/1/2215602241.gif" alt=...

    알파 필터 적용하기 투명(filter:alpha)효과 (익스,파폭,오페라)

    Date2009년 01월 31일 조회15762 좋아요0 댓글0
    형식: filter:alpha(opacity=70); opacity:0.7; -moz-opacity:0.7; 예)<style type="text/css"> #mm { filter:alpha(opacity=30); opacity:0.3; -moz-opacity:0.3; } </style> <div id=mm> <img src=http://www.ssamss.net/blog/attach/1/2215602241.gif" alt=...
    Read More
  15. li 항목을 화면 가운데에서 가로로 정렬시키고 싶을 때

    Date2009년 01월 30일 조회20833 좋아요0 댓글1
    위와 같이 <li> 태그를 화면 가운데에서 가로로 정렬시키고 싶을 때 float:left 속성을 사용하면 리스트가 화면 가운데가 아닌 왼쪽에 붙어버린다. 그래서 이 때에는 float 속성이 아닌 display:inline 속성을 사용해주면 가로로 정렬이 된다. <style> #siteb...
    Read More
  16. - Font PropertiesPropertyValid ValuesExampleInheritedfont-family[font name or type]font-family: Verdana, Arial;Yfont-stylenormal | italicfont-style:italic;Yfont-variantnormal | small-capsfont-variant:small-caps;Yfont-weightnormal | boldfont-...

    CSS reference

    Date2009년 01월 29일 조회5783 좋아요0 댓글0
    - Font PropertiesPropertyValid ValuesExampleInheritedfont-family[font name or type]font-family: Verdana, Arial;Yfont-stylenormal | italicfont-style:italic;Yfont-variantnormal | small-capsfont-variant:small-caps;Yfont-weightnormal | boldfont-...
    Read More
  17. DIV에 스크롤바 나타내기 overflow-x x축(가로) overflow-y y축(세로) overflow:visible 레이어 크기를 키워서 보여준다 (* 디폴트) overflow:hidden 레이어 크기만큼만 보여준다 overflow:auto 내용에 따라 자동으로 스크롤을 만든다 overflow:scroll 무조건 ...

    div

    Date2009년 01월 02일 조회6298 좋아요0 댓글0
    DIV에 스크롤바 나타내기 overflow-x x축(가로) overflow-y y축(세로) overflow:visible 레이어 크기를 키워서 보여준다 (* 디폴트) overflow:hidden 레이어 크기만큼만 보여준다 overflow:auto 내용에 따라 자동으로 스크롤을 만든다 overflow:scroll 무조건 ...
    Read More
  18. 웹표준에서 css의 height:100% 라는 건 없다고 한다. 이를 나타내기 위해 다음 링크와 같이 표현해본다.

    100% Height Layout Using CSS

    Date2008년 12월 20일 조회6017 좋아요0 댓글0
    웹표준에서 css의 height:100% 라는 건 없다고 한다. 이를 나타내기 위해 다음 링크와 같이 표현해본다.
    Read More
  19. 인터넷익스플로러6.0 에서 border-style 투명으로 주기

    Date2007년 09월 06일 조회12462 좋아요0 댓글0
    이 팁은 CSS를 이용하여 인터넷 익스플로러 6.0 에서 border-style을 투명(transparent)으로 지정하는 방법에 대해서 적어놓은 글입니다. ※ 아래의 긴 설명은 이해를 돕기 위해 추가 설명을 한 것이므로 엑기스만 보고자 하시는 분은 간단히 절취선 아래의 회...
    Read More
  20. <TEXTAREA name=memo STYLE="ime-mode:active"> style="ime-mode:active" 이 한줄이 처음부터 한글을 입력시키게 하는 명령입니다. ime-mode 에 대한 속성은 다음과 같습니다. auto - 기본값(영어) active - 한글모드 inactive - 영문모드 disabled - 한글은 ...

    폼 입력시 한글/영문 지정하기

    Date2007년 04월 24일 조회6026 좋아요42 댓글0
    <TEXTAREA name=memo STYLE="ime-mode:active"> style="ime-mode:active" 이 한줄이 처음부터 한글을 입력시키게 하는 명령입니다. ime-mode 에 대한 속성은 다음과 같습니다. auto - 기본값(영어) active - 한글모드 inactive - 영문모드 disabled - 한글은 ...
    Read More
목록
Board Pagination Prev 1 2 3 4 5 Next
/ 5
  • 사이트 현황
  • 회원 현황
  • 프로젝트 현황
  • 사이트맵
현재 접속한 회원
  • 현재 로그인 중인 회원이 없습니다.
회원별 포인트 랭킹
1
k02092000
2368
2
socialskyo
1549
3
이아빠
1200
4
슬쿠미
1049
5
nado0124
1020
오늘 로그인한 회원
오늘 접속한 회원이 없습니다.
오늘 생일인 회원
12-10
박예슬
12-12
gkttjs
샤샤
지젤
유리인형
진행중 프로젝트
진행 중인 프로젝트가 없습니다.
[프로젝트 의뢰하기]
최근 완료된 프로젝트
삼육보건대학교 학생지원
지성하우징
경북행복지도
고령군농촌지원센터
판매중인 XE 자료
준비 중입니다.
이온디 호스팅 신청하기
현재 신청자가 없습니다.
많은 신청 부탁드립니다.
chat