▶ 상대경로
index.html
├ img
│ └ logo.png
├ css
│ ├ reset.css
│ └ style.css
└ scripts
└ script.js
- 현재 열린 파일을 기준으로 상대적인 경로를 의미.
- index.html 기준으로 style.css 파일은 'css/style.css'.
- style.css 기준으로 logo.png 파일은 '../img/logo.png'.
- ' ../ ' 상위 디렉토리(폴더)로 이동.
▶ 요소(Elements) 분석
▷ 태그(Tag) : <>
어떤 표시를 하기 위해 붙인 꼬리표. 웹 문서에 정보를 정의해주는 형식.
<p class = "web-tech">웹의 대표적인 기술 HTML/CSS/JS</p>
<!--
<p> : 여는 태그(Opening tag)
class : 속성명(Attribute)
"web-tech" : 속성값(Attribute value)
웹의 대표적인 기술 ~ : 콘텐츠(Content)
</p> : 닫는 태그(Closing tag)
-->HTML의 경우, 오류를 알려주지 않고 웹브라우저가 임의로 결과를 보여준다. 의도하지 않은 화면이 되는 오류를 막기 위해 마크업 검사 습관을 길러야 한다. → [Markup Validation Service] 사이트를 이용하자.
▶ 주석
현재의 나, 미래의 나, 다른 개발자를 위해 설명하는 글을 적어두자. 중요한 기밀사항을 적는 건 X.
주석 사용은 최소한으로! 되도록 시맨틱 태그 사용, 직관적인 클래스 명으로 코드만 봐도 이해되게 작성하자.
▷ 태그의 시작과 끝에 사용
중간 닫는 태그를 빠트렸을 때 체크하기가 용이하다. 컴포넌트 분할에도 좋음.
<!-- start -->
<!-- //end -->
<!-- header -->
<header>
...생략...
</header>
<!-- //header -->
<!-- footer-->
<footer>
...생략...
</footer>
<!-- //footer -->▷ 협업 시
<!-- 메뉴 토글 class="active" 유/무로 제어 -->
<nav class="active">
...생략...
</nav>
<!-- #2022.02.20 4:00 업데이트 -->▷ 임시 처리
<!-- 신청기간이 아니여서 임시 주석처리
<a href="#">신청페이지 바로가기</a>
-->▶ HTML 구조
▷ !DOCTYPE html
- 작성 시 완전 표준 모드(full standards mode; 이하 표준 모드)로 렌더링.
- 제거하면 쿼크 모드(quirks mode : 하위 호환성 모드)로 렌더링 되는데, 이런 경우 브라우저마다 다르게 동작할 가능성이 있어 반드시 최상단에 선언한다.
▷ html
- lang 속성으로 해당 페이지의 주 언어 설정 가능. 이는 검색엔진, 스크린리더, 번역 기능 제공 등에 영향을 미친다.
▷ head
- 검색엔진을 위한 다양한 정보가 담긴다. (메타데이터)
▷ title
- 브라우저의 제목 표시줄, 페이지 탭에 보이는 문서 제목 (텍스트만 포함해야 함. 특수문자 X)
- 약 60자를 넘지 않아야 한다. 반복되는 텍스트보다 해당 페이지 내용이 나오도록 한다.
▶ CSS(Cascading Style Sheets) : 연속화(Cascading) 폭포(cascade)
- CSS는 폭포처럼 위에서 아래로 떨어지는 모양으로 스타일을 적용한다.
- 한번 작성한 CSS는 여러 HTML에 재사용해 반복 작업을 줄일 수 있다.
header { color: royalblue; }
/*
header : 선택자(Selctor)
color : 속성(Property)
royalblue : 속성값(Property value)
{ color: royalblue; } : 선언블록/선언
*/▷ 아이디 선택자(#)
- HTML 페이지 내에서 id는 유일해야 한다.
- 한 번만 사용되어 재사용성이 떨어진다.
▷ 클래스 선택자(.)
- id와 다르게 한 페이지에 여러 개가 존재할 수 있다. 재사용성 높음.
* id, class는 숫자로 시작할 수 없다.
▶ 단위
- 절대 길이 단위 : px (cm, mm, in, pc, pt ...)
- 상대 길이 단위 : %, vw, vh, vmin, vmax, em, rem
▷ px : Pixel(Picture + Element)
- 디바이스 화면에서 이미지를 표현하는 가장 작은 단위. 고정된 값이라 직관적으로 쉽게 사용할 수 있다.
- 다양한 디바이스가 생겨나며 픽셀의 밀도도 다양해짐. px만 사용할 경우 디바이스에 따라 위치가 달라지거나 다른 크기로 보이는 문제가 발생한다. → 반응형 웹, 접근성, 사용자 경험을 위해 상대단위의 개념을 이해하고 사용할 수 있어야 함.
▷ %
- 부모 요소를 기준으로 하는 백분율 단위.
▷ vw, vh
- 뷰포트(화면) 넓이(w), 높이(h)를 기준으로 하는 백분율 단위.
- 1vw = 화면의 1%
▷ em
- 부모요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위.
▷ rem : root em
- 최상위 요소의 글자 크기를 기준으로 하는 배수 단위.
- 의 기본 폰트 사이즈는 16px이다.
- rem단위로 폰트 사이즈를 설정하면 기준 폰트 사이즈 수정으로 크기의 일괄 변경이 가능해 웹사이트 폰트 사이즈의 유지 보수가 용이해진다.
▶ 텍스트 관련 태그들
▷ h1, h2, h3, h4, h5, h6 : Heading
- 웹 페이지가 하나의 책이라면 제목 태그는 목차와 같다. 목차를 통해 책의 전체 내용을 예상할 수 있듯이, 제목 태그는 검색엔진 사이트·스크린리더 사용자에게 중요한 정보가 된다.
- h1 태그는 한 페이지에 한 번만 사용해야 한다.
- 스타일 목적으로 h 태그를 사용하는 건 금물. h1 ~ h6 순서대로 작성하자.
- section 태그 안에서는 h1 ~ h6의 크기가 같다. (여기선 사용할 일이 없기 때문에) heading은 head 태그 안에서 사용하자.
▷ br : break
- 텍스트 안에서 줄 바꿈 처리를 해준다. 2번 연속해서 사용하지 않음.
- 여백이 필요하다면 CSS를 사용, 화면의 줄 바꿈 처리를 원한다면 br 대신 span 태그·CSS display 속성·wbr 태그를 사용하도록 한다.
▷ code
- 짧은 코드 조각을 나타낼 때 사용한다.
- 스크린 리더로 읽을 때, 페이지 번역을 사용할 때 코드 부분이라는 것을 알려 내용이 이상하게 해석되는 것을 방지할 수 있다.
▷ strong
- 중대하거나 긴급한 콘텐츠를 나타낼 때 사용한다. 기본적으로 굵은 글꼴이 적용된다.
- 스크린 리더를 사용할 때 strong 사이에 있는 문자는 거센 억양으로 발음된다.
- 굵은 글씨를 처리하는데 b 태그도 쓰였지만, 지금은 사용하지 않는 것을 권장한다.
▷ address
- 해당 콘텐츠에 대한 연락처 정보. address에 포함된 내용은 검색 엔진에서 활용된다.
생각 더하기
+ 오래 가는 건 열정이 넘치는 사람보다 꾸준한 사람. 무리하지 말고 유지 가능한 페이스를 찾자.
+ 그대로 받아들이지 말자. 웹 페이지 디자인, 코드를 보며 어떤 부분이 중요한지 생각하는 습관을 기르자.
+ 웹 접근성 공부에 추천하는 페이지 : 시청
