Alchemist
[002] HTML + CSS 본문
백엔드 엔지니어와 프론트엔드 엔지니어의 원활한 협업을 위해 프론트엔드 기술을 학습하는 기회를 가져보게 되었다.
HTML : Hyper Text Markup Language의 약자로, 웹 페이지를 구성하는 마크업 언어.
마크업 언어란 Tag등을 이용하여 문서나 데이터의 구조를 기록하는 언어의 한가지이다.
<!DOCTYPE html> : 작성된 문서가 HTML5로 작성됨을 명시
<head> : HTML 문서의 메타데이터(metadata)를 정의.
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미.
<title> : HTML 문서의 제목(title)을 정의함
- 웹 브라우저의 툴바(toolbar)에 표시됨
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분.
<h1> ~ <h6> : 제목(heading)을 나타냄
<p> : 단락(paragraph)을 나타냄
시작 태그로 열어주고, 종료 태그로 닫아준다. (img 등의 태그처럼 종료 태그 없이 시작 태그만을 가지는 경우도 존재)
--------------------------------------------------------------------------------------------------------------------
CSS : Cascading Style Sheets의 약자로 HTML로 작성된 웹 애플리케이션의 구조에 디자인을 적용하는데 사용함.
셀렉터를 이용하여 특정 요소를 선택한 후, 중괄호 안에서 해당 요소에 적용할 내용(속성들)을 작성할 수 있음.
<link> 태그를 이용하여 CSS파일과 HTML 파일을 연결하여 속성을 추가할 수 있으며, 별도의 파일로 분리하지 않고 HTML 태그에 직접 CSS 속성을 추가할 수도 있으나, 관심사 분리 측면에서 권장하지 않음.
셀렉터 종류를 통해 원하는 요소에 접근해 한개의 요소 또는 여러가지 요소를 한번에 바꿀 수 있음.
'코드스테이츠 백엔드 부트캠프' 카테고리의 다른 글
| 06/29일부 Notion으로 플랫폼 이동 공지 (0) | 2022.09.26 |
|---|---|
| [001] 컴퓨터와 프로그래밍 + 웹 (0) | 2022.06.24 |
| [코드스테이츠] 백엔드 부트캠프 2기 (0) | 2022.06.11 |
