[HTML]wecode

정현석·2020년 10월 20일

🚀 학습 목표

웹 페이지의 토대가 되는 HTML과 CSS의 역할에 대해 설명할 수 있다.
HTML과 CSS의 기초 개념 및 용어를 설명할 수 있다.
HTML에서 자주 사용되는 태그의 종류를 알고 적절하게 활용할 수 있다.
CSS 기본 개념을 활용하여 페이지의 레이아웃을 구성하며 요소에 스타일을 입힐 수 있다.
Semantic Web이 무엇인지, Semantic tag를 사용하는 것이 왜 중요한지 설명할 수 있다.

📝 Mentor's Tip

개발을 처음 시작하는 단계에서는 우선 큰 그림을 그려줄 필요가 있습니다. 개별적인 내용도 중요하지만 HTML과 CSS의 큰 그림을 그려가면서 학습해주세요.
Replit에서는 기초부터 심화까지 다양한 주제를 다루고 있습니다. 내용을 한 번에 완전히 이해하고 넘어가기 보다는 자주 반복해서 보는 방식으로 학습해주세요.
혼자서만 풀다 보면 지루할 수 있습니다. 조금 어색하더라도 동기들과 도움도 주고 받고 서로의 상황도 체크해주면서 함께 진행하시는 것을 추천드립니다.
어려운 용어나 주제는 반드시 블로그에 정리해주세요. 면접 질문과 연결되는 주제들이 굉장히 많습니다. 단, 한 문제에 5시간 이상 넘어가는 경우 반드시 주변 동기 혹은 멘토의 도움을 받아 제출을 완료해주세요.
레플릿 진행 후에는 오프라인 Q&A 세션이 있습니다. 인원과 상황에 맞게 세션이 진행되므로 자세한 시간과 장소는 추후에 공지하도록 하겠습니다.
HTML, CSS 문제를 다 풀고 블로깅 과제까지 완료하신 분들은 말씀해주세요. 간단한 상담 후에 다음 과제 안내해 드리도록 하겠습니다.

HTML 이란 ?

웹 페이지를 만들기 위한 언어, 웹페이지의 구조를 구현
이미지, 텍스트, 비디오 등 웹사이트에 구현할 내용을 구성
HTML 파일로 브라우저가 웹 페이지를 생성함.

HTML tag

등의 태그가 있으며 최소한 태그는 위와 같다 대부분의 태그는 시작과 끝이 존재, 하지만 단일로 사용되는 태그도 있다. ,
- attribute(속성) : 시작태그에 위치, 여러속성을 지정가능 - element(요소) : 태그, /태그 로 끝나는 태그사이의 내용

html 파일의 구조는 항상 아래와 같습니다.

<!DOCTYPE html> # HTML5 버전 사용
<html> # 최상위 태그
 <head> # html 태그 다음에는 항상 head태그 위치
   # 제목, 설명, 부가정도, 기술적내용 등이 위치
  <meta charset="utf-8"> # utf-8 로 인코딩
  <meta name="viewport" content="width=device-width">
   # 디바이스의 가로 크기와 웹페이지의 가로와 같다 
  <title>repl.it</title># 브라우저 탭 페이지의 이름 
 </head>
  
 <body>
   <h1> ~  <h6> #heading 글씨크기, *이 태그를 사용하는 방법에 따라 html 최적화 가능 , 검색엔진 등 상위노출
     <span> #주로 텍스트를 넣어주는 태그
		<p> #paragraph , 텍스트를 주로 넣어주는 태그 + 줄바꿈
          <a href = "http:// website" target="_blank"> div 태그?</a> 
          #<a> 링크 , 텍스트 <p>, <span> 
      </span>
        # 클릭 시 화면이동(태그) , target 설정씨 새 창에서 열기
      <div> # 웹사이트의 섹션을 나눌 때 사용, division
        #비슷한 부분끼리 그룹짓기, 레이아웃분리, class, id 등을 부여하여 css스타일 사용가능 ** 헤더,메뉴,내용, 푸터 등으로 나누어 div클래스로 묶어 사용
       
 </body>
