WEB/CSS3 2014. 7. 15.
'...'을 CSS에서 처리하는 방법 - text-overflow:ellipsis
‘…’을 CSS에서 처리하는 방법 이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 ‘…’으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. 통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다 .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용이 됩니다. overflow:hidden : ..
WEB/CSS3 2014. 7. 11.
DIV 가로 중앙정렬과 세로 중앙정렬 방법
예전에 테이블코딩을 할때는 가로 중앙정렬(align='center')이나 세로 중앙정렬(valign='middle')이 정말 쉬웠었는데 웹표준이 적용된 DIV로 웹퍼블리싱을 할 경우 가로중앙정렬과 세로중앙정렬이 쉽지 않습니다.그나마 가로정렬은 쉬운편이나 세로정렬은 정말 쉽지 않습니다. 그래서 간단하게 중앙정렬에 대해 정리를 해보겠습니다. DIV에서 가로 정렬 가로 중앙정렬 입니다. DIV에서 세로 정렬세로정렬인 경우는 그냥 되지 않습니다. DIV의 속성을 BLOCK레벨에서 TABLE레벨로 변경한뒤 vertical align을 middle로 주면 됩니다. 세로 중앙정렬 입니다. 여기서 중요한 부분은 태그의 Display속성이 table-cell이어야 한다는 것입니다.
WEB/Notepad++ 2013. 11. 6.
Notepad++ 로 LESS코딩을 쉽게 컴파일 하기
예전에 노트패드++로 LESS를 코딩하는 방법에 대해 포스팅한 적이 있습니다. 2013/09/26 - [WEB/CSS3] - CSS 프리프로세서인 LESS 사용하기 2013/09/27 - [IT/Notepad++] - Notepad++ 에서 CSS를 LESS로 코딩 하기 그 글의 연장선상이라고 보시면 될것 같고.. 이번의 포스팅은 외부의 LESS컴파일러의 도움없이 Notepad++에서 바로 컴파일 할 수 있는 방법을 소개하려고 합니다. 대략적으로 설명을 드리면... 먼저 node.js를 설치하고 node.js를 통해 LESS 컴파일러를 설치합니다. 그리고 Notepad++에서 실행키 링크를 통해 단축키를 저장하여 실행시키면 자동으로 컴파일이 되면서 해당 디렉토리에 동일한 이름의 컴파일된 CSS를 저장시키..
WEB/Notepad++ 2013. 9. 27.
Notepad++ 에서 CSS를 LESS로 코딩 하기
업무중에 Front-End 개발을 하는 업무가 있어서 항상 Front-End에 관심을 가지고 있습니다. 뒷북일지 모르지만 프리프로세서라는 것을 알게되었고 프리프로세서 중 하나인 LESS에 대해서 정리해 봅니다. 제가 매인 편집기로 노트패드++를 사용하고 있어서 해당 편집기로 LESS를 개발할 수 있는 환경 세팅입니다. LESS에 대한 자세한 내용은 어제 포스팅한 내용을 참조하세요 2013/09/26 - [WEB/CSS3] - CSS 프리프로세서인 LESS 사용하기 프리프로세서는 "다른 프로그램에서 사용하기 위한 데이터를 만드는 또다른 프로그램" 이라고 하는데.... 그냥.. LESS, SASS/SCSS, COMPASS를 이용해서 마치 프로그램을 하는 것 처럼 변수와 내포규칙을 사용하여 CSS를 코딩 하는..
WEB/CSS3 2013. 9. 26.
CSS 프리프로세서인 LESS 사용하기
프로트엔드 개발자라면 대부분 아시겠지만 그 외 아직 프리프로세서가 뭔지 모르는 분들을 위해 포스팅 합니다. 프리프로세서 중에 LESS, SASS/SCSS, COMPASS등이 있는데 그중에 근래 트위터 부트스트랩이 사용했다고 해서 인기를 모으고 있는 LESS에 대해서 설명을 해 볼까 합니다. CSS 프리프로세서란 LESS 문법 LESS 적용하기 1. CSS 프리프로세서(Preprocessor) 란? CSS의 코드는 원래 프로그래밍언어라기 보다는 화면을 표현하기 위한 언어이기때문에 사실 개발자들이 보면 정말 체계적이지도 않고 쓴 코드 또 쓰고 또 쓰고... 답답하기 이를때 없었을 것입니다. 오죽했으면 LESS를 만들어 냈을까요. CSS 프리프로세서는 CSS를 변수나 Nested Rules을 이용하여 쉽고 빠..
WEB/CSS3 2013. 8. 27.
[CSS] Height :100% 가 적용되지 않을때 해결하는 방법
웹표준으로 코딩을 하다보면 Height 단위인 %가 적용이 되지 않는 경우가 있습니다. px단위로는 Height 값이 적용되는데 %는 적용이 되지 않는 경우의 대처법 입니다. 위의 그림을 보면 빨간색 줄처럼 height:100%가 적용되지 않는것을 볼 수가 있습니다. 하지만 Height:100%가 꼭 적용되야 할 때가 있죠.. HEIGHT:100%가 적용되게 하는 방법 일단은 먼저 DOCTYPE부터 설정을 해야하구요. 그다음에 사이에 html, body {height:100%}를 넣으시면 적용이 됩니다. html, body { height:100%; overflow:hidden } .h-div {height:96%; border:3px #f99 solid} HTML 부분 그러면.. 짜짠~~~ 아래의 그림..
WEB/CSS3 2013. 8. 23.
<UL><LI>를 이용한 가로정렬 메뉴 만들기
이번에는 UL과 LI 태그를 이용해서 간단하게 가로나열 메뉴를 만드는 포스팅을 하겠습니다. 예전에는 테이블을 이용해서 만들거나 그냥 드림위버가 만들어주는 방식으로 만들었었는데요.. 이제는 HTML5를 이용해서 날코딩으로 간단하게 코딩하는 법을 알려드립니다. 이것은 기본의 형태이고 CSS를 이용해서 좀더 꾸며야 겠죠? HTML 부분입니다. MENU1 MENU2 MENU3 MENU4 MENU5 CSS 부분입니다.CSS적용은 여러가지 방법이 있지만 여기서는 태그 사이에 넣으시면 됩니다. /* 기본 설정*/ a{text-decoration:none; color:#000000;} a:hover{color:#ff0000;} /* nav tag */ nav ul{padding-top:10px;} /* 상단 여백 10..
