1.학습 주제
- 웹이란?
- HTML
- CSS
2.주요 메모 사항 소개
웹이란?
- www(World Wide Web) 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
- 특징: 정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결, 제공
- 클라이언트와 서버
- 클라이언트: 서비스를 이용하는 컴퓨터
- 서버: 서비스를 제공하는 컴퓨터
- 프론트엔드와 백엔드
- 프론트엔드: 웹 서비스에서 사용자 측면의 그래픽 사용자 인터페이스로, 사용자와 상호작용을 담당
- 백엔드: 웹 서비스에서 서버측에서 프론트엔드로부터 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전송
- 웹의 구성
- HTML: 웹 페이지 구성 요소들의 구조
- CSS: 웹 페이지 구성 요소 스타일
- Javascript: 웹 페이지 구성 요소들에게 상호작용
HTML
- Hyper Text Markup Language의 약자로 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어
- <>(태그): 웹 페이지의 구성 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>설명용 HTML</title>
</head>
<body>
<h1>제목</h1>
<form>
<input type="text">
<br>
</form>
<a href="https://google.com">구글로 가기</a>
</body>
</html>
<!--주석처리-->- <!DOCTYPE html>: html문서임을 나타내는 태그
- <html>: html 문서을 시작을 알리는 태그
- <head>: 웹 페이지의 보이지 않는 정보를 적는 태그. 실제 웹페이지에 보이지 않음.
- <meta>: 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용. 위 코드에서는 해당 문서의 문자 인코딩 방식을 UTF-8로 명시
- <title>: 문서의 제목을 나타내는 태그
- <body>: 실제 웹페이지 보이는 정보를 적는 태그.
- <h1>~<h6>: 제목을 나타내는 태그. h1일 수록 크고 h6일 수록 작다.
- <form> : <input>에 들어간 데이터를 넘겨주는 태그.
- <input> : 값을 입력받을 수 있는 태그. type에 따라 형태가 달라진다.
- type="text": 한줄로 된 택스트 필드를 정의
- type="password": 비밀번호를 입력받는 필드를 정의, ● ● ● ● ● 형태로 나타난다.
- type="button" : 버튼을 생성한다.
- <a href="주소"> 주소로 보내는 하이퍼링크를 생성한다.
- <!--주석-->: 주석처리하는 방법
CSS
- Cascading Style Sheets의 약자로 HTML에 스타일을 입히는 언어
- 적용방식
- 인라인 : 태그 내부에 스타일을 입력하는 방법
<h1 style="color:red">TEST</h1>- 내부 스타일 시트: 태그 밖으로 빼냈지만 html안에 입력하는 방법
<!DOCTYPE html> <head> <meta charset="UTF-8"> <style> h1{ color:red; } </style> </head> <body> <h1>TEST</h1> </body> </html>- 외부 스타일 시트: 아예 CSS 파일을 따로 만들어 적용하는 방법
<!DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>TEST</h1> </body> </html>h1{ color:red; }/*주석처리*/ - 스타일을 여러 개 넣고 싶을 경우 ;을 사용한 후 잇는다.
- 스타일은 태그만이 아니라 이름을 붙여서 적용할 수 있다.
- id: 오직 하나만 사용가능. 스타일을 #id명으로 시작해야함.
- class: 여러개 중복가능. .클래스명으로 시작해야함.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
.test1{
color:blue;
font-size:20px;
}
#test2{
color:green;
}
</style>
</head>
<body>
<h1 class="test1">클래스 시험</h1>
<h2 class="test1">클래스 시험</h2>
<h3 id="test2">아이디 시험</h3>
</body>
</html>
3. 공부하며 느낀점
웹 페이지를 만지니까 이제 좀 출발선에 선 느낌이 들었다.
4.출처
'프로그래머스 데브코스' 카테고리의 다른 글
| [클라우딩 어플리케이션 엔지니어링 TIL] 9. 백엔드 기초 (0) | 2024.04.22 |
|---|---|
| [클라우딩 어플리케이션 엔지니어링 TIL] 8. 웹 프론트엔드 기초(2) (0) | 2024.04.19 |
| [클라우딩 어플리케이션 엔지니어링 TIL] 6. 클라우드 컴퓨팅 (0) | 2024.04.17 |
| [클라우딩 어플리케이션 엔지니어링 TIL] 5. 소프트웨어 공학 (0) | 2024.04.17 |
| [클라우딩 어플리케이션 엔지니어링 TIL] 4. 컴퓨터 네트워크 (1) | 2024.04.17 |
