티스토리 뷰
STEP 1. 페이지 구성하기
가장 먼저 Visual Studio Express 2013 for Web 프로그램을 이요해서 HTML파일을 만들어 줘요
그 다음에 style 부분에 페이지를 구성을 해줘요
이렇게 <style>태그를 많이 사용한 이유는 공부를 목적으로 어떻게 스마트폰 어플이 이루어지나 좀 더 자세하게 알아보기 위해서 이렇게 사용한 것 이에요
STEP 2. 초기화 하기
페이지 구성을 해보았으니 이제 스마트폰 어플리케이션을 만들기 전에 초기화를 먼져 해볼게요
<style>태그 내부에 초기화 코드를 입력을 해주었어요
*{
margin:0; padding:0;
}
이 부분은 전체 선택자가 사용이 되었는데요
margin:0 과 padding:0 는 margin이 밭깥쪽 영역, padding이 안쪽 영역 이라고 앞에서 이야기를 하였던적이 있었어요
각 브라우저마다 고유의 기본값들이 있으니 이렇게 초기화 코드를 사용해 주는 것 입니다.
body{
font-family: 'Helvetica', sans-serif;
}
<body>태그에서의 폰트를 Helvetica로 하고 만약 Helvetica 폰트가 없을시 sans-serif로 대체해서 보여지게 하는 초기화 코드 입니다.
li{
list-style:none;
}
이 부분은 list의 스타일을 없음(none)으로 해준다는 뜻이에요
a{
text-decoration:none;
}
<a>태그에 img태그에 링크를 부여하면 링크 표시로 테두리가 생성이 됩니다.
이를 없애주기 위해서 text-decoration:none; 으로 해주는 것 입니다.
STEP 3. 헤더 구조 작성
<body>태그에 HTML 내용을 사용해서 헤더 구조를 작성을 해볼게요
*wrap : 싸다, 포장하다
보통 이렇게 가장 외곽에 만드는 <div>태그를 일반적으로 #wrap 태그 라고 부릅니다.
<div>태그 안에 <header>태그를 사용해 헤더 구조를 작성을 하였고
그 <header>태그를 #main_header 라고 지정을 해주었습니다. 이렇게 지정한 이유는 main에 있는 header 라고 해서
main_header 라고 해준 것 이에요
여기서 보시면 <input>태그는 우리가 스마트폰을 사용할때 어떤 버튼을 터치하면 숨겨졌던 내용이 화면에 보이는 경우가 있자나요?? 그걸 만들려고 이렇게 사용한 것 입니다.
p.s) 나중에 <input>태그는 삭제할거에요 ㅎㅎ
그리고 <label> 태그에서 onclick="" 부분은 iOS(아이폰 운영체제) 에서 label 태그의 버그때매 사용한 것 입니다.
안드로이드 폰이라면 상관 없지만 우리는 하이브리드 애플리키여선(HTML 로 만든 어플리케이션) 을 만들거기 때문에 안드로이드와 iOS를 꼭 고려를 해주어야해요
한번 초기화 코드에서 a태그 내용을 삭제해 볼게요
그러면 이렇게 보여집니다.
왜 a{ text-decoration:none;} 라고 한지 아시겠나요?ㅎㅎ
이제 여기다가 좀 더 이쁘게 만들어 볼게요 ㅎㅎ
STEP 4. 헤더 구조에 이미지를 사용해서 배경 그레이디언트 적용하기
한번 배경을 입혀보도록 할게요
이미지.zip위에 보이는 파일을 다운로드 하셔서 압축풀기 하셔서 header_background.png 파일을 HTML파일이 있는 경로에
가져다 두세요
이렇게!!
여기서 사용된건 아이디 선택자가 사용이 되었어요
#main_header를 height(높이)를 45px로, 배경(background)을 링크를 사용하여 header_background.png 라는 이미지 파일로 사용하겟다는 뜻이에요
그리고 결과를 보면 이렇게 보여집니다.
여기서 보면 위치 속성 공식이 사용이 되었습니다.
여기서 사용할 공식은 자손의 position 속성을 absolute 키워드로 적용하면 부모의 position 속성을 relative 키워드로 적용
을 사용할거에요 아직 자손의 absolute 키워드는 적용 안한 상태에서 결과값은 어떻게 나올지 같이보죠
이렇게 나와요
relative 키워드는 상대 위치 좌표 키워드 입니다.
그래서 이렇게 보여지는 것 입니다. 그러면 이제 위치 속성 공식을 적용을 해볼게요
여기서 특이한점이 자손 선택자가 연속으로 2번 사용이 되었어요
위치 속성 공식을 적용해서 결과를 보자구요
그러면 이렇게 보여집니다.
absolute 키워드는 절대 위치 좌표 키워드 입니다.
여기서는 인터넷 웹 페이지의 크기를 줄여서 이렇게 보여지는 것이에요~
이 사진은 스마트폰에서 본 화면
다음 포스팅에서는 스프라이트 이미지에 대해 설명을 하도록 하겠습니다!
스마트폰 어플 테스트.html
소스.txt
'허접한 프로그래밍 > HTML5+CSS3' 카테고리의 다른 글
| [스마트폰]스마트폰 레이아웃 구성 #3(토글 목록 구성) (0) | 2014.01.27 |
|---|---|
| [스마트폰]스마트폰 레이아웃 구성 #2(스프라이트 이미지) (0) | 2014.01.27 |
| [스마트폰] 스마트폰 웹 개발할때 주의사항 (0) | 2014.01.24 |
| HTML5와 CSS3를 이용한 간단한 Web페이지 만들기[컨텐츠 작성하기] -part6- (1) | 2014.01.01 |
| HTML5와 CSS3를 이용한 간단한 Web페이지 만들기[헤더 폰트변경&꾸미기] -part5- (0) | 2014.01.01 |
