CSS 검색 결과

해당 글 86건

jQuery CDN 이용하기

javascript 라이브러리로 jQuery를 많이들 이용한다. 강력한 javascript의 기능을 간편하게, 그리고 브라우저의 특성을 거의 타지 않고 편리하게 이용할 수 있어서 생산성 또한 매우 향상된다. jQuery의 로고이다. 로고에서 jQuery의 모토를 알 수 있다. write less, do more.jQuery를 이용하는 방법은 http://www.jquery.com 에서 원하는 버전의 라이브러리를 다운로드받아서 본인의 계정에 업로드 후 사용하는 방법이 있다. jQuery 라이브러리의 용량이 얼마 되지 않기에 본인의 계정에 올려놓고 사용해도 트래픽에 큰 영향은 없지만, 만약 접속자 수가 많아지면 그 작은 용량도 무시하진 못할 것이기에... CDN을 이용하는 방법을 알아보자. CDN이랑 Con..
WEB/jQuery 2016. 12. 14. 09:38

ul, li 가운데 정렬

보통 가운데 정렬 할때 margin:0 auto; -> 가로크기를 고정으로 해야한다는 단점. 유동적으로 하고 싶을 때의 방법 text-align: center;display: inline-block; 사용 태그가 text-align 속성이 먹히는 이유-> inline-block 속성을 가진 태그이기 때문. 즉 text-align 은 텍스트와 inline-block 속성을 가진 태그들을 정렬. * 해결ul을 감싸는 wrap { text-align: center }ul { display: inline-block; } 출처 http://kkotkkio.tistory.com/37
WEB/CSS 2016. 12. 12. 16:54

flexbox

flexbox새로운 flexbox 레이아웃 모드는 우리가 CSS로 레이아웃을 잡는 방법을 재정의할 기세입니다. 아쉽게도 flexbox 규격이 최근에 상당히 많이 바뀌었기 때문에 각 브라우저마다 다른 식으로 구현돼 있습니다. 그럼에도 어떤 것인지 알아두는 차원에서 몇 가지 예제를 공유하고자 합니다. 여기서 선보이는 예제는 현재 최신 버전의 표준을 사용하는 일부 브라우저에서만 동작합니다.flexbox와 관련된 오래된 자료가 굉장히 많습니다. flexbox에 관해 좀 더 배우고 싶다면 참고 자료가 최신 내용을 반영하고 있는지 확인하는 방법을 배울 수 있도록 이곳에서 시작하세요. 저도 최신 구문을 이용하는 상세한 글을 쓴 적이 있습니다.flexbox를 이용해서 할 수 있는 일은 아주 많습니다. 영감을 주는 차원..
WEB/CSS 2016. 12. 6. 17:49

column

칼럼다중 칼럼 텍스트를 손쉽게 만들 수 있는 CSS 프로퍼티가 새로 생겼습니다. 한번 살펴보시죠..three-column { padding: 1em; -moz-column-count: 3; -moz-column-gap: 1em; -webkit-column-count: 3; -webkit-column-gap: 1em; column-count: 3; column-gap: 1em; }나랏말ᄊᆞ미 中듀ᇰ國귁에 달아 文문字ᄍᆞᆼ와로 서르 ᄉᆞᄆᆞᆺ디 아니ᄒᆞᆯᄊᆡ 이런 젼ᄎᆞ로 어린百ᄇᆡᆨ姓셔ᇰ이 니르고져 호ᇙ 배 이셔도 ᄆᆞᄎᆞᆷ내 제 ᄠᅳ들 시러 펴디 몯ᄒᆞᇙ 노미 하니라 내 이ᄅᆞᆯ 爲윙ᄒᆞ야 어엿비 너겨 새로 스믈여듧 字ᄍᆞᆼᄅᆞᆯ ᄆᆡᇰᄀᆞ노니 사ᄅᆞᆷ마다 ᄒᆡᅇᅧ 수ᄫᅵ 니겨 날로 ᄡᅮ메 便뼌安ᅙᅡᆫ킈..
WEB/CSS 2016. 12. 6. 17:47

inline-block-2

inline-block 레이아웃레이아웃을 잡기 위해 inline-block을 사용할 수도 있습니다. 이때 몇 가지 염두에 둘 점이 있습니다.inline-block 엘리먼트는 vertical-align 프로퍼티의 영향을 받습니다(아마 이 프로퍼티는 top으로 설정하고 싶을 겁니다).각 칼럼의 너비를 설정할 필요가 있습니다.HTML의 각 칼럼 사이에 공백이 있으면 칼럼 간에 틈이 생깁니다.nav { display: inline-block; vertical-align: top; width: 25%; } .column { display: inline-block; vertical-align: top; width: 75%; }홈타코 메뉴초안 목록시간방향연락처짜잔!나랏말ᄊᆞ미 中듀ᇰ國귁에 달아 文문字ᄍᆞᆼ와로 서르 ..
WEB/CSS 2016. 12. 6. 17:45

inline-block-1

inline-block브라우저 너비를 채우고 알맞게 줄바꿈되는 박스 그리드를 만들 수 있는데, 그동안 이러한 박스 그리드를 만드는 방법은 float를 이용하는 것이었습니다. 하지만 이제 inline-block을 이용하면 만들기가 훨씬 더 쉽습니다. inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있습니다. 두 접근법의 예제를 모두 살펴봅시다.힘든 방법(float를 이용).box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }저는 지금 떠 있어요!저는 지금 떠 있어요!저는 지금 떠 있어요!저는 지금 떠 있어요!저는 지금 떠 있어요!저는 지금 떠 있어요!저는..
WEB/CSS 2016. 12. 6. 17:24

기초-미디어 쿼리

미디어 쿼리"반응형 디자인"은 사이트가 표시되는 브라우저와 디바이스에 "반응하는" 사이트를 만드는 전략입니다.미디어 쿼리는 이렇게 하는 가장 강력한 도구입니다. 아래의 퍼센트 너비를 사용하는 레이아웃을 가지고 메뉴를 사이드바에 놓기에는 브라우저 창의 크기가 너무 작을 때 메뉴가 한 칼럼에 표시되도록 만들어 봅시다.@media screen and (min-width:600px) { nav { float: left; width: 25%; } section { margin-left: 25%; } } @media screen and (max-width:599px) { nav li { display: inline; } }HomeTaco MenuDraft ListHoursDirectionsContact이제 브라우저..
WEB/Mobile 2016. 12. 6. 17:17

[IE] clearfix 핵

clearfix 핵다음은 float를 사용할 때 때때로 일어날 수 있는 이상하고 바람직하지 않은 경우입니다.img { float: right; }이런... 이 이미지는 그것을 담고 있는 엘리먼트보다 높이가 높고 떠 있어서 컨테이너 바깥으로 넘쳤습니다!이 문제를 해결하는 방법이 하나 있긴 하지만 조금 지저분합니다. 이를 clearfix 핵이라고 합니다.다음과 같은 CSS 코드를 새로 추가해 봅시다..clearfix { overflow: auto; }이제 어떻게 되는지 확인해 봅시다.훨씬 낫네요!이 기법은 근래에 나온 브라우저에만 동작합니다. IE6를 지원하고 싶다면 다음과 같은 코드를 추가해야 합니다..clearfix { overflow: auto; zoom: 1; }이 기법을 쓸 때 좀 더 주의를 기울여..
WEB/Hack*Bug 2016. 12. 6. 17:15