[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 9일차
🍊 HTML과 CSS의 핵심 개념, 구문, 구조, 웹에 대해 이해하기
1. HTML(Hyper Text Markup Language)
HTML이란? 웹페이지를 만드는 데 사용되는 마크업 언어
HTML을 사용하는 텍스트, 이미지, 비디오 등과 같은 콘텐츠를 구성하고 구조화 할 수 있으며,
이를 통해 웹 페이즈를 디자인하고 브라우저에 표시 가능
HTML은 웹 개발의 기초 중 하나임 CSS,JavaScript와 함께 사용됨
HTML5의 기본 요소
- HTML 문서는 기본적으로 엘리먼트들이 모여 있는 공간
| 요소 | 의미 | |
|---|---|---|
| 태그(tag) | ’<’와’>’로 둘러싸인 문자열 시작 태그 ‘<>’와 종료태그 ‘</>’로 구성 | |
| 내용(content) | 태그로 둘러싸인 문자열 | |
| 엘리먼트(element) | 태그와 내용을 포함한 전체 문자열 HTML 문서의 기본 구성 단위 | |
| 속성(arrtibute) | 엘리먼트의 상세한 표현 설정 사항을 지시 시작 태그 안에 사용 | |
| 속성값(value) | 속성값(‘’ 또는 ““로 감싸야 함) |
HTML5의 기본 구조
| 항목 | 정의 |
|---|---|
| <!DOCTYPE html> | 웹문서의 유형 지정 본 문서가 HTML5라는 것을 명시 |
| <html> | Html 파일임을 정의하고, 웹문서의 시작과 끝에 위치 |
| <head> | 메타 데이터의 집합으로 웹문서에 직접적으로 보이지는 않지만 웹의 정보를 담당 Title, meta, link, style, script 태그로 구성 |
| 홈페이지의 설명, 대표이미지, 대표 키워드 등을 입력하는 태그 홈페이지 주소를 어딘가에 공유할 때 나오는 설명 글과 이미지에 해당 | |
| 홈페이지 제목 | |
| <body> | 홈페이지에서 실제로 보여지는 공간 본문의 내용을 담는 공간 |
2. 시맨틱 태그(SEMANTIC TAG)
사람들이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있게 만든 태그
시맨틱 태그가 나오기 이전에는 <div>태글 일일이 위치와 범위를 정하고 각 태그들에 class이름으로 구분함.
| 항목 | 정의 |
|---|---|
| header | 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성 |
| nav | 페이지의 내비게이션 영역. (사이트 내, 외부로 이동).메뉴, 목차, 색인 등등 |
| main | 메인 컨텐츠 영역. 문서 내에서 반드시 한 번만 사용 다른 header, footer, nav, article, section, aside의 하위로 작성할 수 없다. |
| section | 본문의 여러 내용(article)을 포함하는 부분을 의미 |
| article | 본문의 주 내용이 들어가는 부분을 의미 |
| aside | 간접 컨텐츠, 보조 컨텐츠를 의미하며, 대체적으로 옆에 위치하는 내용의 부분을 의미 |
| footer | 하단 바닥글을 의미합니다. 주로 들어가는 정보는 회사정보, 저작권, 연락처 등등이 있다. |
시맨틱 태그 사용이유와 장점
HTML 태그들을 올바르게 사용해야하는 이유는 웹 표준을 준수하기 위해서임.
- 웹 페이지의 구조와 의미를 명확하게 함
- 가독성 향상
- 가독성이 높은 코드는 유지보수 용이 및 코드 수정, 업데이트 시 문제 발생 확률 적어짐
- 웹 페이지에 일반적인 방법으로 적근할 수 없는 사람들(시각장애인)들도 원활한 소통이 가능하도록 도울 수 있음
- 크로스 브라우징 이슈(각 브라우저에서 웹 페이지가 다르게 보이는 문제)를 최소화 할 수 있다.
3. 과제 - (구)세이프홈즈 랜딩페이지 html작성
CODE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
<title>세이프홈즈</title>
</head>
<body>
<header>
<a href="#"><img src="images/logo.png" alt="세이프홈즈_logo"></a>
<div class="menu">
<a href="#" class="btn-white">문의하기</a>
<a href="#" class="btn-green">시작하기</a>
</div>
</header>
<main>
<section class="visual">
<img src="images/main.jpg" alt="">
<div class="text-box">
<h1>내 집 보증금, <br />경매로 날아가면 어떻게 하지?</h1>
<a href="#">지금 걱정 해결하기<span class="material-icons">
chevron_right
</span></a>
</div>
</section>
<section>
<article>
<p class="title">세이프홈즈, <strong>전/월세 보증금 지킴이 서비스입니다.</strong></p>
<div class="services-area">
<div>
<img src="images/Rectangle.png" alt="">
<h3>등기부등본 등을 분석한<br />보증금 지킴이 리포트</h3>
<p>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
<div>
<img src="images/Rectangle-1.png" alt="">
<h3>보증금 보호를 위한<br />Check-List</h3>
<p>내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
<div>
<img src="images/Rectangle-2.png" alt="">
<h3>등기부등본 등을 분석한<br />보증금 지킴이 리포트</h3>
<p>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
</div>
<a href="#">지금 바로 사용하기<span class="material-icons">
chevron_right
</span></a>
</article>
<article>
<p class="title">
<strong>부동산을 찾았지만 망설이고 계시나요?</strong>
</p>
<div class="services-area">
<div>
<img src="images/Rectangle-3.png" alt="">
<h3>부동산 중개 업자는 항상 괜찮다고 한다.과연 그럴까?</h3>
<p>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
<div>
<img src="images/Rectangle-4.png" alt="">
<h3>절차가 이것저것 너무 많은데 빠뜨린 절차가 있지 않을까?</h3>
<p>내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
<div>
<img src="images/Rectangle-5.png" alt="">
<h3>평생 힘들게 모은 보증금을 나중에 돌려 받지 못하면 ..</h3>
<p>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
</div>
</article>
<article>
<p class="title">세이프홈즈
<strong>어떻게 내 보증금을 지킬 수 있을까요?</strong>
</p>
<div class="check-list">
<div>
<strong>#1</strong>
<h4>계약 전 주소 검색</h4>
<p>내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
<div>
<strong>#2</strong>
<h4>보증금 지킴이 리포트 확인</h4>
<p>내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
<div>
<strong>#3</strong>
<h4>체크리스트를 따라 계약 진행</h4>
<p>내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
<div>
<strong>#4</strong>
<h4>실시간 등기 변동 알림</h4>
<p>내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
<div>
<strong>#5</strong>
<h4>계약 기간 안심하고 살기</h4>
<p>내 내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</p>
</div>
</div>
<a href="#">조금 더 알아보기<span class="material-icons">
chevron_right
</span></a>
</article>
<article>
<div class="phone">
<div class="phone-list">
<div>
<img src="images/Phone.png" alt="핸드폰">
</div>
<div>
<strong>리포트</strong>
<h4>등기부 등본 등을 분석한<br />보증금 지킴이 리포트</h4>
<p>어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해 할 수 있는 보증금 지킴이 리포트 제공</p>
</div>
</div>
<div class="phone-list">
<div>
<strong>절차</strong>
<h4>보증금 보호를 위한,<br />체크리스트</h4>
<p>전세 사기 당하지 않기 하기 위해 반드시 확인해야 할 체크리스트를 제공합니다.</p>
</div>
<div class="img-r">
<img src="images/Phone-1.png" alt="핸드폰">
</div>
</div>
<div class="phone-list">
<div>
<img src="images/Phone-2.png" alt="핸드폰">
</div>
<div>
<strong>알림</strong>
<h4>등기부 등본 변동에 따른<br />실시간 알리미</h4>
<p>어떤 말도 듣지 못 했는데 집 주인이 바뀌었다고? 세이프홈즈가 즉각 알려드립니다.</p>
<img class="msg" src="images/msg.png" alt="메세지">
<img class="msg" src="images/msg-1.png" alt="메세지">
</div>
</div>
</div>
</article>
<article>
<p class="title">세이프홈즈, <strong>서비스 가격은 어떻게 될까요?</strong></p>
<div class="price">
<div>
<h4>전/월세 보증금<br />
지킴이 리포트</h4>
<p>해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.</p>
<strong>80,000 KRW</strong>
<p>1회 50,000원 / 1주 80,000원</p>
<a href="#" class="btn">지금 바로 사용하기</a>
</div>
<div>
<h4>등기부 등본 변동<br />
알림 서비스</h4>
<p class="txt">해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.</p>
<strong>50,000 KRW</strong>
<p>1년 50,000원 / 2년 80,000원</p>
<a href="#" class="btn">지금 바로 사용하기</a>
</div>
<div>
<h4>올 패키지<br />
(지킴이 리포트 + 알림)</h4>
<p>해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.</p>
<strong>100,000 KRW</strong>
<p>1주 + 2년 100,000원</p>
<a href="#" class="btn">지금 바로 사용하기</a>
</div>
</div>
<a href="#">원하시는 플랜이 없다면 문의주세요!<span class="material-icons">
chevron_right
</span></a>
</article>
</section>
<section class="review">
<p class="title">세이프홈즈, <strong>없었으면 큰일 날 뻔했어요!</strong></p>
<div class="review-box">
<div>
<div class="info">
<img src="images/Oval.png" alt="">
<p><strong>홍길동님</strong> <br />
전/월세 보증금 지킴이 리포트</p>
</div>
<p>공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데, 세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합
대상도 아니라 경매로
넘어가게 되면 보증금을 돌려받기 힘들 것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수 있었습니다.</p>
</div>
<div>
<div class="info">
<img src="images/Oval.png" alt="">
<p><strong>홍길동님</strong><br />
전/월세 보증금 지킴이 리포트</p>
</div>
<p>공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데, 세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합
대상도 아니라 경매로
넘어가게 되면 보증금을 돌려받기 힘들 것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수 있었습니다.</p>
</div>
<div>
<div class="info">
<img src="images/Oval-1.png" alt="">
<p><strong>홍길동님</strong> <br />
등기부 등본 변동 알림 서비스</p>
</div>
<p>첫 부동산 계약이라 확인해야할 것이 중구난방이어서 불안했어요. 인터넷과 공인중개사에게 확인을 했지만 그래도 불안했어요. 내 전재산인데... 그런데 세이프홈즈에는 확인해야 할 것이 쉽게
나와있어서
준비물 준비하듯이
착착 할 수 있었습니다. 부동산 잘 아는 친구가 생긴 것 같아 좋았습니다.</p>
</div>
</div>
<a href="#">후기 진위여부 파악하러 가기<span class="material-icons">
chevron_right
</span></a>
</section>
<section class="bg-full">
<div>
<h1>
내 보증금, 안전하게 보호하려면<br>지금 시작하세요
</h1>
<a href="#" class="btn-white">지금 바로 시작하기</a>
</div>
</section>
</main>
<footer>
<div>
<p>(주)세이프홈즈</p>
<small>
사업자 등록 번호 : 250-26-01109 | 대표 : 정동훈<br>
경기도 성남시 수정구 대왕판교로 815 기업지원허브 혁신기술존 260-3호<br>
문의 메일 : <a href="mailto:safehomes.kr@gmail.com">safehomes.kr@gmail.com</a>
</small>
</div>
</footer>
</body>
</html>
결과
3. 회고
오랜만에 html과 css를 복습하는 시간을 가졌다. 너무 오랜만에 하다보니 헷갈리는게 좀 있었다. 벌써 ..?
그래도 하다보니 원래 했던게 있었어서 그런건지 손가락이 알아서 움직여줘서 신기했달까😊
피그마는 나는 사용하기에 아직 먼거 같다.. 아무생각없이 썼었는데 보니까 간격 등을 잘 정해줘야 할 거 같다.
html은 생각없이 짜면 금방 하긴하는데 css 할 생각에 대책없이 쓰면 다 고쳐야겠다 싶어서 약간 생각하면서 짠거같다. 아마도..?
얼른 React를 배우고 다같이 프로젝트를 하고 싶다! 프로젝트 선착순이라던데 빨리 정해야지.. ㄷㄷ
아무튼 오늘도 무사히 과제 완료!
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
Leave a comment