프로그래밍/html css 공부 6

CSS 심화 공부(17) - 미디어 쿼리(Media Queries)

미디어 쿼리(Media Queries)란?앞서 플렉스 박스나 그리드는 레이아웃을 설계하 속성이라고 설명했다. 그렇다면 그런 레이아웃을 꾸며줄 기능 또한 필요한데 그것이 바로 미디어 쿼리이다. 우리는 웹페이지를 볼때 반드시 스마트폰으로만 보는 것이 아니라 PC로도 보고 태블릿으로도 보고 심지어는 TV에 연결해서 대화면에서 보기도 한다.사람으로 치자면 키가 큰 사람, 마른 사람, 뚱뚱한 사람처럼 다양한 체형이 있는 것이다. 미디어 쿼리는 그런 다양한 체형에 적응할 수 있는 고무줄이 달린 옷이라고도 할 수 있을 것이다.미디어 쿼리의 주요 기능 반응형 웹 디자인 구현 : 다양한 화면 크기와 해상도를 가진 기기(데스크톱, 태블릿, 스마트폰 등)에서 웹 페이지가 최적의 모습으로 보이도록 스타일을 조정한다.미디어 유..

HTML 기초 공부(5) - 자주 사용하는 HTML 기본 태그

텍스트 관련 태그 ~ 제목 (Heading의 약자). 이 가장 중요한 제목이며, 숫자가 커질수록 중요도가 낮아진다. h1, h2, h3, h4, h5, h6. 제목1제목2제목6제목1제목2제목6">제목1제목2제목6단락 (Paragraph의 약자). 자동으로 단락이 나뉜다. 별도로 줄 바꿈을 해줄 필요가 없다. 가로줄이 가득 찰 경우 알아서 줄 바꿈도 해준다.1번째 단락 2번째 단락. 단락 (Paragraph의 약자). 별도로 줄 바꿈을 해줄 필요가 없다. 가로 줄이 넘쳐날 경우 자동으로 줄도 바뀌게 된다.1번째 단락 2번째 단락. 단락 (Paragraph의 약자). 별도로 줄 바꿈을 해줄 필요가 없다. 가로 줄이 넘쳐날 경우 자동으로 줄도 바뀌게 된다.">1번째 단락2번째 단락. 단락 (Paragraph의..

HTML 기초 공부(4) - HTML의 기본 구조

HTML로 만들어진 웹페이지는 특정한 구조를 가지고 있다. 우리가 웹 페이지에 마우스 오른쪽 클릭 - 검사를 누르면 다음과 같이 웹페이지의 구조가 주르륵 나오게 된다.(복잡하다!)하지만 사실 기본적인 구조는 간단하다. 모든 HTML 문서는 아래와 같은 기본 구조를 가진다. 제목 내용 문서 형식 선언. 문서가 사용하는 HTML 버전을 웹 브라우저에 알려주는 역할을 한다. HTML 버전은 웹 문서의 문법 규칙을 결정하기 때문에 해당 선언은 모든 HTML 문서에서 가장 먼저 나와야 한다.HTML은 시대 변화에 따라 버전이 업그레이드되면서 이전 버전과 현재 버전 간에 문법 차이가 발생했다.마치 중세 국어와 현대 국어의 문법이 다른 것처럼 과거 버전의 문법을 사용하면 웹 브라우저가 문서를 제대로 ..

HTML 기초 공부(3) - 시맨틱 요소

시맨틱 요소(Semantic elements)란 무엇인가?Semantic의미의, 의미론적인 을 뜻하는 단어다. 즉, 의미가 있는 요소. 요소 자체에 의미를 부여하여 콘텐츠의 의미를 명확하게 설명하는 요소를 말한다.웹사이트의 블로그를 보면 흔히들 카테고리 등을 표시해주는 사이드 바나 제목을 표시해주는 공간이 있는 형태를 자주 봤을 것이다. 그리고 대다수의 블로그가 이러한 형식을 지킨다. 블로그를 탐색하려면 어찌되었든 간에 '글'이 있는 공간이 필요하고그 글들을 찾을 '탐색기'가 있는 공간도 필요하고'제목'을 넣을 공간도 필요하기 때문이다. 그렇다면 이렇게 다수가 비슷하게 사용하는 요소들을 고정된 약속을 통해서 좀 더 쉽고 명확하게 알 수 있으면 어떨까? 그런 역할을 하는 것이 시맨틱 요소이다. 과거에는 이..

HTML 기초 공부(2) - 요소의 종류

HTML 요소는 크게 빈 요소(empty element)와 블록 요소(block element), 인라인 요소(inline element)로 나눌 수 있다. 빈 요소(empty element)블록 요소(block element)인라인 요소(inline element) 1. 빈 요소 (Empty Element) 빈 요소는 말그대로 비어있어 내용을 포함하지 않는 요소이다. 내용을 포함하지 않는, 그 자체로 온전히 존재하는 요소이기 때문에시작 태그만 있고 종료 태그를 따로 사용하지 않는다. 예를 들어 "나는 나비"같이 내용이 있다면 해당 내용이 어디서 부터 시작해서 어디서 끝나는지를 확정하기 위해서 '끝'을 나타내는 종료 태그를 반드시 포함해야한다. "나는"에서 끝날 수도 있고 "나비"에서 끝날 수도 있기 때..

HTML 기초 공부(1) - 태그, 속성, 요소

HTML 이란 무엇인가? HTML은 웹페이지 표시를 위해 개발된 마크업 언어이다. 우리가 흔히 사용하는 수많은 웹페이지들이 이런 HTML의 문법을 사용해서 만들어진다. 때문에 HTML은 웹페이지를 구성하는 가장 기본 요소라고 할 수 있다. 마크업 언어란 무엇인가?여기서 마크업 언어(Markup Language)란 태그 등을 이용하여 문서가 화면에 표시되는 형식을 나타내거나 데이터의 구조를 명기하는 컴퓨터 언어의 일종이다. 태그란 무엇인가?태그는 요즘 사람들이 흔히 사용하는 #강아지, #관광지 같이 어떠한 항목을 보충 설명하는 키워드, 낱말이라고 볼 수 있다.  예를 들어서 "나는 나비를 좋아합니다."라는 문장이 있다고 치자. 그렇다면 우리는 저것을 1개의 문장으로 취급할 수 있을 것이다. 혹은 "나, 나..