[멋쟁이 사자처럼] HTML과 CSS로 자기소개 웹페이지 만들기

지난 이야기🌿

1주 차 세션에는 비주얼 스튜디오 코드(VS Code)와 깃을 다 함께 설치했다.

2주 차 (2021.04.05 - 2021.04.09)

1) 화요일

2주 차부터 본격적으로 HTML과 CSS에 대해 배우고 코드를 따라 작성하며 웹페이지를 만들었다.

HTML: HyperText Markup Language의 약자로 웹페이지를 만드는 데 사용하는 언어이다. 미리 정의된 태그와 속성을 사용한다.
CSS: Cascading Style Sheets의 약자로 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 스타일 시트 언어다.

멋사 운영진(회장님👍)을 따라 하면서 만든 첫 웹페이지 결과물을 보자.

약간 머쓱하지만 코드는 다음과 같다.

<!DOCTYPE html> <!-- 현재 문서가 HTML5임을 명시 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>likelion</title>
    <link rel = "stylesheet" href = "firstweb.css">
</head>
<!-- 새파일 - (! + enter)  -->

<body>
    <article>
        <div>
            <p>첫번째 p</p>
        </div>

        <div>
            <p>두번째 p</p>
        </div>

        <p>
            세번째 p
        </p>
    </article>
    <p>바깥의 p태그</p>

    <h1>원하는 내용</h1>
    <h2>저는 h2입니다</h2>
    <h3>저는 h3입니다</h3>
    그냥 적기~~~~~<br>엔터~~~~~
    <!-- ctrl + / 주석처리 -->
    <p>저는 p태그 입니다</p>
    <b>저는 b태그 입니다</b>
    <img src = "cat.JPG">
    <img src = "http://www.foodnmed.com/news/photo/201903/18296_3834_4319.jpg">



    <br><a href="secondweb.html">두번째로</a>

    <form>
        <input type = "button" value = "버튼버튼">

    </form>

</body>
</html>

새 파일을 만들었을 때 느낌표(!) + Tab키를 누르면 HTML 기본 틀이 자동 완성된다.

태그를 차근차근 살펴보자. 앞서 말했듯 HTML 파일을 작성할 때는 미리 정의된 태그를 사용하는데 태그 이름은 괄호(<>)로 감싸서 표현한다.

태그	의미
<head>	문서의 *메타데이터
<body>	웹 브라우저를 통해 보이는 내용
<h>	*제목 표현(가장 큰 <h1>부터 가장 작은 <h6>까지)
<p>	단락(paragraph) 표현
<br>	띄어쓰기 기능
<a>	하이퍼 링크(<a href="링크주소">HTML 링크</a>)

*메타데이터(metadata)는 문서에 대한 정보로 웹 브라우저에는 직접적으로 표현되지 않는다.

*<h> 태그는 제목 표현뿐만 아니라 여러 검색엔진에서 키워드와 내용을 파악하는데 쓰인다. 제대로 검색되기 위해서 제목은 꼭 <h> 태그로 작성하자.

2) 목요일

목요일 세션에서는 회장님을 따라 좀 더 형식을 갖춘(?) 웹페이지를 만들었다.

보다 쉬운 이해를 위해서 회장님의 예시 사진을 가져왔다.

출처: https://23life.tistory.com/135?category=973507

위 사진에서처럼 어제는 의미 요소를 구분해 페이지를 구성했다. HTML5에서 제공하는 레이아웃만을 위한 의미 요소는 다음과 같다.

의미요소	설명
<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의
<nav>	HTML 문서의 탐색 링크를 정의
<section>	HTML 문서의 주요 콘텐츠(content)를 정의
<article>	HTML 문서에서 섹션(section) 부분을 정의
<aside>	HTML 문서에서 독립적인 하나의 글(article) 부분을 정의
<footer>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의

*의미 요소가 정해져 있지만 태그에 얽매일 필요는 없다고 한다.

웹페이지를 다 따라 만든 후에는 파일을 깃허브 저장소에 커밋하는 것 까지 마쳤다. (저장소 이름을 닉네임.github.io로 만들었을 때) Setting - GitHub Pages를 따라가면 웹 페이지 링크가 만들어진 것을 확인할 수 있다.

여기까지가 2주차 세션의 내용이었다.

모각코

2주 차 세션이 끝난 다음날인 오늘은 팀원들과 모각코(=모여서 각자 코딩)를 진행했다. 무려 우리 팀과의 첫 만남! 스터디룸을 빌려서 4시간 동안 있었는데 정말 시간 가는 줄 몰랐다. 서로서로 아는 꿀팁 대방출하고 아이디어도 공유하고 친해지기도 하고😍

