본 내용 정리는 구름 에듀 김버그님의 강의를 참고하였습니다.
김버그의 HTML은 재밌다 — 기초부터 실무 레벨까지 - 구름EDU
웹 개발의 시작인 HTML, 탄탄한 개념이해부터 실습까지 한 강의로 끝내기! 실무 가능한 실력으로 😎
edu.goorm.io
ttr : 태그에 대한 부가적인 정보
ex) <p lang="ko"> 안녕하세요 </p>
=> lang : attr, "ko" : value
heading tag : 제목, 총 6가지 - h1 ~ h6
paragraph tag : 내용
강조 태그
<em> : 글씨를 기울게
<strong> : bold
=> 나중에 css로 수정 가능, 즉 강조의 의미만 생각하면 됨
줄바꿈 태그 : </br>
링크 태그 : 현 위치에서 다른 위치로 이동
<a href="url">
attr : href= - 이동하고자 하는 링크
1. 다른 웹 주소
2. 다른 html 문서에 대한 상대 경로
3. href="#xxx" xxx의 섹션으로 이동
4. href="mailto:email" email에 메일 보내기
5. href="tel:phone" phone에 전화걸기
<a target="_blank"> : 새로운 탭에서 링크 열기
! 따로 쓰는 것이 아니라 href 뒤에 붙임
이미지 태그
<img src="#" alt="" />
src= : 이미지 파일이 있는 경로 및 주소
alt= : 대체 텍스트 - 이미지가 없을 경우, 대체해서 보여줄 텍스트
목록 태그
<ul> : 순서 x
<ol> : 순서
<li> : 목록 내부 항목
! <ul>과 <ol> 태그 내부에는 <li> 태그만 있어야함 => 필요한 태그가 있다면 <li> 태그 내부에 작성
정의 리스트 태그 <dl>
1. 용어를 정의할 때
2. key-value로 정보를 제공할 때
<dt> : key값 (연속된 <dt> 태그는 유사한 의미로 판단)
<dfn> :
<dd> : value값 (앞에 위치한 <dt> 태그에 대한 설명)
* <div> 태그를 이용하여 <dt>, <dd> 태그 그루핑 가능
! <dt> 태그 뒤에 <dd> 태그가 있어야 함
! <dl> 태그 내부에는 <div> <dt> <dd> 태그만 존재해야함
! <dt> <dd> 태그는 반드시 <dl> 태그 내부에 존재해야함
인용 태그
<blockquote> : 블록으로 구성된 인용구
<q> : 문단 내에서 사용된 인용구
attr : cite= : url 출처
<cite> : 출처 의미
<div>, <span> : CSS 사용할 때 사용됨, 그루핑
<span> : 텍스트 일부를 그루핑
<form> : 사용자로부터 input을 받기 위한 공간을 의미하는 태그
attr : action : API 주소
: method : GET | POST
<input> : input을 받기 위한 태그
attr : type= : input으로 받기 위한 타입
=text : 모든 input에 적용 가능
=email : 이메일 형태의 텍스트 입력
=password : 입력 텍스트가 보이지 않게 입력
=url : url 형태의 텍스트 입력
=number : 숫자열만 입력
min=, max= : 입력 숫자의 최소 최대값
=file : 첨부 파일 url
accept= : 확장자 지정 (ex. ".png, .jpg")
=radio : 단일 선택 가능, id를 통해 label 태그와 연결
name= : radiobox 그룹 설정 (name값이 같은 input 그루핑)
value= : 선택된 값의 의미 -> 항목별로 다른 값
=checkbox : 복수 선택 가능
: placeholder= : 입력창에 띄울 텍스트
: maxlength= : 입력 문자열의 최대 길이
: minlength= : 입력 문자열의 최소 길이
: required : 필수입력칸 의미
: disabled : 사용할 수 없는 칸임을 의미
: value= : 초기값
: id= : input id 명시
<label> : input의 이름
attr : for= : input의 id값
<select>: 풀다운 메뉴
multiple : 중복 선택 가능
<option> : 해당 메뉴에 대한 각 항목
! name attr를 필수로
! value attr로 항목에 대한 값 설정
<testarea> : 다수 라인의 텍스트 입력
<button> :
type= =button : 기본형 - 의미 없음
=submit : 해당 form을 제출하기 위함
=reset : 해당 from 초기화
실습
index.js
<!--제목, 강조, 링크 태그 실습
<strong>
Be Really Excellent
<strong>
<h1>
구름EDU 클라우드 SW교육환경
</h1>
<p>
스크래치3, 엔트리부터 파이썬, C언어까지 설치가 전혀 필요없고강력한 LMS와 연동된 SW교육환경이 눈앞에 펼쳐집니다.누구나 SW에 대한 지식과 경험을 나눌 수 있고, 누구나 SW를 배울 수 있는 환경! 지금 경험해보세요!
</p>
<a href="https://edu.goorm.io">
서비스 바로가기
</a>
-->
<!--제목, 개요, 강조 태그 실습
<h1>
황제펭귄
</h1>
<h2>
생물학적 특성</h2>
<p>
지구상에 생존하는 모든 펭귄들 중에서 가장 키가 크고 체중이 많이 나가는 종이다. 서식지는 남극과 포클랜드 제도이다. 암컷과 수컷은 덩치와 깃털 무늬가 비슷하며, 성체는 최고 122센티미터에 몸무게는 22~37킬로그램까지 나간다. 등은 검고 가슴 부위는 창백한 노랑색을 띠고 있으며 귀 부위는 밝은 노랑색이다. 다른 펭귄들과 마찬가지로 황제펭귄은 날지 못한다. 이들은 해양 생활에 적합한 유선형의 몸매와 플리퍼(flipper)로 불리는 납작한 날개를 갖고 있다.
</p>
<h2>
특성
</h2>
<p>황제펭귄은 남극의 겨울 기간 동안 알을 낳는 유일한 종으로, 50 ~ 120킬로미터 정도 얼음 위를 걸어 새끼들을 키우는 군집장소까지 이동한다. 이 군집장소에는 최대 수천 마리의 개체들이 모인다. 성체 황제펭귄들은 노래를 통해 짝짓기를 하고, 암컷은 한 개의 알을 낳는다. 수컷은 암컷이 바다로 돌아가서 먹이를 충분히 먹고 돌아올 때까지 태양이 완전히 뜨지 않아 최대 -60℃까지 기온이 떨어지는 1개월을 포함하여 약 4개월간 알을 발등에 올려놓고 품는다. 이 기간동안 수컷은 수분정도만 섭취하며 버틴다. 알이 부화하면 수컷은 4개월간 위 속에 간직했던 물고기를 한 번 새끼에게 준다. 암컷이 돌아오면 수컷이 역할 교대를 하여 바다로 먹이를 섭취하러 나가며, 암컷이 새끼를 돌본다. 새끼가 성장하여 천적인 도둑갈매기로부터 안전해지면 한 곳에 모아 집단으로 관리한다. 펭귄의 새끼는 다른 조류와 마찬가지로 솜털로 덮여있는데, 성체가 되면 솜털이 빠지고 깃털이 나면서 수영에 적합한 상태가 된다. 황제펭귄의 수명은 야생에서 보통 20년 정도이지만, 기록에 따르면 일부 개체들은 50년까지 살 수 있다고 한다.
</p>
<p>
가끔 눈물을 흘린다. 눈물을 참을 수 없는 나 자신이 싫은 순간도 있다. 아픈 마음을 달래기 위해, 소리치며 울 수 있다는 건 좋은 거야. 그렇지? 눈물은 슬픔을 위한 것만은 아니니까.
<br/><br/>
난 눈물이 좋다.
아니, 머리가 아닌 <strong>마음으로 우는 내가 좋다.</strong>
</p>
-->
<!--링크 태그 실습
<a href="https://www.youtube.com/c/kimbug" target="_blank">
<h1>
Subscribe Kimbug
</h1>
<p>
이 배너를 클릭하시면 버그의 유튜브 채널로 이동합니다.
</p>
</a>
-->
<!--이미지 태그 실습
<img src="data:image/jpeg;base64,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"
alt="고래 사진이욤"/>
<img src="./images/whale.jpg" alt="있었는데요...">
-->
<!--목록 태그 실습
<h1>개발</h1>
<ul>
<li>웹 개발자</li>
<li>서버 개발자</li>
<li>프론트엔드 개발자</li>
<li>자바 개발자</li>
<li>안드로이드 개발자</li>
<li>iOS 개발자</li>
<li>파이썬 개발자</li>
<li>시스템,네트워크 관리자</li>
</ul>
<h1>급상승 검색어</h1>
<ol>
<li><a href="">김버그</a></li>
<li>프론트엔드 개발</li>
<li>구름</li>
<li>주니어개발자</li>
<li>Goorm</li>
<li>Frontend</li>
<li>개발</li>
<li>구름IDE</li>
<li>버그 킴</li>
<li>튕김버그</li>
</h1>
-->
<!--인용 태그 실습
<blockquote cite="https://edu.groom.io">
우리가 겪을 수 있는 가장 아름다운 체험은 신비다.</br>
신비는 모든 참 예술과 과학의 근원이다.
<cite>- 알버트 아인슈타인</cite>
</blockquote>
<blockquote cite="https://bit.ly/2mvSYrT">
<p>
The study is the first to project the long-term outlook for Antarctica's largest penguins, which can grow 1.2 meters (four ft) tall, seeking to fill a gap in understanding climate change and wildlife in one of the remotest parts of the planet.
</p>
<p>
Overall, numbers were set to fall by at least 19 percent from current levels by 2100 as sea ice melts. And two-thirds of colonies of the birds, which have distinctive golden head patches, would decline by more than half, it said.
</p>
<p>
<q>"It's not happy news for the emperor penguin," </q>said Hal Castellan of the U.S. Woods Hole Oceanographic Institution, a co-author of the study in the journal Nature Climate Change.
</p>
<p>
“Emperor Penguin Population to Slide Due to Climate Change”, Scientific American, June 29, 2014, https://bit.ly/2mvSYrT
</p>
</blockquote>
-->
<!--input label 태그 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form - Input</title>
<link rel="stylesheet" href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<label for="이름"> 이름</label>
<input type="text" id="이름" placeholder="이름을 입력하세요." maxlength="13" minlength="5"/>
</body>
</html>
-->
<!--input radio/checkbox 실습
<form action="" method="GET">
<input type="radio" name="subscription" value="1" id="subscribed"/>
<label for="subscribed">구독중</label>
<input type="radio" name="subscription" value="0" id="unsubscribed"/>
<label for="unsubscribed">미구독</label>
<button type="submit">
Submit
</button>
</form>
<h1>사용 가능 언어</h1>
<form>
<input type="checkbox" name="skills" value="html" id="html">
<label for="html">HTML</label>
<input type="checkbox" name="skills" value="css" id="css">
<label for="css">css</label>
<input type="checkbox" name="skills" value="js" id="js">
<label for="js">js</label>
<button type="submit">submit</button>
</form>
-->
<!--2020-06-01 Acver-->
<!--테이블 태그 실습
<table>
<thead>
<tr>
<th>ID</th>
<th>이름</th>
<th>개발분야</th>
</tr>
</thead>
<tr>
<td>00001</td>
<td>김버그</td>
<td>프론트엔드</td>
</tr>
<tr>
<td>00002</td>
<td>김아무개</td>
<td>풀스택</td>
</tr>
</table>
-->style.css
* {
margin: 0;
box-sizing: border-box;
font-family: 'Spoqa Han Sans', sans-serif;
}
html {
font-size: 16px;
font-family: 'Spoqa Han Sans', sans-serif;
letter-spacing: -.03em;
color: #212529;
}
body {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
h1 {
width: 360px;
font-weight: 100;
font-size: 32px;
line-height: 1.5;
margin-bottom: 1em;
color: #101010;
letter-spacing: -.05em;
}
label {
display: block;
width: 100%;
font-size: 12px;
line-height: 16px;
}
input {
display: block;
width: 360px;
height: 44px;
padding: 0 12px;
border-radius: 7px;
margin-bottom: 12px;
font-size: 16px;
border: 1px solid #d3dce6;
transition: border-color 200ms ease-in-out;
}
input:focus,
input:hover,
input:active {
outline: none;
box-shadow: none;
border-color: #1fb6ff;
}
input[type="file"] {
padding-top: 10px;
}
'Programming > html-css' 카테고리의 다른 글
| CSS 정리 (0) | 2020.06.26 |
|---|---|
| html 작성 tip 정리 (0) | 2020.06.04 |
| html tag 정리 - 2 (0) | 2020.06.04 |
댓글