Section #1 안드로이드의 웹 브라우저는 모두 같은 브라우저인가? No. 아닙니다. 안드로이드 OS(운영체제)마다 버전 같아도 브라우저는 다룰 수 있습니다. 쉽게 말해서 어떤 스마트폰에는 지원하는 브라우저가 있는 반면 어떤 스마트폰에는 지원하지 않는 브라우저도 있습니다. Section #2 그러면 이제 대표적인 스마트폰 웹 페이지를 만들때 주의해야할 점에 대해 말씀드리겠습니다. 1. overflow 속성을 사용해 스크롤(scroll)을 넣을 수 없습니다.- 스마트폰 웹 브라우저는 대부분 overflow 속성에 scroll을 적용할 수 없습니다.(물론 가능한 스마트폰 웹 브라우저도 존재합니다.) 2. 상태 선택자를 사용할때 주의를 해야합니다.- 스마트폰은 터치를 사용하므로 화면을 누르는 순간 바로 클..
이번에는 전 시간까지 만든 헤더를 폰트도 변경하고 nav를 수평으로 정렬하는 시간을 가져볼까해요 ㅎㅎ 일단 폰트먼저 바꿔보도록 할게요 http://www.google.com/fonts/여기 들어가셔서 원하는 폰트를 선택하세요 ㅎㅎ 여기 나와있는 소스를 복사해서 붙여넣기 해주세요 여기다가 붙여넣기!!! 그리고 밑에 보이는 소스를 복사해 주세요 그런 다음에 바꾸고싶은 폰트 위치에다가 아래처럼 붙여넣기 해주세요 ㅎㅎ 저는 타이틀의 폰트를 바꿀거니까 이렇게 해줄게요 ㅎㅎ 그러면 이렇게 보입니다. ㅎㅎ 이제 옆에 navigation영역을 좀 더 이쁘게 바꾸어보도록 할게요 해석해 보자면"main_gnb라는 id를 가진 HTML태그의 자손인 ul태그에서 내용물이 넘쳐나면 숨김표시(hidden)으로 해주고main_gn..
전 시간에 HTML로 기본적인 내용을 짯으니이번에는 CSS를 사용해서 좀 더 이쁘기 설정을 해보도록 할게요 위에 보이는 사진이 CSS 적용하기 전 입니다. 이제 적용을 해보도록 할게요 ㅎㅎ 중앙 정렬하는 내용은 암기해주세요! 여기서 /* 절대 좌표*/이 부분 있쬬? 지금은 아무런 변화가 없을거에요 그치만 좀있다가 nav들의 위치를 절대 적으로 위치를 지정해 주기 위해서 사용하는 것 입니다. 여기서 잠깐 개념 위치 속성에 대해 개념정리좀 하고 넘어가도록 할게요 절대적 좌표와 상대적 좌표가 무슨 뜻 인가요?절대적 좌표는 x, y 좌표를 설정하여 절대적 위치를 지정해 주는 것 입니다.쉽게 말해서 요소의 위치를 개발자가 마음대로 정해줄 수 있어요 상대적 좌표는 요소를 입력한 순서대로 상대적으로 위치를 지정해 주..
들어 가기 전에 모두 NAVER에 들어가셔서 오른쪽 마우스 클릭후 요소검사를 클릭해 주시기 바랍니다.[저는 Chrome 브라우저 사용중] 좀..잘 안보이죠?밑에 사진을 분리해서 다시 보여드릴게요 이 헤더부분이 위 사진에서 보여지는 부분 입니다. 오늘 이번 포스팅에서 저도 이 헤더 구조를 작성해보도록 할거에요 ㅎ 먼저 header영역의 내용을 입력하기 전에 영역 분리를 먼저 합니다. hgroup -> 제목 영역 그룹nav -> 고정 페이지 이제 내용을 입력해보도록 할게요 여기서 list앞에 어떠한 모양 표시도 안붙은 이유는style태그에서 초기화를 body 태그에 list-style:none; 으로 해주었기 때문에 아무런 표시가 안나타는 것 입니다. 그리고 a태그의 은 어떠한 내용을 클릭히 원래는 # 공간..
전 시간에 이어서 할게요전 시간에는 레이아웃을 행 영역으로 분리를 하고 그 분리한 행 영역의 내부 영역을 또 분리 해 주었어요 이번에는 음..그냥 따라와요ㅋㅋㅋ 먼저 각 부분을 쪼개어서 설명을 할거에요 WHY?? 공부하는 학생이니까 ㅋㅋㅋ 실제로는 이렇게 style태그를 여러개 만들어서 쪼개지 않는다고 합니다. 그러면 따라와요 이렇게 페이지를 스타일 태그를 이용하여 먼저 쪼개어 줍니다.이제 본격적으로 들어가기 전에 웹 페이지를 초기화를 가장 먼저 해준다음에 들어갈 거에요 예전에 포스팅했던 CSS3 기본 선택자 -part1-에서 언급한것처럼 HTML태그들은 브라우저에서 설정된 기본 스타일 값을 가지고 있습니다.그래서! 이런 기본 스타일 값을 없애주어야 하기 때문에 초기화를 가장 먼저 하는 것 입니다. [해..