[HTML/CSS] - 1

최명수·2023년 1월 9일

htmlcss

Part 1. HTML & CSS 개요

📖HTML, CSS 그리고 JS

HTML
HTML은 웹의 구조를 만드는 데에 사용하는 언어 --> 뼈대라고 생각

CSS
CSS는 HTML이 실제 표시되는 방법을 지정하여 구조를 꾸며서 웹의 시각적인 표현을 담당하는 언어 --> HTML로 만든 구조를 예쁘게 꾸며 화면에 표시

JS
JS는 HTML,CSS로 만든 화면의 웹 페이지를 동적으로 꾸며주는 역할을 함, 웹의 동적 처리를 담당

📖웹 표준과 접근성

웹표준
웹에서 사용되는 표준 기술이나 규칙을 의미하며 W3C의 권고안에서 나온 기술들이 여기에 해당

표준화 제정 단계
1. Working Draft(WD): 초안
2. Candidate Recommendation(CR):후보권고안
3. Proposed Recommendation(PR):제안권고안
4. W3C Recommendation (REC):권고안 --> 여기까지와야 표준이 된다.

크로스 브라우징
구글 크롬, MS 엣지, 네이버 웨일과 같은 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술과 방법 인터넷 익스플로어의 경우 웹 표준화가 잘 안되어 있어서 크로스 브라우징 하는 것이 힘들 수도 있음

웹 접근성
웹 접근성이란 정상적인 웹 콘텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 웹컨텐츠를 제작하는 방법

웹 콘텐츠 제작기법

인식의 용이성
운용의 용이성
이해의 용이성
견고성

정보 통신 보조기기
장애인이나 몸이 불편한 분들이 정보 통신 보조기기를 통해 웹 컨텐츠에 접근할 수 있음

웹 접근성 품질인증 마크
장애인 및 고령자가 웹 사이트 이용에 불편이 없도록 웹 접근성 표준지침을 준수한 우수 사이트에 대해 웹 접근성 수준을 인정하고 이를 상징하는 품질 마크를 부여하는 인증제도

Part 2. HTML & CSS / HTML

📖 기본문법
기본 형태
태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가진다

<h1> 안녕하세요 </h1>
<p> 안녕하세요 반갑습니다.</p>

위와 같은 태그는 열리고 닫히는 구조를 가지고 있으며 이를 한 쌍으로 취급하고 무조건 마지막에 닫을 때 /(슬래쉬)를 붙여야 한다.

📖속성(Attributes)과 값(Values)
태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다.

<img src="./cat.jpg" alt="고양이"/>

img 태그는 이미지를 삽입할 때 사용하여 src와 alt가 필수고 src는 이미지의 경로 위치, alt는 이미지가 나타나지 않을 시 대체 텍스트를 의미한다. img의 경우 닫히는 태그가 따로 존재하지 않고 마지막에 이렇게 슬래쉬를 닫아서 끝내며 이러한 것을 빈 태그라고 한다.

📖부모 요소(Parent Element), 자식요소 (Child Element)
태그 A가 태그 B의 콘텐츠로 사용되면, 태그 B는 태그 A의 부모요소, 태그 A는 태그 B의 자식요소라고 함

<div class="fruits">
  <h1>과일 목록</h1>
  <ul>
     <li>사과</li>
     <li>바나나</li>
     <li>포도</li>
     <li>파인애플</li>
  <ul>
</div>

div는 h1,ul의 부모요소이며 ul은 li의 부모요소이다. 이와 반대로 h1, ul은 div의 자식요소이고 2단계이상차이나면 각각 조상요소, 후손요소라고 함.

Part3. HTML & CSS / CSS

📖기본 문법과 선택자의 역할

div {
   color: blue;
   font-size: 30px;
}

선택자 {
   속성: 값;
   속성: 값;
}

위와 같은 형식이며 선택자는 html에 스타일(CSS)를 적용하기 위해 HTML의 특정한 요소를 선택하는 사인이다.

📖 속성(Properties)과 값(Value)
속성과 값은 크기나 색과 같은 스타일을 지정할 때 사용한다.

div{
    color: red;
    font-size: 20px;
    width: 400px;
    height: 100px;

ex)
html

