UI/UX 공부기록
[사전캠프 3주차] 목요일 TIL 본문
10/17 일일 목표📝
웹/앱 클론만들기
특강 듣기
📖 오늘 배운 내용!
기본적인 웹 개발 구조 정리
HTML이란?
Hyper Text Markup Language
웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 기능을 가진 문서를 만드는 언어
HTML의 구조
1. <!DOCTYPE html>
웹 사이트를 만들 때 제일 처음으로 써야하는 부분.
2. <html>
우리가 만드는 코드를 감싸는 큰 틀. 내용은 모두 이 안에 들어가야 함
3. <head>
웹사이트에 대한 정보들 (제목, 글꼴, 색상 등) 설정들이 들어감
사이트에서는 보이지 않지만 중요한 역할을 하는 내용들이 들어감
4. <body>
웹사이트에서 눈에 보이는 것들이 들어가는 부분.
우리가 실제로 보는 컨텐츠들이 이 안에 들어감
태그란?
- tag는 html에서 웹페이지 구조를 정의하고 다양한 요소들을 표시하는 데에 사용되는 기본단위
- 브라우저에서는 태그는 생략되고 내용만 보여진다.
- 텍스트의 구조를 잡고, 이미지나 링크를 삽입하거나 보여지는 요소들을 정의한다.
- html에서는 태그를 소문자로 작성한다.
<p> : 여는 태그 (p는 문단을 나타낸다)
</p> : 닫는 태그 (태그의 끝을 알려줌)
<p>표시되는 내용이 들어감</p>
태그의 속성
<a> 태그는 href 속성을 사용해서 링크를 타고 이동할 수 있게 해줌
<a href="링크"> </a>
셀프 클로징 태그
일부 태그는 닫는 태그가 필요 없고, 셀프로 가능하다.
<img src="이미지" alt="설명" />
CSS와 JavaScript
html이 뼈대라면 CSS와 JavaScript는 웹사이트를 예쁘게 꾸미는 용도이다
CSS : 글자크기, 색상, 배치 등을 조정해준다
위의 예시에서 CSS는 <style> 태그 안에 들어가며, h1 제목은 파란색이고, p문단은 회색으로 설정했다
JavaScript : 버튼을 클릭하면 무언가 바뀌거나, 자동으로 일이 처리되도록 해줌
버튼을 누르면 "여기를 바꿔보세요" 텍스트를 "버튼을 눌렀어요!" 로 바뀌게 설정했다.
👩🏫 오늘 진행하며 어려웠던 부분
HTML에 대해서 들어보기만 했는데 실제로 공부하고 구조를 알아보니 복잡했다.
실제로 코드 구조가 head, body로 나눠지는 것부터 css와 javascript로 꾸미면서 웹사이트가 구성된 것이었다니 정말 개발은 복잡하구나 싶었다...👨💻
👀 어려웠던 부분을 어떻게 해결했을까?
TIL에 특강에서 배운 내용들을 정리해보면서 주신 자료를 한번씩 다시 읽어보고, 파일을 통해서 코드를 실제로 입력해보고 무신사도 다시 들어가서 개발자코드를 확인하면서 실습해보니 그래도 HTML에 대해서 이제 낯가림 할 일은 없어진 것 같다!!! 재밌어서 더 배우고싶어졌다
'사전캠프' 카테고리의 다른 글
| [사전캠프 3주차] 금요일 WIL (0) | 2024.10.18 |
|---|---|
| [사전 캠프 3주차] 수요일 TIL (0) | 2024.10.16 |
| [개인 과제] 컴포넌트 만들기2 (0) | 2024.10.16 |
| [사전캠프 3주차] 화요일 TIL (0) | 2024.10.15 |
| [개인 과제] 컴포넌트 만들기1 (0) | 2024.10.15 |
