티스토리 뷰
HTML / CSS
- HTML(Hyper Text Markup Language)
: 웹 페이지를 연결하는 기능을 가진 텍스트 / 웹 페이지의 구조를 명시하는 언어
: < > 괄호를 사용한다 -> 태그 / 웹 페이지의 구성 요소 하나하나로 역할을 하게 된다.
ex) <태그>안녕하세요.</태그> / 여는 태그와 닫는 태그가 한 쌍일 수도 있고, 닫는 태그 없이 단독으로 쓰이는 경우도 있다.
- CSS(Cascading Style Sheet)
: 웹 페이지 구성 요소들을 꾸미는 역할
: 글자 크기, 색상, 폰트, 정렬 등 구성 요소들을 꾸며 예쁘게 만들 때 사용한다.
모든 html 문서는 <!DOCTYPE html> 로 시작한다!
그 다음, <html></html>로 전체적으로 감싸준다.
<head></head>에 들어갈 내용은 화면에 보이진 않지만 인터넷 창의 제목이라고 생각하면 편할 것 같다.
<title>첫 번째 HTML</title> 로 적으면,
이런 식으로 페이지의 제목으로 뜨게된다.
<body></body> 같은 경우엔 본격적으로 화면에 보이는 내용들이 들어간다.
Hello, html! 로 적었을 경우 화면에 그대로 뿌려지게 되어,
이렇게 그대로 보이게된다!
<a> 태그는 하이퍼링크 처럼 사이트를 연결해주는 역할을 한다.
<a href="https://~~~.co.kr">Programmers</a>
이렇게 쳤을 경우 Programmers 라는 텍스트를 눌렀을 때 해당 사이트로 연결되게 해준다!
<a href="first.html>My First Page</a>
이렇게 쳤을 경우엔 내가 이전에 만들었던 first.html 주소를 My First Page 가 대신하여
텍스트를 눌렀을 경우 first.html 페이지가 열리게 되는것이다.
이처럼 링크라는 걸 알려주기 위해 텍스트 아래에 _______ 줄과 함께 생성되는 걸 볼 수 있다.
자, 이제 간단한 로그인 화면을 만들어보겠다.
title 제목은 LOGIN으로 만들고, body 엔 큰 제목과 form 태그를 사용해 로그인 박스를 만들 것이다.
<input> 태그는 다른 태그들과 다르게 닫는 태그가 없다. type 을 사용해 이 form 을 어떤 형태로 만들 것인지 정할 수 있다.
ID 와 같이 텍스트로 보여야 할 땐 text 타입을 사용하면 되고,
PW 와 같이 보이면 안될 텍스트가 있을 경우엔 password 타입을 사용하면 된다.
개인적으로 로그인 시, 박스 안에 타이핑을 하지 않았을 경우 보이는 placeholder를 좋아하는 편이다.
그래서 placeholder에 각자, 아이디 및 비밀번호를 입력해주세요 라는 문구를 적어보았다.
결과는 이렇다! 어디에서나 볼 수 있는 그런 기본적인 로그인 화면이라고 생각하면 될 것 같다!
여기서 다른 점은, ID는 text 타입으로 만들어졌기 때문에 텍스트가 그대로 보이고,
PW는 password 타입으로 만들어졌기 때문에 흔히 보는 비밀번호 형태가 보일 것이다.
우리가 흔히 봐왔던 로그인 창은 이런 식으로 만들어 진다고 보면 되겠다 :)
사실 저 '로그인하기' 버튼은 눌러도 소용이 없다.
서버와 연결이 된 것도 아니고 어떤 정보를 받는 지 조차 해놓지 않은 상태기 때문이다.
내일은 CSS로 html를 꾸며 예쁘게 제작하는 걸 해볼 예정이다!
확실히 퍼블리싱을 몇 번 해봤던 본인은 html 할 때가 젤 재밌는 것 같긴하다.. 짱👍
'웹 개발 공부하기' 카테고리의 다른 글
| [11.08] 간단한 페이지 만들기 & 백엔드의 시작❗ (3) | 2024.11.08 |
|---|---|
| [11.07] HTML을 꾸며주는 CSS와 Javascript😍 (2) | 2024.11.07 |
| [11.05] 협업Tool에 대해 알아보자🧐 (3) | 2024.11.05 |
| [11.04] 브랜치 생성 및 삭제해보기🤨 (0) | 2024.11.04 |
| [11.04] 브랜치가 뭐야? & merge 실습🤩 (1) | 2024.11.04 |