CSS - 반응형 디자인과 미디어쿼리

반응형 웹 디자인(Responsive Web Design) 화면 크기에 따라 화면 요소들을 다르게 보여주도록 웹 페이지를 디자인하는 것을 말한다. 쉽게 말해 디바이스 종류에 따라 웹 페이지의 크기가 자동적으로 재조정되는 것이다. 하나의 HTML 소스 만으로 사용자의 특정 장치에 최적화된 환경을 제공한다. 미디어 쿼리(Media Query) CSS 모듈 중 하나로, 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해주는 기능으로 반응형 웹 디자인의 핵심이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있다. 또한, 마우스가 아닌 터치스크린을 사용하는지와 같이 장치를 탐지하는 데도 사용할 수 있다. 연산자 and, not, only, ","(쉼표)가 있다. 이 중 쉼표는 논리 or 연..

CSS - 레이아웃 만들기

레이아웃 태그 레이아웃은 특정 공간에 여러 구성 요소를 효과적으로 배치하는 것을 말한다. 레이아웃을 구성하는 태그로는 , , , , , , , 등이 있다. 보통 흐름(normal flow) 보통 흐름은 페이지 레이아웃을 전혀 제어하지 않을 경우 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 말한다. 그냥 아무 것도 지정하지 않았을 때 위에서 아래로 기본적으로 배치되는 것이다. 디스플레이 속성 CSS 상에서 페이지 레이아웃을 완성하는 주요 메소드는 display 속성에 포함된 모든 속성값 지정을 통해 이뤄진다. 디스플레이 속성은 요소가 표시되는 기본값 변경을 허용한다. 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 중 하나의 값을 가진다. display: block; (d..

CSS - 기초 배우기

CSS란? CSS (Cascading Style Sheets)는 웹 페이지를 꾸미기 위해 작성하는 코드다. HTML처럼 프로그래밍 언어가 아니고, 마크업 언어도 아닌, Style sheet 언어다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다. HTML 내 모든 p 태그의 글자를 빨갛게 하려면 아래 처럼 쓰면 된다. p { color: red; } 위 내용을 styles 디렉토리에 style.css 란 제목으로 저장을 했다면, 이 스타일이 필요한 HTML에 적용해야 한다. HTML에서 태그 안에 아래와 같이 적어야 한다 CSS의 ruleset 해부 1. 선택자(selector) 맨 앞에 있는 HTML 요소 이름으로, 위 예시에서는 p요소를 말한다. 이곳엔 HTML 태그, 클래스명, ..

HTML - 기본 SEO

검색 엔진 최적화 (SEO, Search Engine Optimization) 웹 사이트가 검색 결과 첫 페이지에 노출될 수 있도록 사이트를 개선하는 작업. 온 페이지 SEO와 오프 페이지 SEO로 나뉜다. 온 페이지 SEO vs. 오프 페이지 SEO 온 페이지 SEO: 웹 사이트 내에 있는 HTML 요소, 서버 요소, 핵심 키워드를 대상으로 한다. 오프 페이지 SEO: 웹 사이트 밖에서 활동하는 소셜 미디어, 타 웹사이트 링크 등을 말한다. 온 페이지 SEO 1. 테크니컬 SEO 웹 사이트 규모별 총 30~50여 개 HTML SEO 요소를 작성 및 점검하여 HTML 외 요소로 최근 구글 및 네이버에서 중요시하고 있는 속도, 모바일, 서버 최적화 및 네이버 Search Advisor, 구글 Search ..

HTML - 접근성

웹 접근성 웹은 모든 사람들이 평등히 이용할 수 있어야 한다. 장애인이나 노약자 등 일반적인 웹 이용에 불편을 겪는 사람들이 있는데, 이 들이 이용하는 스크린 리더기나 마우스 스틱등 보조 기기가 읽을 수 있도록 마크업을 하는 것이 웹 접근성을 좋게 하는 것이다. 웹 표준 vs. 호환성 vs. 웹 접근성 구분 목적 준수 내용 차이 웹 표준 (Web Standards) 웹의 사용성 및 접근성 보장 HTML, CSS 등에 대한 W3C 규격(문법) 준수 등 - HTML, CSS, JavaScript 등 구조와 표현, 동작 분리 권고 웹의 내용, 표현, 행동에 관련된 기술 표준 웹 호환성 (Cross Browsing) 웹 브라우저 버전, 종류와 관계 없는 웹 사이트 접근 웹 표준 준수를 통한 브라우저 호환성 확보..

HTML - 컨벤션과 모범 사례 (Conventions and Best Practices)

코딩 컨벤션이란? 컨벤션은 규칙 또는 규약이라는 뜻으로, 코딩 컨벤션은 코딩을 하는 프로그래머 사이의 일관된 규칙을 말한다. 특히 여러명이 협업하는 과정에서 이 컨벤션을 통해 코드 스타일을 유지할 수 있다. 또한, 가독성이 높아져 소스 코드를 처음 접하는 사람들도 빠르고 쉽게 이해할 수 있는데 도움이 된다. 코딩 컨벤션은 정확히 정해져 있는 것이 아니며, 팀원 간 약속을 하기 나름이므로 몇 가지 예시를 정리해보았다.. HTML 컨벤션 예시 1. 문서의 유형을 첫번째 줄에 선언한다. 2. 소문자 사용 대문자와 소문자를 혼합하면 깔끔해 보이지 않는다. 프로그래밍에서는 일반적으로 소문자를 사용한다. 소문자 사용이 더 쉽고 간편하다. 3. 모든 HTML 요소 닫기 닫는 태그가 없는 요소 이외에는 모두 태그를 닫..

HTML - 폼과 유효성 검사

폼(Form) HTML에서 이라는 요소는 사용자에게서 얻은 정보를 모으기 위해 사용된다. 어떤 웹 사이트에서 로그인을 할 때 입력하는 아이디와 비밀번호 입력 칸이 form을 이루고 있는 것이다. 이런 데이터들이 서버에 보내지기 전에, 데이터가 서버 측이 원하는 포맷과 일치하는지 유효성 검사가 필요하다. 폼(Form)의 요소들 (참고) 1. 요소 2. action 요소 입력 받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다. 해당 주소로 전달된 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다. 3. method 요소 action에 명시된 위치로 데이터를 서버에 전달되는 방식을 결정하는 요소로 GET, POST 등이 있다. 유효성 검사 1. required inp..

HTML - Semantic한 HTML 작성

시맨틱 요소 (Semantic Elements) semantic [sɪˈmæntɪk] Adjective 언어 의미의, 의미론적인 수 년 전에 어느 IT 회사에서 PM팀으로 일을 했을 때 semantic 이라는 단어가 많이 보였었는데, 개발 관련 지식이 없던 당시에는 이 단어를 온전히 이해하지 못했던 것 같다. 시맨틱한 HTML이라고 하면, 태그의 이름만 보고도 태그가 HTML 안에서 어떤 역할을 수행하는지 개발자와 사용자 모두 쉽게 알 수 있도록 작성한 HTML을 말한다. 이는 HTML의 가독성을 높이며, 유지보수를 높일뿐만 아니라, 웹 접근성을 높이는데 크게 기여하여 웹 페이지에 일반적인 방법으로 접근할 수 없는 사용자(시각장애인 등)가 원활히 소통할 수 있게 한다. 또한, 모바일과 같은 디바이스와의 ..

HTML - 기초 배우기

HTML이란? HTML (Hyper Text Markup Language)은 웹 페이지를 위한 마크업 언어다. 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML의 역사 HTML은 1989년 팀 버너스리(Tim Berners-Lee) 라는 영국의 컴퓨터 과학자가 만들었다. 점차 HTML의 중요성이 커지면서 HTML을 더욱 체계적으로 발전시키기 위해 1996년부터 W3C(월드 와이드 웹 컨소시엄)에서 HTML 규격을 유지해 왔으며, 이는 2000년 부터 국제 표준이 되었다. 최근 버전은 5.2로 2017년에 출시되었..

인터넷 - 호스팅은 무엇일까요?

호스팅이란? 호스팅은 정보의 집약체인 서버의 전체 혹은 일부를 이용할 수 있도록 임대해 주는 서비스를 말한다. 서버를 관리하기 위해서는 24시간 내내 안정적으로 전기를 공급해야 하고, 빠르고 안정적인 인터넷 회선을 사용해야 하며, 철저한 보안 시스템을 갖추고 있어야 한다. 따라서 개인이 서버를 관리하기보다 전문 업체의 호스팅 서비스를 사용하는 것이 일반적이다. 호스팅의 종류 호스팅은 크게 3가지로 나뉜다. 1. 웹 호스팅 웹 호스팅은 여러 고객이 하나의 서버를 함께 사용하는 형태다. 다세대가 거주하는 빌라(웹서버)에 방 한 칸(홈페이지가 들어갈 공간)을 임대하여 사용하는 격이다. 장점: 하나의 서버를 나누어 쓰기 때문에 저렴하게 이용할 수 있고, 호스팅 업체의 통합 관리를 받기에 편리하다. 단점: 단독 ..