본 포스팅은 YBIGTA DA 19기 이은지님의 발제 자료를 바탕으로 작성되었습니다.
HyperText Markup Language
웹페이지의 구조를 정의하는 언어
웹페이지에 대한 메타 데이터
이 안에 작성한 재용은 사용자들에게 보여지지 않음
사용자들에게 보여지는 영역 중 가장 상위의 태그
사용자들에게 보여주는 모든 내용을 이 안에 작성
맥북의 경우 html 확장자 파일에 html:5
를 입력하면 다음과 같은 기본 구조가 자동으로 작성된다.
title
을 YBIGTA DA SESSION
으로 변경해주면
위와 같이 웹페이지 이름이 바뀐다!
각 요소를 하나의 태그로 나타냄
<p>My cat is very grumpy</p>
태그는 Opening tag
, Closing tag
, Content
세가지로 이루어져 있다.
위 예시에서는 <p>
가 Opening tag, </p>
가 Closing tag, My cat is very grumpy
가 Content이다.
여러 개의 태그를 중첩해 사용
<body>
<div> <!-- 부모 요소 -->
<h1>타이틀</h1> <!-- 자식 요소 -->
</div>
</body>
요소 각각에 속성을 지정 가능
class 속성
<p class="editor-note">My cat is very grumpy</p>
요소 각각에 이름을 붙여줄 수 있음
추후 css를 활용해 요소에 서식을 지정해줄 때 사용
이벤트 속성
<button onclick="alert('Hi!')">
Click!
</button>
요소에 특정한 동장(이벤트)이 발생했을 때 실행할 메소드 지정
섹셔닝
<SECTION>
,<article>
,<header>
본문 구성
h1~h6
Heading 제목용 태그
p 태그
Paragraph 본문용 태그로, p태그로 묶은 내용은 하나의 단락이 되며 단락 사이에는 자동으로 간격이 생김
ul, ol, li
ul: unordered list
ol: ordered list
li: <ul>
, <ol>
내부에 리스트 각 항목을 표시
img 태그, a 태그
과제해볼까?
를 누르면 런어스로 들어가집니다.. 과제 할 생각에 행복하네요 🥹
사용자의 동작을 감지하는 요소
button 태그
onclick 속성에 메소드를 지정하면 해당 버튼이 클릭되었을 때 메소드가 실행됨
onclick="메소드명"
input 태그
사용자로부터 정보를 입력 받을 때 사용
type 속성을 통해 입력 받는 정보 종류 지정 가능
ex. text, password, color, checkbox
placeholder 속성을 통해 입력창의 안내문구 지정 가능
Cascading Style Sheet
웹 페이지 내 요소들의 서식을 지정하는 언어
인라인 스타일
태그 각각에 스타일을 지정
<p style="color: white; background: royalblue"> 연세대학교의 상징색은 로얄블루입니다.</p>
내부 스타일시트
HTML <head></head>
안에 css를 작성
외부 스타일시트
별도의 .css 파일을 작성해 HTML <head></head>
부분에서 HTML 문서와 연결
요소의 너비와 높이를 지정 (div, img, button 등)
태그에 class 속성으로 태그별 이름을 설정, 그걸 활용해 원하는 요소를 골라 서식을 입힌다.
css 파일을 따로 작성해 link
를 통해 HTML과 연결해주었다. 절대단위인 픽셀을 이용해 각 버튼의 크기를 조정하였으며, 잘 적용된 모습을 확인할 수 있다.
특정 태그에 일괄적으로 서식 적용
margin, padding
요소의 여백을 설정 (바깥쪽, 안쪽)
상, 하, 좌, 우 네 방향을 한 번에 설정할 수도 있고, 방향마다 다른 크기로 설정할 수도 있음
margin: 20px;
/* 상, 하, 좌, 우 모두 마진 20px */
margin: 10px 20px 30px 40px
/* 시계 방향으로 위, 오른쪽, 아래, 왼쪽 순서 */
글자
배경