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. 웹 호스팅 웹 호스팅은 여러 고객이 하나의 서버를 함께 사용하는 형태다. 다세대가 거주하는 빌라(웹서버)에 방 한 칸(홈페이지가 들어갈 공간)을 임대하여 사용하는 격이다. 장점: 하나의 서버를 나누어 쓰기 때문에 저렴하게 이용할 수 있고, 호스팅 업체의 통합 관리를 받기에 편리하다. 단점: 단독 ..

인터넷 - 도메인 네임은 무엇일까요?

도메인 네임(Domain Name) 도메인 네임은 알파벳과 숫자, '-'(dash, hiphen)로 구성되어 있다. 숫자와 점으로만 이루어진 IP 대신 이러한 도메인 네임을 사용함으로써 인터넷 상의 컴퓨터 주소를 쉽게 기억할 수 있다. www.google.co.kr 도메인 네임은 위와 같이 점(dot)으로 구분하여 계층적으로 이루어져 있다. 각 단계는 오른쪽에서부터 1단계, 2단계, 3단계 도메인이라고 불리며, 오른쪽에서 왼쪽으로 갈수록 도메인의 범위가 작아진다. 위 예의 경우 1단계는 국가 도메인(kr), 2단계는 도메인의 성격, 3단계는 도메인 네임을 등록하는 사람이 원하는 이름을 등록한다. 맨 앞의 www는 도메인 네임에 포함되지 않는 '호스트 명'이다. 도메인을 보유하고 있으면 해당 도메인을 활용..

인터넷 - DNS와 작동 원리

DNS란? 도메인 네임 시스템(Domain Name System)의 약자로, 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대의 변환을 수행할 수 있도록 하기 위해 개발된 시스템이다. 쉽게 말해, 우리가 네이버에 접속하기 위해서는 웹 브라우저에서 주소 입력창에 www.naver.com을 입력하는데, 이 도메인 주소를 해당하는 IP 주소로 변환하는 시스템인 것이다. IP 주소란? 네트워킹이 가능한 장비를 식별하는 주소를 가리킨다. IP주소는 네트워크 주소와 호스트 주소를 조합한 주소 체계를 가지고 있다. 네트워크 주소 : IP 기기가 속해 있는 네트워크를 구분 호스트 주소 : 네트워크 안에 있는 IP 기기를 구분 IPv4 IPv4 주소는 (.)마침표로 구분되며 4개의 8비트 필드로 구분된 ..