</html>
          
     id = 각 태그에 이름을 주는 속성( 식별가능 번호부여 고유번호 부여) <div id="profile"> 해당요소에만 디자인을 적용할 때 사용(글씨크기나 스타일, 디자인 등)
     class = 여러태그에 중복된 이름 부여가능. 
       <div class="content-wrap"></div>
		<p class="content-wrap"></p>

css 란?

  = HTML 태그들에 디자인을 입혀주는것.  
   	HTML 적용방법 
   1. 인라인스타일 
   태그 style 속성에 직접 작성할 수 있습니다.

<h1 style="color: red;">FRONTEND 101</h1>
		2.style	태그
        html 파일 내에 css를 작성할 수 있는 방법입니다.
        <style> 사이에 css문법을 사용하여 스타일을 작성합니다.
        <style>
         h2 {
          color: #408090;
         }
        </style>
          
3. css파일에 작성
대신 html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로,
링크를 해주는 태그를 추가해야 합니다.
          <link href="index.css" rel="stylesheet" type="text/css" />

css 작성법

	p {color : red; }
          #p라는 태그의 내용 빨간색으로 변경
        p {  font-size: 12px; }
          #p 태그의 글씨크기 12픽셀 변경

class: .클래스이름

selector가 태그였을 때는 단순히 태그이름만 적어주었습니다.
그런데 클래스에 디자인을 적용하고 싶을 때는 selector에 .(dot)이 필요합니다.
아래와 같이 .(dot)클래스이름 이라고 selector를 작성해주어야 합니다.

.profile-detail {
  font-weight: bold;
}

"profile-detail" 이라는 클래스가 적용된 태그에는 모두 글씨 두께가 두꺼워 집니다.

<p class="profile-detail">이것도 두꺼워 지고</p>
<span class="profile-detail">이것도</span>
<div class="profile-detail">그리고 이것도..</div>

css 시트에서 #과 .의 차이

# 은 class 이름에 사용
. 은 id 이름에 사용

font

  #title {
  color: blue;
  font-family: Georgia, "Times New Roman", Times, serif; 
     # font-family는 폰트 스타일을 지정
  font-size: 30px;
}
 # 브라우저에서 Georgia 폰트 지원시 적용, 지원되지않으면 "Times New Roman" 적용, 없으면 Times, 앞에 3가지가 전부 없으면 serif폰트사용          
 # font 이름에 띄워쓰기가 있으면 ""사용
          font-family 값에는 여러가지 폰트가 나열
          serif 폰트는 모든 브라우저에서 지원

컬러 검색

"color picker"라고 치거나
"color picker hex color"

만약 hex 표현에서 rgb 표현으로 바꾸고 싶다면
google에 "color hex to rgb"

   indent = css에서 들여쓰기
  .js-description {
  text-indent: 50px;
}

