오늘부터 위코드 1일차가 시작되었다.
나만의 3달 목표는 헬스 겸 코딩 실력 향상이다.
사전 스타디 기간 한 달간 HTML, CSS, Javascript를 배워왔지만 오늘부로 위코드에서 공부하면서 처음부터 다시 나를 되돌아보는 기간을 가졌다.
아래의 내용들은 그동안 잘 몰랐거나 헷갈렸던 부분을 작성함.
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>meta name="viewpoint" content="width=device-width"는 디바이스의 가로크기가 웹 페이지의 가로크기와 같다는 뜻이다.
즉, 모바일에서 볼 때 웹페이지가 예쁘게 잘 보인다.
추가하지 않으면 모바일에서 볼 때 축소되게 보일 수 있음.
CSS
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}글꼴이 없으면 오른쪽으로 순서대로 쓴다. 즉 Georgia를 지원해주지 않으면 "Times New Roman"순으로! serif는 모든 브라우저에서 지원함.
.js-description {
text-indent: 50px;
}text-indent 속성은 들여쓰기가 가능하게 한다. 음수 양수가 다 가능.
<blockquote class="js-description">blockquote는 인용 문구를 넣을 때 사용.
<p>스페이스 넣는 예제</p>안에 여백의 공간을 만들고 싶을때는 를 사용(띄어쓰기 한 칸의 효과, 여러 개를 사용하면 그만큼 여백이 생긴다.)
p {
text-decoration: underline;
}밑줄을 치는 태그지만 개발자들은 border-bottom을 더 선호한다. 내 마음대로 커스터마이징이 가능하기 때문!
* {
box-sizing: border-box;
}*selector는 모든태그에 적용
박스의 너비와 높이를 지정할 때 조금만 잘못해도 레이아웃이 무너지는 경우가 있다. 그럴 때는 위 속성을 사용함.
거의 모든 웹사이트에서 활용하는 속성이다.
img 태그 vs div내부에 background-image
위 글을 이해하기 위해서는 semantic web과 semantic tag를 이해하여야 함.
semantic web은 의미론적인 웹, 단순한 정보를 담는 게 아닌 메타 데이터를 부여하여 관련성을 만들어 거대한 데이터베이스를 만든다.
semantic tag란 의미를 명확하게 설명하는 태그
ex) header, nav, aside, article, section, footer등 내용은 모르지만 태그만 보아도 뭘 설명하는지 아는 태그를 뜻한다.
img 태그는 사용시 alt 속성 사용 가능 alt 속성은 이미지를 못 불러올시 대신 쓰일 수도 있지만 메타 정보도 되며 검색엔진은 alt 속성을 인식하게 됨.
하지만 background-image는 단순히 웹 페이지를 꾸미는 장식을 담당.
참고로 프린트도 안됨.
-> img 태그가 의미론적인 웹을 만드는 데 더 적합하다고 판단됨.
