UIUX 디자이너, 프론트엔드 학습 일지
UIUX 디자이너, 프론트엔드 학습_기본 학습 본문
티스토리에서는 HTML, CSS, JS 학습했던 것들을 다시금 적어보면서 복습을 하고, 그 과정에서 궁금한 점들, 추가 학습이 필요한 것들에 대해 적어 내려 가며, 나의 역량을 키워보려 한다.
학습은 패스트 캠퍼스에서 제공해 주는 '한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online'을 들으면서 학습한 것을 토대로 적어보려 한다.
HTML / CSS / JS
HTML
페이지의 제목, 문단, 표, 이미지, 동영상 등의 웹의 구조를 담당한다.
CSS
실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현을 담당
JS
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당
HTML의 head와 body
<head></head> : 문서의 정보를 나타내는 범위
- 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은 웹 페이지의 보이지 않는 정보를 작성하는 범위
<body></body> : 문서의 구조를 나타내는 범위
- 사용자 화면을 통해 보이는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹 페이지의 보여지는 구조를 작성하는 범위
CSS와 JS를 HTMl에 연결하는 방법
CSS를 HTML에 연결할 때는 link를 사용한다.
- <link rel="stylesheet" href="./main.css">
JS를 HTML에 연결할 때는 script를 사용한다.
- <script src="./main.js"></script>
정보를 의미하는 태그들
- <title></title>는 HTML 문서의 제목을 정의한다. 해당 제목은 웹 브라우저 탭에 표시되는 제목을 의미한다.
- <style></style>은 스타일(CSS)을 HTML 문서 안에서 작성하는 경우에 사용한다.
상대 경로와 절대 경로
- 상대 경로
- 상대 경로는 현재 파일의 위치를 기준으로 연결하려는 파일의 상대적인 경로를 적는 것을 의미한다.
- ./ : 현재 위치의 폴더를 의미
- ../ : 현재 위치의 상단 폴더를 의미
- 절대 경로
- 파일의 루트부터 해당 파일까지의 전체 경로(url)를 의미한다.
'프론트엔드 학습' 카테고리의 다른 글
| UIUX 디자이너, 프론트엔드 학습_CSS 04 (0) | 2024.03.30 |
|---|---|
| UIUX 디자이너, 프론트엔드 학습_CSS 03 (0) | 2024.03.30 |
| UIUX 디자이너, 프론트엔드 학습_CSS 02 (0) | 2024.03.30 |
| UIUX 디자이너, 프론트엔드 학습_CSS 01 (0) | 2024.03.30 |
| UIUX 디자이너, 프론트엔드 학습_HTML (0) | 2024.03.23 |
'프론트엔드 학습' Related Articles
more