(https://images.velog.io/images/cs982607/post/7d601325-8d82-4d27-bc31-0878ad1271b1/1.jpg)

주황색은 margin 영역, 위, 오른쪽, 아래, 왼쪽에 모두 50px
노란색은 border 영역, 보더의 두께는 5px이다.
초록색은 padding 영역, 위, 오른쪽, 아래, 왼쪽에 모두 50px
요소의 가로는 273px, 세로는 90px

p.example {
width: 273px;
height: 90px;
margin: 50px;
border: 5px solid black;
padding: 50px;
}

padding값 설정

p.example {
  padding: 50px 50px 50px 50px;
} 
          한 번 더 풀어쓰면 아래와 같습니다.
p.example {
  padding-top: 50px;  # 위-오-아래-왼 시계방향
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

Border

 p {
  border: 5px solid red;
}

span {
  border: 1px dotted #0000ff;
}

          선 스타일의 종류입니다.
dotted 
dashed 
solid 
double 
groove 
ridge
inset 
outset 
이 중에 거의 solid만 사용하지만, 
혹시 다른 선스타일도 사용할 경우가 있으니 다양한 스타일이 있다는 것만 알아두시면 좋겠습니다.
          
선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있습니다.

blockquote {
border-top: 4px double red;
border-right: 2px solid #666666;
border-bottom: 6px dashed darkviolet;
border-left: 1px dotted #00ee44;
}

box-sizing

모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지겠죠.
아래와 같은 "*" selector로 모든 태그에 적용할 수 있습니다.

{
box-sizing: border-box;
}

상속, 그룹

상속
body 태그에 color가 빨간색, 크기 14px 일 경우
밑에 있는 태그들도 똑같은 스타일을 상속받게 된다.(부모)
하지만, 밑에 있는 자식태그의 스타일에 color가 다른 스타일일 경우 본인의 스타일이 적용된다.
그룹 = 같은 스타일을 적용하고 싶을 때는 각자의 selector를 똑같은 스타일로 적용하기 보다는 한꺼번에 스타일을 지정할 수 있다.
.what-is-blockquote, span, p { #태그이름을 한꺼번에 적어 스타일적용
color: green;
}
```
    
```

CSS selector

class나 id가 selector일때 태그와 결합할 수 있습니다.

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}

첫 번째는 p태그이면서 p-tag 클래스이다.
두 번째는 p태그이면서 third-line 아이디이다.
라는 뜻입니다.

.pre span {
  background-color: yellow;
}
그런데 모든 span이 아니라 "pre" 클래스 내부에 있는 span이라는 뜻입니다
          ###selector 우선순위
          tag <<<<< class <<<< id <<<<<< inline css
          1점					1000점

이미지

태그로 이미지넣기

img 태그에 사용된 속성을 하나씩 살펴보겠습니다.

alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
src: 이미지 파일 경로 or 이미지 url 주소
          
css에 가로만 지정해주어도 원본의 세로값이 가로의 비율에 맞춰서 알맞게 줄어듬

background-image로 이미지 넣기

bg-img 클래스에 배경이미지를 넣는 css를 추가한 것입니다.
.bg-img {
background-color: yellow;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}
background-color 는 배경색을 추가하는 것이고
background-image 는 배경 이미지를 추가하는 것입니다.

해당 배경이미지가 div.bg-img의 가로크기만큼 꽉채워 그려주라는 의미입니다.
.bg-img {
background-size: 100%;
}

Block , Inline

   <header><footer><p><li><table><div><h1> 등은 Block요소 : 이 요소 바로 옆(좌우측)에 다른 요소를 붙일 수 없다.
      이 요소들은 항상 새 줄에서 시작되며 좌우로 최대한 늘어난다.
     
     <span><a><img> 등은 Inline요소 : 요소끼리 서로 한줄에, 바로 옆에 위치할 수 있다.
       이 요소들은 텍스트만큼의 영역만 차지.
       
       하지만, css를 사용하여 스타일 변경할 수 있다.

inline 성질을 갖도록 하는 CSS property는 display와 float이 있습니다.

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
해당 property에 위와 같은 값을 부여하면, 
요소 옆에 요소가 위치하는 inline 성질로 변하게 됩니다.
           
반대로 원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있습니다.

.block-span {
display: block;
}
위의 CSS로 은

태그와 똑같은 성질을 갖게 되었습니다.

none = html에는 존재하지만 화면에는 보이지 않음.
사용목적으로는 interactive 웹구현
검색창에 텍스트 입력한 순간 관련 목록 구현
해당영역이 display: none; 으로 되어 있다가 텍스트 입력 후 JavaScript가 검색 목록을 다른 클래스로 교체함
```
     
```

정현석

기록하는 벨로그

이전 포스트

[Python]Web Scraping-3

다음 포스트