11월 11일 학습일지
오늘 총 학습시간: 5시간
Step 2. 화면에 첫 글자 띄우기
이번 목표
흰 화면에 사이트 제목(크고 굵게)과 소개 문장(보통 크기)이 나타나게 만들기
step1 코드에서 <body>와 </body>사이 빈 줄 아래 두 줄을 넣는다.
<h1> … </h1>
1.무엇인가? : 페이지에서 가장 중요한 제목. 보통 한페이지에 하나씩 쓴다.
2.왜 이런 이름? : Heading(표제,머리글) +1등급 이다. h1부터 h6까지 6단계가 있고,
숫자가 작을수록 상위제목이다. 책으로 치면 h1은 책 제목, h2는 장 제목, h3는 절 제목이다.
3.브라우저에서는? 크고 굵은 글씨로 보이고, 위아래에 여백이 생기면서 혼자 한줄을 차지한다.
->지난번 공부한 블록 태그이다.
<여기서 질문1 >-------------------------------------------------------------------------
Q1. title과 h1은 뭐가 다른거지?
title h1
위치 <head> 안 <body> 안
보이는곳 브라우저 탭 페이지 본문
역할 문서의 이름표 화면 속 간판
</여기서 질문1>-------------------------------------------------------------------------
<p>....</p>
1.무엇인가: 하나의 문단
2.왜 이런 이름? Paragraph(문단)의 첫 글자.
3.브라우저에서는? 보통 크기의 글씨로 보인다. 이것도 블록태그라서 h1아래 새줄에서 시작하고,
위 아래에 약간의 역백이 생긴다. 글이 길면 창 너비에 맞춰 자동으로 줄이 넘어간다.
*새개념 : 기본 스타일
CSS를 하나도 쓰지 않았는데 h1은 크고 굵게 보인다. 브라우저가 태그마다 기본 모양을
미리 정해두었기 떄문이다. 개발자들은 이걸 "브라우저 기본스타일(User agent stylesheet)" 라고 부른다.
CSS단계에서는 이 기본 모양을 우리가 워하는 모양으로 덮어쓴다.
Step 3. 첫 번째 체육관 등장시키기
이번 목표
소개 문장 아래에 지역 이름과 체육관 이름, 그리고 두 줄로 나뉜 주소·확인일이 나타나게 만들기
<h2>...</h2>
1.무엇인가? : 2등급 제목. 여기서는 지역구분에 썼다.
2.왜 이런이름? : Heading2, 책으로 치면 "장(chapter)"제목이다.
3.브라우저에서는? h1보다 작고 p보다 큰 굵은 글씨
<h3>...</h3>
1.무엇인가? : 3등급 제목. 여기서는 체육관 이름
2.왜 이런이름? : Heading3, 장 안의 "절" 제목이다.
3.브라우저에서는? : h2보다 한단계 작은 굵은 글씨
*h1에서 바로 h3으로 등급을 건너뛰지 않는것이 원칙이다.
목차에서 1장 다음 바로 1.1.1절이 나오면 이상하지않은가.
<br>
1.무엇인가? : 문단 안에서 강제로 줄을 바꾸는 태그이다.
2.왜 이런이름? : break<끊다> 의 줄임말. 감쌀 내용이 없어서 meta 처럼 닫는 태그가 없다.
3.브라우저에서는? : <br>이 있는 자리에서 다음줄로 넘어간다.
Q2. 여기서 br대신 p를 두번쓰면 안되나?
<p>주소</p><p>확인일</p>
이러면 별개의 두문단이 되면서 두 줄 사이에 여백이 생긴다.
개발자들은 화면 모양보다 의미를 먼저 보고 태그를 고른다.
Step 4. 시설 정보를 점(•) 목록으로 만들기
이번 목표
주소 아래에 "시설 정보" 소제목과 함께 입장료·샤워실·코트·준비물이 점(•) 목록으로 나타나고,
그중 꼭 챙겨야 할 내용은 굵게 보이게 만들기
<h4>시설 정보</h4>
1.무엇인가: 4등급 제목으로, 체육관 h3 안의 세부 항목 소제목이다.
2.왜 이런이름? : Heading4. 목차로는 h1 > h2 > h3 > h4 순서이고, 등급을 건너뛰지 않았다.
3.브라우저에서는? 본문 글씨와 비슷한 크기의 굵은 글씨로 보인다.
등급이 낮을수록 작아진다.
<ul>...</ul>
1.무엇인가: 목록 전체를 감싸는 상자
2.왜 이런이름? Unordered List , 즉 순서가 없는 목록이다.
입장료와 샤워실 중 무엇이 먼저 오든 의미가 같으니까!
3.브라우저에서는? 상자 테두리 자체는 보이지않지만, 안의 항목들을 오른쪽으로 들여쓰고 앞에 (•)을 붙여준다.
<li> … </li>
1.무엇인가: 목록 안의 항목 하나. 반드시 ul 또는 ol 안에 들어가야 한다.
2.왜 이런이름? : List Item (목록 항목)이다.
3.브라우저에서는? 항목마다 앞에 •이 붙고, 블록 태그라서 항목마다 줄이 바뀐다.
*새개념 : 부모,자식이 정해진 태그
li는 아무 데나 쓸 수 없고 반드시 ul 안에 있어야 한다.
*순서가 있는 목록은?
ul대신 ol(Ordered List) 을 쓰면 점 대신 1,2,3 번호가 붙습니다.
시설 정보처럼 순서가 상관없으면 ul을 쓰고, 시간순처럼 순서가 중요하면 ol을 쓴다.
<strong> … </strong>
무엇인가? : 중요하다는 표시
왜 이런 이름? "강한,강조된" 이라는 뜻
브라우저에서는? : 굵은 글씨로 보인더. 인라인 태그라서 줄을 바꾸지 않고, 문장 중간의 일부만 굵어진다.
Step 5. 요일별 운영시간 표 만들기
이번 목표
주소 바로 아래에 "운영시간" 소제목과 요일 / 시간 / 운영방식 3칸짜리 표가 나타나게 만들기
<table>...</table>
1.무엇인가 : 표 전체를 감싸는 상자
2.왜 이런 이름? 영어로 "표"이다.
3.브라우저에서는? 안의 칸들을 줄과 열을 맞춰 정렬해 준다. 다만 기본상태에서는 테두리 선이 없어서
표처럼 안보이고 글자만 줄 맞춰 놓인 모습이다.
<tr>...</tr>
1.무엇인가: 표의 가로 한 줄
2.왜 이런 이름? : Table Row(표의 행)
3.브라우저에서는? 줄 자체는 보이지 않고, 안의 칸들을 한 줄에 나란히 놓는다.
tr이 4개라서 표가 4줄이다.
<th> … </th>
1.무엇인가: 제목 칸이다. 아래 칸들이 무슨 내용인지 알려준다.
2.왜 이런 이름? : Table Header(표의 머리글)
3.브라우저에서는? 굵은 글씨에 가운데 정렬로 보인다. 브라우저 기본 스타일 덕분이다.
<td> … </td>
1.무엇인가 : 내용 칸 . 실제 데이터가 들어간다.
2.왜 이런 이름? : Table Data(표의 데이터)
3.브라우저에서는? 보통 글씨에 왼쪽 정렬로 보인다.
*th와 td는 모양만 다른가?
아니다. 화면 읽기 프로그램은 th를 보고 "요일 열, 평일", 시간 열, 06:00~22:00" 처럼
제목과 함께 읽어준다. td만 쓰고 css로 굵게 만들면 겉모양은 같아도 이 기능이 사라진다.
모양이 아니라 의미로 태그를 고르는 원칙이 여기서도 적용된다.
colspan="2"
1.무엇인가 : 칸 하나가 옆 칸 2개만큼 넓게 차지하게 하는 속성
2.왜 이런 이름? coulmn(열) + span (걸치다,펼치다) = "열을 가로질러 걸친다"
엑셀의 셀병합 과 같다.
3.브라우저에서는?: 일요일 줄에서 "휴관"이 시간 칸과 운영 방식 칸 자리를 합친 넓은 칸에 보인다.
칸 개수 맞추기
다른 줄은 칸이 3개인데 일요일 줄은 td가 2개뿐입니다.
colspan="2"가 칸 2개 몫을 하니까 1 + 2 = 3으로 맞다.
칸 수가 안 맞으면 표가 삐뚤어지니, 표를 수정할 때는 ”이 줄에 칸이 몇 개인가"를 꼭 세어 보아야 한다.
Step 6. 누르면 전화가 걸리고 지도가 열리는 링크 만들기
시설 정보 아래에 "전화 걸기 · 카카오맵에서 보기" 링크가 나타나게 만들기.
누르면 실제로 전화 앱이 열리거나 팩토스타디움의 카카오맵 장소 페이지가 새 탭에서 열립니다.
<a> … </a>
무엇인가 : 누르면 다른 곳으로 이동하는 링크이다 .
왜 이런 이름? Anchor(닺)의 첫 글자 이다 .
배를 닺으로 특정 위치에 고정하듯, 다른 문서의
특정 위치에 연결한다는 뜻이다.
href= "..."
1.무엇인가: 링크가 어디로 갈지 적는 속성이다. a 태그는 이게 없으면 그냥 글자이다.
2.왜 이런 이름? : Hypertext REFerence(하이퍼텍스트 참조), 즉 "연결할 주소" 이다.
3.브라우저에서는? 보이지않지만, 링크에 마우스를 올리면 브라우저 왼쪽 아래 구석에 이주소가 표시된다.
*새 개념 : 주소의 앞부분이 "어떤 앱으로 열지"를 정한다.
href 시작 부분 누르면 이번 코드에서
https:// 웹 페이지로 이동 카카오맵 장소 페이지
tel: 전화 앱이 열리며 번호 입력됨 팩토스타디움 번호 031-975-6600
malito: 메일 앱이 열림 이번엔 안씀
이 앞부분을 개발자들은 스킴(scheme)또는 프로토콜 이라고 부른다.
*카카오맵 주소 읽어보기
https://place.map.kakao.com/976173837
└─── 어디로 ─────┘└ 어떤 장소 ┘
place.map.kakao.com은 카카오맵의 장소 상세 페이지가 모인 곳
뒤의 976173837은 카카오가 팩토스타디움에 붙여 둔 고유 번호
주민등록번호처럼 장솜다 하나씩 다르고 겹치지 않는다. 이런 번호를 ID(아이디,식별자) 라고 부른다.
고양팩토스타디움경기 고양시 일산동구 고봉로770번길 26-36place.map.kakao.comtarget="_blank"
1.무엇인가 : 링크를 새 탭에서 열라는 속성이다.
2. 왜 이런 이름? : target은 "어느 창에서 열지(목표물)" _blank는 "빈 새 창"이다.
3.브라우저에서는? : "카카오맵에서 보기"를 누르면 새 탭이 열리고, 우리 페이지는 원래 탭에 그대로 남는다.
지도에서 가는길을 확인하다가 체육관 정보로 쉽게 돌아올 수 있다.
링크를 <p>로 감싼 이유
a는 인라인이라 혼자 두면 앞뒤 내용과 한 줄로 붙어버릴 수 있다.
블록인 p로 감싸면 "링크 두개짜리 한줄" 이 독립된 줄로 깔끔하게 놓인다.
가운데의 · 는 그냥 글자이고, 두 링크를 구분하는 장식이다.
Step 7. 페이지 안에 지도 끼워 넣기
이번 목표
링크 아래에 "위치" 소제목과 함께 팩토스타디움 지도가 페이지 안에서 바로 보이게 만들기.
링크를 누르지 않아도 지도를 확대하고 움직일 수 있게 한다.
*이번에는 속성이 많아서 속성마다 줄을 나눠 썼다.
한줄에 다 써도 같은 동작이지만 , 이렇게 쓰면 속성 하나하나가 눈에 잘 들어온다.
속성이 3~4개를 넘으면 개발자들도 이렇게 줄을 나누곤 한다.
<iframe>...</iframe>
1.무엇인가: 우리 페이지 안에 다른 웹페이지를 통째로 끼워 넣는 창. 우리 페이지에 구멍을 뚫고 그 안에
카카오맵 페이지를 보여주는 셈이다.
2.왜 이런 이름? : Inline Frame, 즉 "글 흐름 안에 들어가는 액자" 이다. 액자 안에 다른 그림(페이지)를
걸어두는 모습이다.
3.브라우저에서는? : 사각형 창 안에 움직이는 구글맵 지도가 보인다.
액자 안은 구글맵 페이지라서 그 안에서 드래그하고 확대하는 동작은 구글맵이 처리한다.
우리 코드는 액자만 걸어준것이다.
*링크와 차이점
링크는 누르면 그 페이지로 이동, iframe은 우리 페이지 안에서 보여줌
src="..."
1.무엇인가: 액자 안에 어떤 페이지를 넣을지 적는 속성
2.왜 이런 이름? : source(출처,원본,소스)의 줄임말 .
step6의 href가 "어디로 갈지" 라면, src는 "어디서 가져올지" 이다.
3.브라우저에서는? 보이지 않지만, 이 주소가 틀리면 액자 안이 비거나 오류 화면이 뜬다.
https://maps.google.com/maps?q=경기+고양시+일산동구+고봉로770번길+26-36&z=16&output=embed
q: query, 검색할 내용. 체육관 이름 대신 주소를 넣었다. 이름보다 주소가 더 정확하게 찾아지기 때문이다.
z: zoom(확대) 단계입니다. 숫자가 클수록 더 가까이 보입니다.
output=embed: "끼워 넣기(embed)용 화면으로 줘"라는 요청입니다. 이게 없으면 액자 안에 지도가 안 나온다.
width="600" height="400"
1.무엇인가: 액자의 가로,세로 크기
2. 왜 이런 이름? 너비(width),높이(height) 그대로. 단위를 안쓰면 픽셀(px), 즉 화면의 점 개수로 계산한다.
3.브라우저에서는? 가로600점,세로400점짜리 창이 된다. 크기를 안정하면 기본값(300x150)이라 지도가 작게 나온다.
*지금은 크기를 고정했지만, 휴대폰처럼 화면이 좁으면 지도가 화면 밖으로 넘칠 수 있다.
이건 CSS 단계에서 "화면 너비에 맞추기"로 해결한다.
title="..."
1.무엇인가 : 이 액자가 무엇을 보여주는지 설명하는 이름표.
2.왜 이런 이름? : step1의 <title>태그와 같은 단어지만, 이번엔 태그가 아니라 "속성"이다
같은 이름이라도 태그와 속성은 별개다.
3.브라우저에서는?: 화면에는 안보인다 . 화면 읽기 프로그램이 "고양 팩토스타디움 위치 지도"
라고 읽어 준다. 이게 없으면 그냥 "프레임"이라고만 읽혀서 무슨 내용인지 알 수 없다.
step5의 th처럼 눈에 안 보여도 의미를 전달하는 코드다.
loading="lazy"
1. 무엇인가: 지도를 필요할 때 불러오라는 속성이다.
2.왜 이런 이름? : lazy는 "게으른"이라는 뜻. 미리 서두르지 않고, 사용자가 스크롤해서 지도 근처에 왔을때 부른다.
3.브라우저에서는? : 겉모습은 같다. 대신 페이지가 처음 열릴 때 더 빨라진다. 지금은 체육관 하나라 차이를 못느끼지만,
체육관이 몇십개로 많아지면서 지도 몇십개가 붙으면 차이가 커진다.
오늘 잘한점
만들고 싶은 페이지 설정을 잘한거같다.
아이템적으로도 좋고, 공부하기에도 좋았다.
코딩을 직접 하면서 눈으로 변화를 보니까 확실히 머리에 말 들어온다.
오늘 못한점
오늘도 역시 후반에 집중력 저하.
총평
공부 잘 될때 더 집중하자.
여기에 파일을 드롭하세요
