뭐라도 배우면 기록하자
(Front-end) 올바른 마크업을 위한 8가지 팁 본문
마크업이란 간단하게 html을 작성하여 사이트 화면을 꾸며주는 것으로 이해하겠습니다!
html을 작성할 때 보면 흔히들 하는 실수들이 있는데요. 경험이 적다보니 초창기에는 숙지하고 html을 작성하면 도움이 될 것 같습니다.
1. html에 lang속성 값을 주자
lang은 language를 의미합니다. 사이트가 한국어라면 한국어를 쓸거야 라는 것을 알려줘야겠죠?
<!DOCTYPE>
<html lang="ko">
<head></head>
html문서를 작성할 때는 맨 위에 doctype을 써줘야 하는데요. 이는 document type의 약자로 '내가 이제부터 작성할 문서는 어떤 문서야'라고 알려주는 부분입니다.
저는 html 문서를 작성할 것이기 때문에 html임을 알려주고 웹 사이트의 주된 언어가 한국어라서 ko라고 썼습니다. 주된 언어가 영어라면 en라고 쓰시면 되겠습니다.
2. img 태그에 alt 속성 값을 꼭 넣자
<img>는 예상하듯이 사진을 보여주는 태그로 여기서는 사진을 띄울거야 를 의미합니다.
<img src="http://path/image.jpg" alt="사진입니다.">
img태그는 속성값으로 src를 꼭 줘야합니다. src는 source를 의미하는 것으로 보여주고 싶은 이미지의 주소를 넣어주면 됩니다.
이미지를 구글에서 찾아서 사용하신다면 이미지 주소 복사를 통해서 붙여넣기 하시면 되고 컴퓨터에 있는 이미지를 사용하고 싶으시다면
C://\바탕화면\img.jpg 등의 경로를 입력해주면 됩니다.!
alt는 사진에 마우스를 갖다 됐을 때 조그맣게 뜨는 사진에 대한 설명입니다.
서버에 문제가 있었을 때 이미지가 로드가 안될 때 alt로 어떤 것이 있었는 지 알려줄 수 있겠죠?
3. sectioning element태그 내부엔 반드시 heading 태그를 넣자
지난 포스팅에서 자세히 나와있습니다!
4. 언제 html<img>태그를 쓰고 언제 css background-image 속성을 사용하나요?
정보로 가치가 있다면 <img>를 쓰고 그렇지 않다면 css background-image로 사용합시다~
콘텐츠가 계속 바뀌면 img를 ui 컴포넌트처럼 계속 같은 이미지를 사용한다면 background-image를 사용하는 것이 좋다고 하네요
(여기서 css는 디자인을 어떻게 하는 것이다 라는 정도만 알면 될 것 같습니다.)
예를 들면 흔히 떠오르는 사진들은 img태그로, 메뉴버튼이라던가 하는 이미지들은 background-image로 이쁘게 표현!!
5. ul, ol 안에는 li외 다른 요소는 넣지 말자
unordered list, ordered list의 약자로 말 그대로 리스트입니다. 리스트 안에 리스트 요소가 아닌 것이 오는 것 자체가 이상하죠?
6. 문단을 나누기 위한 목적으로 <br>쓰지 말자
<br>은 글 쓸 때 엔터 역할을 해주는 것인데요. 자주 쓸 경우 매우 난잡해보입니다. 줄 바꿈할 때는 그냥 <p> 여러개 쓴다는게 훨씬 간편합니다.
7. 인라인 태그 안에 블록 태그 넣는 것 아닙니다
블록 태그가 인라인 태그보다 크기 때문이죠. 블록태그란 박스형태로 화면을 차지하는 것으로 옆에 다른 블록이나 인라인 태그가 올 수 없습니다. 화면 밑으로가서 뜹니다.
인라인 태그는 블록 태그 반대로 생각하시면 됩니다. 여기까지만 들어도 블록보다 인라인이 작구나 그러면 인라인 안에 블록이 안들어가겠구나 생각이 드시죠?
8. 인라인 스타일은 절대 쓰지 말자
html과 css를 같은 파일에 쓰지 말자는 것입니다. 한 문서에는 하나의 이야기를 하는 것이 나중에 읽을 때도 편하고 수정할 때도 편하겠죠?
여러분이 필기를 할 때 한 공책에 A과목, B과목 모두 들쭉날쭉으로 해두면 시험공부할 때 어디가 A과목이고 B과목인지 보기가 어렵겠죠? 같은 이유입니다.
아무래도 제가 공부한걸 제가 보기 편하게 정리하다보니 읽으시는 분들이 잘 이해되는지 잘 모르겠네요;;
'웹프로그래밍 > 멋쟁이 사자처럼 5기' 카테고리의 다른 글
| (Front-end) CSS 레이아웃 제대로 잡기 (0) | 2017.06.05 |
|---|---|
| (Front-end) 구조가 탄탄한 HTML (0) | 2017.05.29 |
| 웹프로그래밍이란?? (0) | 2017.05.29 |
| 멋쟁이 사자처럼 5기! (0) | 2017.05.29 |
