[Web] 웹 기초 (HTML/CSS)
World Wide Web
-인터넷이 연결된 사용자들이 서로의 정보를 저장하는 공간
인터넷
- 컴퓨터들끼리 서로 통신 가능하게 만들어주는 거대한 네트워크
- 각 컴퓨터는 서로에게 메세지를 보내기 위한 고유 주소 IP(ex. 192.168.2.10)를 가짐.
- IP보다 기억하기 쉬운 도메인 주소(ex. 'www.google.com')을 이용해 인터넷을 사용함.
웹 브라우저
- 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 도와주는 응용 프로그램
웹 구성요소
- HTML: 정보 또는 설계도
- CSS: 디자인 또는 스타일링
- Javascript: 기능과 효과
웹사이트 제작시 고려해야 할 사항
- 웹 표준: 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 (표준을 지켜야 검색엔진에 노출됨)
- 웹 접근성: 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
- 크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 정상적으로 작동하도록 하는 기법
HTML
- Hyper Text Markup Language
- 웹 페이지를 만들기 위한 표준 마크업 언어
- 마크업 언어란 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
HTML tag
<opening tag attribute="attributes">content</closing tag>
- 웹 페이지를 이루는 개별적인 요소(element)
- 각 태그는 속성(attribute)을 가질 수 있음
HTML 문서 기본 구조
<!DOCTYPE html>: 이 문서가 HTML5 유형의 문서임을 정의
<html>: HTML 페이지의 루트 요소. HTML 문서의 시작과 끝을 의미
<head>: HTML 페이지에 대한 메타 정보를 담는 영역 (utf-8 방식으로 인코딩)
<meta charset="UTF-8">: character setting의 약자를 나타내는 문자 코드
<title>: 브라우저의 제목
<body>: 본문. 눈에 보이는 정보를 담는 영역 (ex. 이미지/텍스트)
<!DOCTYPE html> <!-- HTML5 문서 선언 -->
<html> <!-- HTML5 문서의 시작과 끝 -->
<head> <!-- 문서와 관련된 요약 정보 정리 -->
<meta charset="UTF-8"> <!-- 문자 코드 -->
<title>웹프로그래밍</title> <!-- 웹사이트 제목 -->
</head>
<body> <!-- 웹사이트 본문 내용 -->
</body>
</html><img src="logo.png" alt="로고">: 이미지. closing tag 없음. alt값 필수
<h>: h1~h6. 제목/부제목 표현. 숫자는 정보의 중요도를 나타냄. (h1은 가장 중요한 정보를 담으므로 한 번만 사용)
<p>: paragraph. 본문 내용을 표현.
<ul>: unordered list. 우선순위가 없는 정보 담을 때 사용. (ex. 메뉴버튼)
<ol>: ordered list
semantic 태그 (구조 잡기)
브라우저와 개발자 모두에게 정확학 의미를 설명해주는 태그
A semantic Web allows data to be shared and reused across applications, enterprises, and communities.
•<header>: 소개 및 탐색에 도움을 주는 콘텐츠를 나타냄. 웹사이트의 머리글
•<nav>: navigation. 메뉴 버튼을 담는 공간 (<ul>, <li>, <a>와 함께 사용)
•<main role="main">: 본문 영역 (IE는 지원하지 않으므로 role="main" 속성 필수)
•<article>: 사이트 내의 독립적인 콘텐츠 구분. 태그 내 타이틀 <h#>태그가 무조건 한 개 이상 존재해야 함. 블로그 게시물, 뉴스 기사 등에 사용.
•<section>: 콘텐츠를 주제별 그룹으로 묶어서 구분. 장, 소개, 뉴스 항목 등에 사용
•<footer>: 웹사이트 가장 하단에 바닥글 작성할 때 사용 (사업자등록번호, 연락처 등)
•<div>: division의 약자. 임의의 공간 만들 때 사용. 블록 단위 공간 구분. 콘텐츠 블록의 스타일 지정 가능.
•<span>: 인라인 단위의 공간 구분. 텍스트 부분의 스타일 지정 가능.
•<strong>: 굵은 글씨체 (<b>와 시각적인 차이는 없지만 의미적 차이가 있음)
•<em>: 기울어진 글씨체 (<i>와 시각적인 차이는 없지만 의미적 차이가 있음) emphasize
HTML 구조를 잡을 땐 겉으로 보이는 태그 기능만 신경 쓰는 게 아닌, 태그의 의미도 신경 써야 한다.
태그의 성격
•block 요소
- y축 정렬 형태
- 줄바꿈 현상 나타남 (ex. <h#>, <header>, <div>,...)
- 공간 설정 가능 (width, height)
- 상하 배치 작업 가능
•inline 요소
- x축 정렬 형태 (한 줄에 출력)
- 공간 설정 불가능
- 상하 배치 작업 불가능
CSS
- Cascading Style Sheet
- HTML로 만들어진 뼈대를 꾸며주는 역할
- 각 요소들의 레이아웃 조정
- 애니메이션 효과
CSS 구성요소
selector { property : property value; }
CSS 적용 방법
- Inline Style: 코드 재활용 x. 잘 사용 안 함. 테스트 용도로 주로 사용.
- Internal Style: <head> 안의 <style> 태그 안에 선언하는 방식.
- External Style: <link> 태그로 불러옴. 가장 많이 사용하는 방식. 협업에 우수. 가독성이 높고 유지·보수가 쉬움.
<link rel="stylesheet" href="style.css">
CSS 선택자(Selector)
- Type Selector: (tag) 특정 태그에 스타일 적용할 때 사용.
- Id Selector: (#) 특정 요소만 스타일 적용할 때 사용. 중복 사용 불가.
- Class Selector: (.) 범용적으로 스타일 적용할 때 사용. 중복 사용 가능.
부모 자식 관계
- 부모의 css 속성을 자식이 상속받을 수 있음
- 원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기해야 함
Cascading
css 우선순위를 결정짓는 3가지 요소
- 순서: 나중에 작성한 속성값의 우선순위가 더 높음
- 디테일: 더 구체적으로 작성된 선택자의 우선순위가 더 높음
- 선택자 종류: style > id > class > type 순으로 우선순위가 높아짐
CSS 주요 속성
§ width, height
특정 공간에 대한 구체적인 영역 넓이 설정
고정값(px), 가변값(%)
§ font
•font-size: 글자 크기
•font-family: 글꼴. 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용. sans-serif는 마지막에 작성하는 default값 (모든 브라우저 지원됨)
•font-style: 글자 기울기
•font-weight: 글자 두께 (100~900, 100단위로 설정 가능)
§ border
특정 공간의 테두리 설정
•border-style: solid, dotted
•border-width: 테두리 두께 설정. px 단위
•border-color: 테두리 색 설정
border: solid 10px red;
§ background
배경 설정
•background-color: yellow;
•background-image: url(이미지 경로);
•background-repeat: repeat-x, repeat-y, no-repeat;
•background-position: top, bottom, center, left, right
background: yellow url(이미지 경로) no-repeat left;
참고자료
https://developer.mozilla.org/ko/docs/Learn/Common_questions/How_does_the_Internet_work