Development Stash
front end, back end, ETC...
-
[HTML5 & CSS3] CSS Semantic Tag
Semantic 태그 HTML4 는 화면 구성을 대부분 <div> 로 하였고, 이 태그들을 구분하기위해 id 속성을 이용했다. 그러다보니 홈페이지 구조를 분석하고 이해하기가 어려웠고, HTML5 에서는 이러한 문제를 해결하기 위해 표준화된 시맨틱 태그 를 사용해 태그만 보고도 웹 문서의 구조를 분석하기 용이하게 만들었다. 레이아웃을 만들 때 사용하는 주요 태그를 미리 약속해두어 태그만...
-
[HTML5 & CSS3] CSS 박스 모델
블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 전부 차지하는 요소로, 다른 요소와 한 줄에 존재할 수 없다. ex) <div>, <p> 등 인라인 레벨 요소 줄을 차지하지 않는 요소로, 표시되는 콘텐츠만큼의 영역만 차지하여 나머지 공간에는 다른 요소가 올 수 있다. ex) <img>, <strong>, <span> 등 박스 모델 CSS 에서...
-
[HTML5 & CSS3] CSS 스타일
background 속성 .color-background { background: rgb(100, 100, 0) } .img-background { background: url('/assets/img/css_style/road_image.jpg') repeat fixed right bottom; } 배경 관련 속성에는 여러가지가 있는데 그중 background 속성을 사용하면 한번에 모든 속성을 지정할 수 있다. 다른 속성에 지정할 수 있는 속성값을 그냥 background 속성에 넣으면 된다. 관련 속성과 속성값은 다음과 같다. background-color:...
-
[HTML5 & CSS3] CSS 텍스트 스타일
1. 글꼴 관련 스타일 속성 1. font-family - 폰트 설정 body { font-family:'맑은 고딕', "돋움", 궁서; } 웹 문서에서 사용할 글꼴을 지정하는 속성이다. <body> 태그를 비롯해 <p>, <h> 태그처럼 텍스트를 사용하는 요소들에 적용할 수 있다. font-family 속성은 상속이 가능하기 때문에 <body> 에 적용시키면 문서 전체에 적용된다. 지정한 글꼴이 없을 경우를...
-
[HTML5 & CSS3] CSS 와 cascading
1. Cascading Style Sheet(CSS) 1. Cascadnig 이란? 위에서 아래로 흐른다는 뜻으로, CSS 의 경우 스타일 시트에서 selector 에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 ‘위에서 아래로 흐르며 적용되는’ 방법을 사용하는 것을 말한다. 스타일 시트에서 캐스캐이딩은 가장 기본적인 개념이기 때문에 보통 스타일 시트라고 하면 Cascading Style Sheet(CSS) 를 의미한다....