2일차

JiHun·2023년 4월 12일

부트캠프

목록 보기

2/56

웹 개발에는 정말 중요하고, 공부를 피할 수 없는 것. 바로 HTML, CSS.
이 둘은 또한 제일 중요한 언어와도 관련이 있다. JavaScript!

HTML

HTML(HyperText Markup Language)는 웹 페이지의 구조를 담당하는 마크업 언어.

프로그래밍 언어 아니다.

기본구성요소는 <>(Tag)로 시작해서 </>로 끝난다. 열고 닫고.

태그마다 부모, 자식으로 Tree 구조를 형성한다.

Self-closing Tag: 태그 내부에 내용이 없다면 처럼 표현 가능.

태그에는 속성을 담을 수 있다. (ex. src,style, class, type 등등)

<!DOCTYPE html>
<html>
	<head>
    	<title>Home</title>
    </head>
    <body>
    	<h1>Hello world</h1>
        <div>
        	<span></span>
        </div>
    </body>
</html>

시맨틱 태그

가장 기본적인<div>, <span>만 사용하게 되면 너무 중첩돼서 보기 힘들었다. 보기 쉽게 쓰이기도 하고,가장 큰 장점은 이 시맨틱 요소를 이용하게 되면 검색 엔진이 이 시맨틱 요소를 중요한 키워드로 고려해서 돌아가는 점이다.

<section>: HTML 문서의 독립적인 구획을 나타낸다.

<section>
	<h2>Heading</h2>
   <img>some image</img>
</section>

<article>: 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획. 댓글창에 쓰이면 유용하겠다.

<section class="user_reviews">
   <article class="user_review">
     <p>Way too scary for me.</p>
     <footer>
       <p>Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.</p>
     </footer>
   </article>
   <article class="user_review">
     <p>I agree, dinos are my favorite.</p>
     <footer>
       <p>Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.</p>
     </footer>
   </article>
 </section>

<aside>: 남은 부분에 쓰이는 요소. 사이드바나 광고창 등 중요하지 않은 부분에 쓰인다.
<nav>: 네비게이션의 약자. 상단바 등 사이트를 안내하는 요소. 보통 안에 <ul>을 넣어 쓴다.
<header>: 가장 윗부분. 보통 사이트의 이름이나 사이드바를 넣는다.
<footer>: 가장 아랫부분. 사이트의 주소, 연략처 등등을 넣는다.

id, class 목적에 맞게

id: 고유한 이름을 붙일 때(전체 문서를 통틀어서)
class: 반복되는 영역을 유형별로 분류할 때

<li>는 반복되기 때문에 id로 지정할 수 없다.

네이버 HTML 분석해보기

배운 내용을 바탕으로 네이버를 분석해봤다.
먼저 3부분으로 나눴다. <header>, <div>, <footer>

헤더부분은 검색창이 있는 곳이다. 눈에 띄는 것은 로고와 네이버글자, 검색창이 눈에 띄어서 헤더부분을 또 3부분으로 나눴다.

<header>
	<header>
      <div style="display: flex">
        <img src="naverlog.png" style="width: 60px; height: 50px" />
        <h1 style="font-size: 45px">NAVER</h1>
        <input size="60" />
        <button type="submit">Search</button>
      </div>
      <nav style="display: flex">
        <ul style="display: flex; flex-direction: row; list-style: none">
          <li>메일</li>
          <li>카페</li>
          <li>블로그</li>
          <li>지식iN</li>
          <li>쇼핑</li>
          <li>쇼핑LIVE</li>
          <li>Pay</li>
          <li>TV</li>
        </ul>
		<ul style="display: flex; flex-direction: row; list-style: none">
			<li>사전</li>
			<li>뉴스</li>
			<li>증권</li>
			<li>부동산</li>
			<li>지도</li>
			<li>VIBE</li>
			<li>도서</li>
			<li>웹툰</li>
		</ul>
	</nav>
</header>

div - container

<div style="display: flex; flex-direction: row">
        <div style="width: 750px">신문사</div>
        <div style="width: 350px; height: 250px">
          <span>로그인창</span>
          <form style="display: flex; flex-direction: column">
            <input tyep="text" placeholder="이메일" />
			<input type="password" placeholder="비밀번호" />
		</form>
	</div>
</div>

3분2는 신문사나, 뉴스거리들
3분1은 input이 들어간 로그인창

<footer>
	<div display="display:flex; flex-direction:row">
		<h4 style="display: inline">Creaters</h4>
		<a><span>크리에이터</span></a>
        <a class="partner"><span>스몰비즈니스</span></a>
	</div>
	<div display="display:flex; flex-direction:row">
    	<h4 style="display: inline">Partners</h4>
		<a><span>SME 풀케어 시스템</span></a>
		<a class="partner"><span> 비즈니스 • 광고</span></a>
		<a class="partner"><span>스토어 개설</span></a>
		<a class="partner"><span>지역업체 등록</span></a>
		<a class="partner"><span>엑스퍼트 등록</span></a>
	</div>
	<div display="display:flex; flex-direction:row">
		<h4 style="display: inline">Developers</h4>
        <a><span>네이버 개발자 센터</span></a>
        <a class="partner"><span>오픈 API</span></a>
		<a class="partner"><span>오픈소스</span></a>
		<a class="partner"><span>네이버 D2</span></a>
		<a class="partner"><span>네이버 랩스</span></a>
	</div>
</footer>

새로 배운 것

input의 크기는 size="100"으로 설정할 수 있고, width로는 input type이 image인 경우에만 가능.
width로 설정하고 싶다면 style="width:100px" style속성에 픽셀 단위로 설정.

<li>태그 점 없애는 법: li태그나 부모(<ul>)한테 style 속성에 list-style: none;

<h1>와 같은 heading 태그를 한줄에 적는 방법: style 속성에 display: inline;