<div>
  <h1>안녕하세요</h1>
  <p>안녕하세요 반갑습니다</p>
</div>

css

div {
  font-size: 30px;
  margin: 20px;
  padding: 30px;
  background: white;
}

h1 {
  color : red;
}
p {
  color: blue;
}

Part 4. HTML/개요,요소-주요범위&메타데이터

📖블록(Block),인라인(Inline)
블록 요소

특징

사용가능한 최대 가로 너비를 사용한다.

크기를 지정할 수 있다.

(width: 100%; height: 0; 로시작)

수직으로 쌓임

margin, padding 위, 아래, 좌, 우 사용 가능하다

레이아웃

인라인 요소

sapn
img

특징

필요한 만큼의 너비를 사용한다.
크기를 지정할 수 없다.
(width: 0; height: 0;로 시작)
수평으로 쌓이고 위에서 아래로 작성하게 되면 자동적으로 띄어쓰기가 적용됨. 줄바꾸지 않고 수평으로 코드 작성하면 띄어쓰기 적용은 안됨
margin, padding, 위, 아래는 사용할 수 없다 (padding 위, 아래는 시각적으로 된 것처럼 보이지만 실제 래이아웃(거리두는 것)에는 적용이 안되어서 안된다고 보면 됨)
TEXT

span{
    display: block;
}

다음과 같이 display 속성의 값을 변경하여 span과 같은 인라인 요소들을 block화 시킬 수 있음.

📖 주요범위&메타데이터 - HTML, HEAD, BODY, TITLE
HTML
검색엔진은 HTML태그 안에 있는 것들을 읽고(html밖에 적으면 안된다는 의미) html안의 속성 값 중에는 lang이라는 속성이 있는데 언어 종류와 관련한 속성임
!DOCTYPE html의 경우 문서의 타입이 무엇인지 알려주는 것

<!DOCTYPE html>
<html lang = "ko">
</html>

HEAD
문서의 정보를 표시(html 문서의 제목, 기타정보, 스타일 직접입력, 스타일 외부에서 가져와서 연결)

<head>
  <meta charset="UTF-8>
  <title>문서 제목</title>
  <meta name="author" content="hustile-dev">
  <meta name="description" content="hustle-dev의 사이트 입니다!">
  <link rel="stylesheet" href="./main.css">
  <base href="./css/"> //기준이 되는 상대경로 루트를 만들어줌
</head>

BODY
문서의 구조를 표시

Part5.HTML/요소 - 컨텐츠 구분 & 문자 컨텐츠

📖BODY 내 구조 개념

변경후

의미에 맞는 요소들을 사용하는 것이 중요하다.

📖 콘텐츠 구분 - HEADER
Header 요소는 소개나 탐색을 돕는것의 그룹을 나타낸다
header 요소는 후손이 될 수 없고 오로지 전역 속성만을 포함함

<address>
  <header>
  </header>
</address>

잘못된 예시

📖콘첸츠 구분 - FOOTER
Footer는 가장 가까운 구획화 콘텐츠나 구획화 루트의 푸터를 나타내고 일반적으로 작성자 구획, 저작권 데이터, 관련된 문서의 링크에 대한 정보를 포함함

footer 요소 또한 후손이 될 수 없음.

📖콘텐츠 구분 - H1~H6
H1~H6요소는 6단계의 문서 제목을 구현함
마찬가지로 전역 속성만 포함함

사용자 에이전트가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표를 만드는 등의 작업을 수행할 수 있음
글씨크기를 위해 사용하는 것은 비추천(css font-size사용)
h1 h2 h3 이렇게 순서대로 사용하는 것을 추천
페이지 당 하나의 h1 사용

📖 콘텐츠 구분 - MAIN
main 태그는 해당 문서의 body 요소의 주 콘텐츠(main content)를 정의할 때 사용한다.
main 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 된다.

인터넷 익스플로러 호환 안됨
한 문서에 하나의 main 요소만 포함 가능

📖 콘텐츠 구분 - ARTICLE
해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용함.

일반적으로 h1~h6를 포함하여 식별
작성일자와 시간을 time detetime 속성으로 작성

📖 콘텐츠 구분 - SECTION
HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용함.

