전체 글 (4) 썸네일형 리스트형 [웹,앱] 반응형 웹과 미디어쿼리 PC보다 스마트폰으로 정보를 얻는게 많아진 최근에는 일반 웹보다 반응형웹을 선호하는 곳이 많아졌습니다. 그리고 PC보다 작고 모바일보다 큰 테블릿을 활용하는 경우도 많아졌습니다 반응형웹(Responsive Web)이란? : 다양한 디바이스 화면 크기에 따라 변해 사용자의 편의성에 맞춘 웹입니다. 뷰포트(ViewPort) HTML의 안에 들어가는 meta태그에 너비와 높이, 확대/축소 설정할 수 있습니다. 뷰포트 구조 width : 너비 height : 높이 initial-scale : 초기 배율 minimum-scale : 최소 축소 비율 maximum-scale : 최대 확대 비율 user-scalable : 사용자 확대와 축소 사용 유무 미디어쿼리(Media Query) 반응형 웹을 만들기 위해서는 .. [HTML] block, inline, inline-block 요소 display는 어떻게 보여질지 정해주는 속성입니다. 각 태그별로 고유의 요소가 지정되어 있습니다. css로 제어할수 있습니다. 특징 block : 새로운 라인에 생성되며 width값 100%를 가집니다. css로 width값을 지정해도 라인은 변하지 않습니다. width, height 지정 가능합니다. margin값과 padding값을 가질 수 있으며 margin:auto를 통해 정렬를 할 수 있습니다. 태그 : div dl dd hr aside h ul ol p video article canvas form ... inline : 안에 들어간 요소만큼의 넓이를 가집니다. width, height값 지정 불가능합니다. margin 좌우값과 padding값을 가지지 못합니다. 태그 : a i span s.. [HTML] Heading태그 HTML에서 가장 중요한건 담고있는 정보입니다. 정보를 목적에 따라 분류하기 위해 계층 구조로 텍스트를 담는 태그들이 있습니다. 먼저, 제목을 나타내는 헤딩태그입니다. 총 6가지로나뉘어집니다. 특징 font-weight가 기본 bold로 들어가며, 기본 크기가 다릅니다. 블럭요소입니다. 제이쿼리시 $(":header") 선택자로 모든 헤딩태그 선택이 가능힙니다. 위에서 아래로 순서대로 나열되어야 합니다. ex) h4 사용후 h3 사용하면 안됩니다. 사용 : 주로 로고나 header태그 안 사이트 명을 기입하는데 사용합니다. 한 HTML에 한 번만 사용됩니다. : 사이트의 한 페이지 혹은 큰 section 제목이 됩니다. ~ : 세부적인 section의 제목이 됩니다. HTML란? HTML5 위주로 아주 간단하게 알아보겠습니다. HTML은 웹 상에서 콘텐츠를 제작하고 사용자들에게 보여주기 위한 마크업 언어(태그를 이용하여 데이터 구조를 명시)입니다. 최신 표준인 HTML5는 기존의 HTML들과 다르게 접근성을 높여주고 개발자에게 좀 더 간편한 컨텐츠 제작이 가능하도록 만들어졌습니다. HTML5 장점 1. 시멘틱구조 가장 큰 장점입니다. 시멘틱구조는 태그 자체에 의미를 부여하여 컴퓨터가 컨텐츠 내용을 이해하기 쉽게 만들어줍니다. 다른 HTML에서는 지원해주지 않기때문에 태그에 class와 id 값을 부여해야했습니다. 물론 HTML5에서도 내용에 알맞는 네이밍은 중요하지만요. 예를 하나 들면, 태그를 사용하면 안에는 사이트 이름, 로고, 사용자 로그인등이 들어가 있다는 걸 컴퓨터가 유.. 이전 1 다음