그리고 그렇게 해서 만들어진 이번 주차의 결과물!

나는 페이지 구성에서 배운 것을 토대로 자기소개 웹페이지를 만들어봤다.

<nav>에는 블로그와 깃허브 링크를 걸어 이동할 수 있도록 만들었다.
<article>에는 초록 초록한 내 사진과 멋사 9기 아기사자로써의 소개를 간단히 적었다.
<aside>에는 부차적인 내용을 담는 거라고 하길래 내 부캐(Sub Character)인 드러머에 대해서 적었다ㅎ
<footer>에는 곧장 이메일로 연결되는 링크를 걸어 내게 연락할 수 있도록 만들었다.

글꼴은 운영진 해솔님이 알려주신 눈누 사이트에서 코드를 복붙 해 변경했다.

@font-face {
    font-family: 'RIDIBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


header {
    display: block;
    background: #a5d296;
    padding: 50px;
    text-align: center;
    color: whitesmoke;
    font-family: 'RIDIBatang';
}

이런 식으로!

글꼴 변경까지 마치고 아래처럼 깃허브 커밋까지 하면

🌿자기소개 웹페이지 제작 완료🌿

MyPage

Sub character 1) Drummer 취미로 드럼을 칩니다. 1년 남짓 배웠고 좋아하는 곡을 연주할 수 있는 정도입니다. 아이유, 선우정아, 자우림, 새소년의 곡을 특히 좋아합니다. ···

donghae0230.github.io

~~정말 그럴싸한걸,,,? 수고했다 나 자신~~

HTML과 CSS파일은 맨 아래 깃 저장소에서 확인할 수 있다.

정말 알찼던 2주 차 세션 끝끝

다음 주에도 차근차근 해보겠습니다🦁

참고 자료

기본 웹사이트 제작하기

HTML5의 페이지 구성! 기존 div의 id를 통해 해당 구역을 나타내던 것에서, 각 구역별 태그를 사용해 해당 구역을 나타내는 방식으로 바뀌었다. 이를 통해 서버에서 HTML 파일을 읽을 때 조금 더 빨리

23life.tistory.com

프로그램 개발 지식 공유, devkuma

데브쿠마는 프로그래밍 개발에 대한 지식을 공유합니다.

www.devkuma.com

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

Do it! 공부단 3일차 | ch04 깃허브로 백업하기

04-1 원격 저장소와 깃허브 이제껏 컴퓨터에서 작업한 뒤 그 컴퓨터에서 커밋을 저장했다. 이 저장소를 지역 저장소(loca repository)라고 한다. 깃에서는 백업과 협업을 위해 별도의 원격 저장소(remot

donghae0230.tistory.com

자기소개 웹페이지 HTML & CSS 파일은 여기서 확인👇

Donghae0230/Donghae0230.github.io

Contribute to Donghae0230/Donghae0230.github.io development by creating an account on GitHub.

github.com

저작자표시

'LIKELION 9th' 카테고리의 다른 글

[멋쟁이 사자처럼] Django로 블로그 만들기2 (회원가입, 로그인, 로그아웃) (0)	2021.05.24
[멋쟁이 사자처럼] Django로 블로그 만들기(CRUD 기능 구현하기) (0)	2021.05.16
[멋쟁이 사자처럼] 장고 시작하기(단어 수 세기 예제✔) (0)	2021.05.08
[멋쟁이 사자처럼] 멋사 9기 아이디에이션(feat. 예비 집사를 위한 웹사이트😺) (0)	2021.04.30
멋쟁이 사자처럼 9기 합격후기 (서류/면접/포트폴리오) (7)	2021.04.09

Donghae Blog

[멋쟁이 사자처럼] HTML과 CSS로 자기소개 웹페이지 만들기

지난 이야기🌿

2주 차 (2021.04.05 - 2021.04.09)

1) 화요일

2) 목요일

모각코

'LIKELION 9th' 카테고리의 다른 글

티스토리툴바

[멋쟁이 사자처럼] HTML과 CSS로 자기소개 웹페이지 만들기

지난 이야기🌿

2주 차 (2021.04.05 - 2021.04.09)

1) 화요일

2) 목요일

모각코

'LIKELION 9th' 카테고리의 다른 글

'LIKELION 9th' Related Articles

티스토리툴바