목록Wep Programming/CSS3 (5)
heenam
부트 스트랩이란? 웹 사이트나 웹 응용 프로그램을 작성하기 위해 사용하는 무료 소프트 웨어 도구 모음이다. 부트 스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론튼엔드 프레임워크로, 입력창, 버튼, 네비게이션, 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS기반의 디자인 템플릿으로 제공하여 추가적인 자바스크립트 확장들도 포함한 다. 타이포그래피 및 각종 메뉴를 포함한 웹 페이지에서 사용되는 거의 모든 요소를 내장하고 있기 때문에 부트스트랩의 CSS와 자바스크립트, 관련 이미지만 있으면 대부분의 웹 페이지를 손쉽게 제작할 수 있도록 지원한다. 모듈화 되어 있 으며 LESS의 다양한 요소를 구현하고 있다. 웹 브라우저의 종 류 및 크기에 따라 디자인 요소가 자동으로 정렬되는 그리드 레이아웃을..
웹 사이트 작성 요구사항 분석 + 웹 사이트의 목표 + 예산 + 일정 설계 + 웹 사이트의 기능 나열 + 웹 사이트에서 필요한 웹 페이지 나열 + 웹 사이트의 메뉴 나열 + 내비게이션 구조 결정- 사이트 안에서 페이지가 어떻게 연결되는지를 결정한다. HTML 문서 작성 설계된 내용에 맞추어서 웹 페이지를 작성하고 테스트 한다. HTML요소를 이용해 설계해서 나열된 기능과 메뉴를 구현하면 된다. 여기서는 웹 페이지의 콘텐츠만을 제작하는 것이고 스타일에 대해서는 신경 쓰지 않는다. CSS 스타일 작성 CSS 파일을 작성하여 웹 페이지에 스타일을 추가한다. 구체적으로 웹 페이지의 전체적인 레이아웃을 잡고 HTML 요소의 크기, 위치, 색상, 폰트, 이미지 등을 지정한다.
레이아웃의 기초 블록 요소와 인라인 요소 HTML요소는 블록 요소이거나 인라인 요소 중의 하나에 속한다. 일반적인 문서의 흐름에서 HTML요소는 블록 요소냐 인라인 요소냐에 따라서 다음과 같이 화면에 표시된다. + 블록 요소: 화면의 한 줄을 전부 차지한다. + 인라인 요소: 한 줄에 차례대로 배치된다. 현재 줄에서 필요한 만큼의 너비만을 차지한다. 블록 요소 블록 요소는 브라우저의 한 줄을 모두 차지한다. 예를 들어 , , , 등이 있다. 즉 한줄에 하나씩 배치 된다. 인라인 요소 인라인 요소는 정상적으로는 한 줄 안에 차례대로 배치된다. 예를 들어 , , , 등이 있다. 블록 요소와 인라인 요소의 혼합 일반적이 웹 페이지에는 블록 요소와 인라인 요소가 혼합되어 있다. 이 경우에는 블록 요소가 나타날 ..
박스 모델 css 개요 css3는 W3C에서 한창 개발중인 규격이다. W3C사이트에서 보면 CSS3 규격 중에서 완료된 것도 있고 아직 한창 토의 중인 규격도 있음을 알 수 있다. 박스 모델 웹 브라우저는 각 HTML요소를 사각형으로 간주하고 웹 페이지 위에 그리게 된다. 요소를 배치할 때도 사각형으로 간주한다. 이런 식으로 요소를 박스 형태로 그리는 것을 박스 모델 이라고 부른다. CSS는 각 박스의 특징(배치, 색상, 경계 등)을 결정하게 된다. CSS 박스 모델은 기본적으로 HTML 요소를 감싸는 가상적인 박스를 생각하는 것이다. 각 박스는 마진, 경계, 패딩을 가진다. 콘텐츠: 박스의 내용물이다. 텍스트와 이미지가 나타나는 부분이다. 패딩: 콘텐츠 주위의 영역이다. 패딩은 투명하다. 경계: 패딩과..
CSS의 개념 우리는 앞에서 HTML 요소를 이용해서 HTML 문서를 작성해 보았다. 하지만 무엇인가 빠져있다는 것을 느꼈을 것이다. 문서의 구조는 HTML로 정의할 수 있었지만 문서가 화면에 표시되는 스타일은 주정할 수 없었다. 즉 색상, 폰트, 크기와 같은 스타일은 지정하지 않았다. 스타일이 지정되지 않으면 아주 밋밋한 웹 페이지가 된다. 우리는 CSS를 이용해서 문서의 스타일을 지정한다. 즉 HTML 요소의 크기, 폰트, 색상 등을 결정한다. CSS의 필요성 웹 페이지의 스타일을 HTML 태그로 적어주는 것보다 CSS로 분리하는 것이 어떤 장점이 있는지를 고찰해 보자. 많은 페이지로 이루어진 사이트의 텍스트를 폰트를 바꾸려면 HTML 페이지 안에 스타일 정보를 태그한 것은 일일이 모든 페이지의 내용..