[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 5회차 미션

티스토리 뷰

[패캠] 프론트엔드 패키지/HTML

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 5회차 미션

큐킴 2020. 10. 23. 15:26

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 5일차입니다!

오늘은 n달에 1~2번 있는 배가 아픈 날이어서 갤럭시탭을 켜고 엎드려서 따뜻하게 강의를 들었습니다.

어제 학습한 것에서 이어지는 내용이라 편안하게 들을 수 있었어요.

또한, 아직 HTML 첫걸음 단계이기 때문에 깊고 어려운 개념까지 들어가지는 않았습니다.

오늘은 <HEAD> 태그와 <BODY> 태그에 대하여 좀더 자세히 학습하고, 관련 예제를 실습해보았습니다.

(06. HEAD 태그 (TITLE, META, LINK, STYLE, SCRIPT) / 07. BODY 태그 (div, image), 웹 표준 검사 / 08. 예제)

<HEAD> 태그

◾ HTML 문서의 정보를 구성함

◾ title: 웹 페이지의 제목 ➡ 브라우저 탭에서 이름으로 표시됨

◾ meta: 웹 페이지의 정보를 검색엔진이나 브라우저에 제공, 빈 태그

◽ <meta charset="UTF-8">: 문자를 인코딩하는 방식으로 UTF-8을 사용한다는 뜻

◽ <meta name="author" name="QQyukim">: 이 웹페이지 문서의 작성자가 QQyukim이라는 뜻

◽ <meta> 태그에서 사용할 수 있는 속성은 정해져 있음: charset, name => 값이 정해져 있음 / content => 값이 정해져 있지 않아 내용을 입력해줘야 함

◾ link: 외부 HTML, CSS 파일을 불러오거나 icon 파일을 불러올 수 있음, 빈 태그

◽ <link rel="stylesheet" href="css/style.css">: rel(필수 속성)=relationship, href=hypertext reference

◾ style: HTML 파일 안에 CSS를 작성할 수 있게 함

◾ script: JavaScript 파일을 불러오거나 HTML 파일 안에 스크립트문을 작성할 수 있게 함

<BODY> 태그

◾ HTML 문서의 구조를 나타냄

◾ <div> 태그: 명확한 의미를 가지지 않아 보통 막 쓰는 태그, 문서의 부분이나 섹션을 정의

◾ <img> 태그: HTML에 이미지를 삽입하는 태그

◽ <img src="./qq.png" alt="큐큐">: 모두 필수 속성 ➡ src=이미지 경로 지정, alt=alternate, 이미지의 대체 텍스트

웹 표준 검사하기

◾ https://validator.w3.org/#validate_by_upload 에 접속하여 작성한 HTML 문서가 웹 표준에 부합하는 지 알 수 있음.

➡ 기본 문법 검사에 적합함.

- 예제

https://heropcode.github.io/GitHub-Responsive/# 의 깃헙 예전 메인 페이지 중 Header의 왼쪽 부분을 HTML만 클론코딩 해보자!

1. <HEAD> 태그의 내용을 간단히 정해준다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>GitHub</title>
</head>
<body>
    
</body>
</html>

2. <BODY> 태그에서 위 이미지에서 나눈 영역만큼 <div> 태그를 만들어준다.

<body>
    <div>
        <div>
            <div>
                <div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</body>

3. 각 <div> 태그에 적절한 이름(class)을 지정해주고, 컨텐츠를 입력한다.

<body>
    <div class="header">
        <div class="container">
            <div class="container-left">
                <div class="logo">
                    <img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub Logo">
                </div>
                <div class="menu">
                    <div class="menu-item">Personal</div>
                    <div class="menu-item">Open Source</div>
                    <div class="menu-item">Business</div>
                    <div class="menu-item">Explore</div>
                </div>
            </div>
        </div>
    </div>
</body>

4. 빠뜨린 게 없는지 웹 표준 검사를 실시한다!

내용 학습 출처: https://heropy.blog/2019/04/24/html-css-starter/

강의 링크: https://bit.ly/3m0t8GM

'[패캠] 프론트엔드 패키지 > HTML' 카테고리의 다른 글

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션 (0)	2020.10.30
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 11회차 미션 (0)	2020.10.29
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션 (0)	2020.10.28
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 9회차 미션 (0)	2020.10.27
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 4회차 미션 (0)	2020.10.22

최근에 달린 댓글

TAG more

QQyukim.dev

티스토리 뷰