내일배움단 기초학습 1일차 Front-end [HTML,CSS]

wish17·2022년 10월 18일
0

내일배움단

목록 보기
1/7

내용정리

head의 역할

웹페이지의 이름이나 아이콘, 꾸미기(CSS)나 움직이기(자바스크립트) 전부 head에 들어가며,
링크를 공유했을 때 뜨는 이미지와 이름도 head

body의 역할

창의 화면부분에 들어가는 모든것들

태그는 전부 외우는게 아닌 가져다 쓰는 거

자주쓰는 태그 설명

div(division)

여러가지 구성을 가운데로 정렬하고 싶을 때 하나씩
하면 귀찮으니 한번에 묶어 옮길 때 쓰는 태그

p(paragraph)

문단

bullet point

ㆍ문장1 << 이거 표시할 때 뜨는 거
ㆍ문장2

h1

제목
cf)페이지마다 하나씩 써주면 구글에서 검색 잘 됨

h2~h6

이것도 각자 역할은 있지만 지금은 점점 작아지는
글씨구나 정보로 생각해도 상관 없다.

span

글자를 꾸밀 때 씀 어떤 글의 특정 부분 색을 바꾸는 등 꾸밀 때 쓸 수 있다.

a태그

하이퍼링크 기능

hr

가로선

소스코드 바꿔보기

Wish개발일기 | HTML 기초
div = 구역 나누기

p = 문단

  • ul+li: bullet point!1
  • ul+li: bullet point!2

h1 = 제목을 나타내는 태그

h2는 소제목

h3~h6도 각자의 역할이 있다. but 비중은 적음


hr= 밑줄로 단 나누기
span 태그: 특정 글자를 꾸밀 때 씀
a 태그: 하이퍼링크
img 태그:

input 태그:


button 태그: 버튼입니다
textarea 태그:

웹에서는 이미지 크기조절 됐는데 블로그에서는 안되는 것 같다...

위 기능들중에 필요한 기능을 사용해 로그인 화면을 간단하게 만들어 보았다.

로그인 페이지 만들기

위 내용들을 숙지하고 제공받은 소스코드에서 이미지를 바꾸는 등 직접 사용해봤다.

로그인 페이지

로그인 페이지

아이디, 비밀번호를 입력해주세요

ID:

PW:

로그인하기

0개의 댓글