이 강좌는 월간 w.e.b. HOW TO 2011년 02호에 게재되어 있습니다.언제부터인가 우리의 웹은 이미지에 의존하는 웹페이지, 또한 당연하다는 듯이 각종 오브젝트 타입의 컨텐츠를 무분별하게 사용하여 무거운 웹사이트를 구축했었고 또, 대부분의 웹사이트들은 웹표준이나 웹접근성 보다는 화려한 그래픽으로 특정브라우저에 맞춰진 Content Design으로 처리해 왔다.그러나 기존 포토샵 같은 이미지편집 Tool이나 플래시 같은 모션그래픽 툴로 밖에 할 수 없었던 효과들이 CSS3를 사용함으로써 많은 부분 코드 몇 줄 만으로 가능하게 되었다.같은 조건의 서비스라면 더 가벼워지고 빠른 로딩속도는 덤으로 가질 수 있게 된 건 물론이다.이번 연재에서는 기본적이지만 매우 중요한 선택자의 종류와 몇 가지 CSS3 주..
CSS: 선택자(Selector) 이해 Nextree Mar 31, 2014 2 Comments 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우저에 알맞게 보이는 것’이 중요하기 때문입니다. 그래서 웹 표준에서는 구조(Constructure)와 표현(Presentation)과 행위(Behavior)를 각각 분리해서 개발하기를 권유합니다. 이렇게 하면, 각 사용자는 구조화 된 마크업에 따라 다양한 디자인을 제공받을 수 있기 때문입니다. 뿐만 아니라 사이트의 로딩속도도 빨라지고 개발과 유지보수 또한 쉬워집니다.구조 : 웹 콘텐츠에 의미를 부여하고 구조..
word-wrap 줄바꿈 속성 - normal. break-word word-break 줄바꿈 속성 - break-all, keep-all 줄바꿈 속성의 word-wrap 는 비아시어 언어의 줄바꿈을 제어 word-break 는 아시아 언어 (CJK : Chinese, Japanese, Korea 의 약자) 비아시아 언도 모두 줄바꿈 제어 줄바꿈이 가능한 요소 height 나 width 를 지닌 인라인 요소 블록요소 이거나 절대적 위치의 (absolutely positioned) 블록요소 word-wrap 의 속성값 normal : 기본값으로 글자가 길어도 끊어지지 않고 한줄에 계속 표시 break-word : 강제로 끊어서 줄바꿈 함. word-break 의 속성값 normal : 기본값, 일반적인 규..
▶ 부트스트랩 “ 부트스트랩은 반응형이며, 모바일 우선인 웹 프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크 입니다. ” 부트스트랩 은 프론트엔드 웹 개발을 더 빠르고 쉽게 만들어줍니다. 모든 기술수준의 사용자들, 모든 형태의 기기들, 모든 크기의 프로젝트들을 위해 만들어졌습니다.프레임워크 란 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는것을 말합니다.결국 부트스트랩은 반응형 HTML, CSS 등을 재사용이 가능하게끔 클래스 형태로 이미 만들어져 제공하는 것 입니다. ▶ 부트스트랩을 사용하는 이유 ▷ 부트스트랩은 HTML, CSS 코드가 이미 만들어져 있어 사용자가 사용하기에 있어 편리합니다.HTML 및 css에 ..
border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래; css div { width:300px; height:300px; float:left; margin:50px; background:lightblue; } div:nth-child(1) { border-radius: 0px 10px 20px 40px; } div:nth-child(2) { border-radius: 150px; } ● 넓이 값이 300px 이므로 각 모서리의 곡률을 150px 만큼 설정하면 정사각형에서 정원으로 변형 시킬 수 있다.
text-shadow : 텍스트에 그리자 추가하기 text-shadow: 가로축거리 세로축거리 퍼짐도 색상; css span { font:bold 150px/1.6 verdana; color:lightblue; margin:50px; } span:nth-child(1) { text-shadow: 5px 5px 5px #333; } span:nth-child(2) { text-shadow: -5px -5px 10px #333; } box-shadow : 블록 요소에 그리자 추가하기 box-shadow: 가로축거리 세로축거리 퍼짐도 색상; css div { width:300px; height:300px; float:left; margin:50px; background:lightgreen; } div:nth-..
nth-child 선택자는 반복되는 태그에서 원하는 순서의 태그를 선택하여 주는것 Value - 1 Value - 2 Value - 3 Value - 4 cssul li { font-size:20px; font-weight:bold; }ul li:nth-child(1) { color:red; }ul li:nth-child(2) { color:blue; }ul li:nth-child(3) { color:green; }ul li:nth-child(4) { color:pink; }