개발일지📝_02

ᴶᴬᴱᵞᴼᴼᴺ·2021년 3월 24일

Web basics

웹 프로그래밍 기초

목록 보기

2/10

💡 이번 주에는 지난 시간에 했던 실습내용을 복습하면서 루트 디렉토리와 절대경로 & 상대경로에 대해 알아보았으며, HTML5의 기본용어와 태그에 대해 배웠다.

새로 배운 내용

루트 디렉토리 : 컴퓨터 파일 시스템에서 계층 구조의 첫번째 또는 최상위 디렉토리를 말함
절대경로 & 상대경로
✔ 절대경로 : 루트 디렉토리를 기준으로 어떠한 파일이 갖는 고유한 경로
✔ 상대경로 : 현재 위치한 디렉토리를 기준으로 어떠한 파일이 갖는 상대적인 경로
-> 상대경로 설정하는 법
./ : 현재위치
../ : 현재위치의 상위 디렉토리
코드 검사하기
▪ 버그(bug) : 프로그램이 원하지 않는 방향으로 동작하는 것
▪ 디버그(debug) : 버그를 잡는 행위
✔디버깅하는 방법
-해결하고자 하는 문제 파악하기
-오류는 문법적 문제로 발생하는 경우가 많으므로 오타는 없는지, 정해진 코드를 작성하였는지 확인하기
-VS code의 터미널을 열고 문제 확인해볼것code의 터미널을 열고 문제 확인하기
-웹 페이지에서 개발자도구를 열고(F12키) 문제 확인하기
-오류메시지 복사하여 구글 or 스택오버플로우에 검색해보기

🔗HTML5 기본용어
✔ 요소 : HTML페이지를 구성하는 각 부분을 말함 말함
내용을 가질 수 있는 요소
🌼내용을 가질 수 있는 요소
: 시작태그(여는 태그)와 뒤에 붙이는 태그인 끝 태그(닫는 태그) 형태로 생성

  <p>Hello! How are you?!</p>

🌼내용을 가질 수 없는 요소
: 닫는 태그가 없는 형태로 생성, 이미지 요소를 위한 태그인 <img>와 줄바꿈 태그 <br>등이 해당됨이 해당됨
-> BUT, 내용을 가질 수 있는 태그의 시작 태그인지, 내용을 가질 수 없는 태그 전체를 나타내는지 구분이 어렵기 때문에 내용을 가질 수 없는 태그라는 점을 명확하게 표기하고자 XHTML 표기법을 사용
-> XHTML 표기법 : 요소 이름을 적고 한 번 띄고 슬래시를 그어주면 됨
ex) <img>는 <img />로, <br>은 <br />로 작성

✔ 속성 : 태그에 추가 정보를 부여할 때 사용함
ex) <img>태그에는 src속성을 필수로 부여하고, 접근성을 위해 alt속성을 넣어주는 것이 좋음

<img src="./image/cherry blossom.png" alt="벚꽃" />

✔ 주석 : 프로그램 실행에 영향을 미치지 않고 설명용으로 사용하는 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <!-- title 태그 -->
    <title>SPRING</title>
</head>
<body>
    <!-- h2 태그 -->
    <h2>벚꽃 보고싶다🌸</h2>
    <!-- 사진첨부 -->
    <img src = "https://images.unsplash.com/photo-1554987178-f2af44d4afee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt = "벚꽃" />
</html>

🔗HTML5 문서 구조화

블록 형식 태그
: 블록 형식으로 공간 분할
<div>
<h1>~<h6>
<p>
💻개발자도구 이용하여 알아보기
인라인 형식 태그
: 인라인 형식으로 공간 분할
<span>
<a>
<input>
💻개발자도구 이용하여 알아보기
제목과 본문 태그
<h1>~<h6> : 제목 생성
<p> : 본문 문단 생성
<br> : 줄바꿈
<hr> : 수평 줄 삽입
앵커 태그
<a> : 하이퍼링크 생성
글자 모양 태그
<b> : 굵은 글자
<i> : 기울어진 글자
<small> : 작은 글자
<sub> : 아래 첨자
<sup> : 위 첨자
<ins> : 밑줄 글자
<del> : 취소선 있는 글자

과제

👀 개발자도구 이용하여 프로젝트 홈페이지 뜯어보기!

이케아 홈페이지 개발자도구로 여기저기 살펴보기

👉 div태그를 사용하여 공간을 블록 형식으로 분할함
(이외에도 div태그 많이 사용됨)

👉span태그를 사용하여 공간을 인라인 형식으로 분할함
(이외에도 span태그 많이 사용됨)

👉h2태그 사용하여 글자크기 조정하고 div태그와 동일하게 블록형식으로 공간 분할

👉이 홈페이지에 있는 모든 사진들은 img태그를 사용하여 이미지 추가함

👉p태그 사용하여 본문 문단 생성

👉앵커태그 사용하여 하이퍼링크 생성

🔽이 외에 다양한 태그가 사용됨!

참고할 만한 내용

HTML elements reference

느낀점

저번 주에 실습과제를 할때는 HTML5에 대한 기본적인 지식이 없는 상태에서 구글링하면서 해나갔다. 하지만 이번 주에는 HTML5에 대한 기초적인 부분들을 배우고 나서 과제를 해보니 이론으로 배운 HTML5태그들이 실제 홈페이지에서 어떻게 쓰이는지 직접 보고 알아갈 수 있어서 좋았다:-)
클론코딩을 하게 될 홈페이지를 개발자도구로 뜯어보면서 정말 다양하고 많은 태그들이 사용됐구나라는 생각을 하며 놀라기도 하고 신기하기도 했다. 한편으론 이번 프로젝트를 잘 해낼 수 있을까하는 걱정이 되었다.
하지만 앞으로의 수업을 열심히 듣고 실습도 꾸준히 한다면 프로젝트하는데 어려움이 없을 거라는 긍정적인 마인드를 가지기로 했다!

ᴶᴬᴱᵞᴼᴼᴺ

이전 포스트

개발일지📝_01

다음 포스트

개발일지📝_02

웹 프로그래밍 기초

새로 배운 내용

과제

👀 개발자도구 이용하여 프로젝트 홈페이지 뜯어보기!

참고할 만한 내용

느낀점

개발일지📝_01

개발일지📝_03

0개의 댓글

관련 채용 정보