본문 바로가기

분류 전체보기751

[bootstrap] 부트스트랩 – 각종 인라인 요소 글자 태그 부트스트랩의 각종 인라인 요소 글자 태그들을 알아보겠습니다. – 형광펜으로 칠한 것처럼 글자를 강조할 수 있는 태그입니다. 기본적으로 노란색 형광펜을 칠한 것처럼 나오지만 부트스트랩에서는 조금 더 연한 노란색으로 나타납니다. – 글자를 그대로 남기면서 삭제를 표시하는 기능을 합니다. – Strikethrough(취소선)의 약자로 더 이상 정확하지 않거나 적절하지 않다는 의미가 있는 태그입니다. del 태그와 동일하게 나타납니다. HTML5에서는 동일하게 표시되더라도 입력한 태그에 따라서 의미를 다르게 해석하는 시맨틱(Semantic) 기능이 있습니다. – 기존 문서에 글자가 추가됬다는 의미를 부여하는 태그입니다. 글자에 밑줄이 만들어 집니다. – 위 ins와 마찬가지로 밑줄이 그어지지만 의미가 다릅니다... 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 전체폭 레이아웃 부트스트랩 그리드에서는 .container 선택자를 사용하는데요. .container 선택자에 -fluid만 추가하면 전체폭 레이아웃으로 변경됩니다. … 부트스트랩 2.0 버전에서는 .row 선택자도 .row-fluid로 같이 변경해야 했지만 3.0에서는 .container-fluid만 변경하면 됩니다. .container-fluid는 너비가 정해지지 않아서 부모 요소의 너비에 따라 좌우되며 주로 전체폭 레이아웃을 만들 때 사용합니다. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 컬럼 오프셋(Column Offset) 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 컬럼 오프셋이란 그리드를 일정 크기만큼 간격을 둘 수 있는 기능입니다. … 하나의 .row에 하나의 그리드만 있습니다. 해당 그리드의 크기만큼 오프셋 선택자를 추가하면 왼쪽으로부터 떨어져서 배치됩니다. 어떤 요소를 중앙 정렬하.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 스마트폰에 적합한 그리드 선택자 배치 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 스마트폰처럼 좁은 화면에서는 모든 그리드가 좌우로 배열되면 폭이 너무 좁습니다. 그래서 마지막 .col-xs-6 의 총 합이 12가 넘게해서 마지막 그리드는 아래로 내려오게해서 폭을 넓게 사용할 수 있습니다. 다른 크기의 너비.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 부트스트랩은 12열의 그리드 시스템을 사용합니다. 그리드의 사이즈는 입력한 클래스의 선택자에 따라 달라집니다. 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 가장 상위에 .container 선택자가, 그 바로 하위에 .row 선택자가, 그 다음 하위에 그리드를 만들기 위한.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 컬럼 네스팅(Column Nesting) 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 이번에는 .row 부분을 복사해서 첫 번째 그리드의 콘텐츠를 지우고 붙여넣었습니다. 이렇게 내부에 레이아웃을 추가로 만들려면 .row가 있는 태그도 추가해야 합니다. 부모 그리드의 숫자가 8인데, 작식 그리드의 숫자의 합이 1.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 그리드를 밀고 당기는 선택자 사용하기 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 좌측이 내용이고, 우측이 사이드바인 그리드입니다. 각 요소 맨 끝에 .col-md-push-4와 .col-md-pull-8 선택자를 추가했습니다. push와 pull은 왼쪽을 기준으로 하므로 push는 왼쪽에서 오른쪽으로 미는.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 전통적인 페이지 레이아웃 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 좌측 내용과 우측에 사이드바가 있는 전통적인 그리드인데요. 좌측 그리드는 8을 우측 그리드는 4로 2:1 비율로 만들었습니다.… … 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 컬럼 리셋 Head Body Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » Heading Donec id elit non mi porta gravida at eget metus. View details » Heading Donec sed odio dui. Cras justo odio, dapibus ac faci.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 동시에 여러개의 그리드 선택자 사용 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 하나의 그리드 선택자만 사용한 레이아웃과 여러 개의 그리드 선택자를 사용한 레이아웃을 비교하기 위해서 .row 부분을 복사해 바로 아래에 붙여 넣고 col-md-4 선택자에 col-lg-4 col-sm-4 선택자를 추가해 보았.. 2016. 1. 15.
[자바스크립트] javascript로 글자 byte 계산 및 byte만큼 자르기 글자의 byte를 계산하고 byte만큼 자르는 예제입니다. charByteSize(ch) : 한글자에 대한 byte를 계산합니다. getByteLength(s) : 입력된 글자 전체의 byte를 계산해서 알려줍니다. cutByteLength(s) : 원하는 byte 만큼 글자를 잘라서 반환합니다. 2016. 1. 14.
[자바스크립트] javascript로 selectbox 위아래 이동하게 구현하기 멀티 selectbox에서 위아래 이동하게 하는 예제입니다. 2016. 1. 14.
[자바스크립트] javascript로 선택한 이미지 base64 코드로 변환하여 화면에 보여주기 이미지를 base64 인코딩하여 보여줄 수가 있습니다. 보통 이미지들은 이런식으로 이미지의 경로를 표시하여 이미지를 화면에 보여주는데요. 이런식으로 base64 코드로 이미지를 보여줄수도 있답니다. 보통 이미지를 DB로 저장했다가 화면에 불러와서 보여줄 때 사용하는 방식인데요. 이미지가 많을 경우는 이 방식이 속도가 느리다고 하니 사이트 상황에 맞게 사용하시면 될 것 같습니다. 아래 예제는 이미지를 선택하면 이미지를 base64로 인코딩하여 코드값으로 화면에 바로 출력하는 예제입니다. 이미지를 따로 정해진 경로에 저장하지 않아도 되므로 간편하게 사용할 수 있답니다. 2016. 1. 14.
[jQuery] 제이쿼리 - each()의 반대 reverse() 사용하기 each() 문은 같은 객체를 반복해서 어떤 작업을 할 때 사용하는데요.$(“[type=checkbox]”).each({function(){ … }); 반대로 거꾸로 반복 작업을 해야할 때는 어떻게 사용해야 할까요? get().reverse()를 사용하시면 됩니다.$( $(“[type=checkbox]”).get().reverse() ).each(function( index ){ … }); 아래 예제에서 어떻게 동작하는지 확인하실 수 있습니다. 2016. 1. 14.
[JSTL] java.lang.NoSuchFieldError: deferredExperession 오류 발생시 해결방법 JSP 페이지에서 JSTL 태그를 사용하고 있는데요. 아래처럼 JSTL 태그에서 오류가 발생했습니다.java.lang.NoSuchFieldError: deferredExperession 구글링을 해보니 jstl.jar 파일이 겹쳐서 나타나는 문제라고 하는군요. 찾아보니 정말 jstl-*.jar 파일이 2개 있네요. 둘 중에 하나 삭제하고 classpath에서 삭제한 jar 파일을 지워주니 잘 되네요^^ 2016. 1. 14.

티스토리툴바