일반적으로 h1~h6 를 포함하여 식별
div와 달리 의미없이 사용하진 않고 영역이나 제목을 포함하여 사용

📖 콘텐츠 구분 - ASIDE
문서의 별도 콘텐츠를 설정(보통 광고나 기타 링크 등의 사이드 바 설정)

📖 콘텐츠 구분 - NAV
다른 페이지 링크를 제공하는 영역을 설정
nav 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있음.

📖 콘텐츠 구분 - ADDRESS
body, article, footer 등에서 연락처 정보를 제공하기 위해 포함해서 사용
주소 -> 이메일, 전화번호, 주소

📖 콘텐츠 구분 - DIV
div 태그는 HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용.

본질적으로 아무것도 나타내지 않은 콘텐츠 영역을 설정 -> 막사용

📖 문자 콘텐츠 - OL, UL, LI
각 항목 li의 정렬된 목록 ol이나 정렬되지 않은 목록 ul을 설정

ol과 ul은 자식으로 li만 포함 가능
li는 단독으로 사용 할 수 없으며, ol이나 ul에 자식으로 포함되어야 함
정렬된 목록 ol의 항목 순서는 중요도를 의미할 수 있음

📖 문자 컨텐츠 - DL, DT, DO
용어(dt)와 정의(dd) 쌍들의 영역(dl)을 설정
dl 태그는 용어(term)와 그에 대한 설명(description)을 리스트 형식으로 정의할 때 사용. dl 요소는 용어(term)나 이름(name)을 나타내는 dt 요소와 해당 용어에 대한 설명을 나타내는 dd 요소로 구성됨.

dl은 dd, dt 만을 포함해야 함.
키(key)/값(value) 형태를 표시할 때 유용.
ex)

<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

위에서 언급한 모든 요소들은 display: block; 이다

Part 6.HTML/요소 - 인라인 텍스트 & 수정

📖 인라인 텍스트 - A
다른 페이지, 같은 페이지 위치(#,해시태그), 파일, 이메일주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼 링크를 설정

href로 경로를 설정하고, target으로 링크가 보여지는 위치를 지정

<a href="url" target="_blank">
<a href="#title">    <!-- id 값을 경로로 지정할 수도 있음 -->

<a target="_blank">  <!-- 새 탭에 띄움 -->
<a target="_self">   <!-- 현재 창에 띄움(기본값) -->

📖 인라인 텍스트 - SPAN
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
div와 유사하나 div는 블록요소이다 span은 대표적 인라인 태그로 한줄에 여러개 작성 가능

Part 7. HTML/ 요소 - 멀티미디어 & 내장 콘텐츠 & 스크립트

📖 멀티미디어 - IMG 1
이미지를 삽입하는 요소

<img />

필수 속성 : src, alt
추가 속성 : width, height, srcset, sizes가 있으며, width와 height 중 하나만 수정하여도 둘다 크기가 변함

📖 멀티미디어 - IMG 2 - srcset, sizes 속성

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"     
  sizes="(max-width: 500px) 444px,
         (max-width: 800px) 777px,
         1222px"
  src="images/heropy.png"
  alt="HEROPY" />

srcset 속성은 쉼표로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하고, sizes속성은 쉼표로 구분된 미디어조건(선택적)과 그에 따라 최적화 되어 출력될 이미지 크기를 지정함.

srcset
브라우저에 제시할 이미지들과 그 이미지들의 원본 크기를 지정하며 사용할 이미지를 사이즈별로 2장 이상 준비하여 srcset 속성에 작성한다. 단 이미지의 크기로 px이 아닌 w 혹은 x 단위를 입력해야 하며, 작은 크기 이미지로부터 순서대로 입력해야 한다.

📖 멀티미디어 -IMG 3 -W,X 단위

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"
  src="images/heropy.png"
  alt="HEROPY" />

뷰포트 너비가 400px이하 일땐 heropy_small.png가 사용되고 401~700px 일땐 medium, 그 이상일땐 large가 사용됨

📖 멀티미디어 - IMG 4 - sizes 속성
sizes
sizes는 미디어조건과 그 조건에 해당하는 이미지의 '최적화 출력 크기'를 지정하낟.

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"
  sizes="(min-width: 1000px) 700px"
  src="images/heropy.png"
  alt="HEROPY" />