[강의] 다음은 패스트 캠퍼스 DevOps 운영 패키지를 통해 학습 및 정리한 내용입니다.
목차
1. HTML
2. CSS
오늘은 주문 이후 주문과 관련된 내용들을 HTML과 CSS 구조로 페이지를 구성하는 실습이 진행되었다. 프론트 엔드의 요소에 대해서는 배운 적이 없었기에 관련 내용들을 정리해본다.
HTML
HTML는 Hypertext Markup Language이다. Hypertext는 웹 페이지를 이동할 수 있는 기능을 의미하고 Markup Language는 태그 등을 이용하여 문서나 데이터 구조를 만드는 언어를 의미한다. 즉 HTML은 브라우저를 통해 이동할 수 있는 웹페이지의 구조를 만들 수 있는 언어이다.
HTML을 만들기 위해서는 태그(요소)를 통해 문서를 작성해야하고, 태그에도 여러가지 역할이 다르기 때문에 구상에 맞춰 입력을 해주어야한다.
CSS
CSS는 Cascading Style Sheets이다. Cascading은 계단 모양의 폭포로 쏟아지면 다시 올라올 수 없는 특징을 갖는다. 즉 우선순위가 적용되는 스타일이라는 말이다. 우선순위는 중요도, 명시도, 코드의 순서로 적용되어지는데 이 부분은 후에 다시 정리를 해봐야겠다.
그래서 CSS는 HTML과 같은 문서의 스타일을 꾸미는 기능을 하는데, 꾸밀 수 있는 스타일에는 글꼴, 배경색, 너비, 위치 등이 있고 브라우저나 스크린 크기에 따라 다르게 표시할 수 도 있다. 이를 위해 속성을 부여하거나, tag를 이용하는 방법 그리고 CSS 파일을 작성하는 방법이 있다.
먼저 첫 번째로, 속성을 부여하는 방법은 HTML 태그에 속성명과 속성값을 넣어 적용하는데 이를 인라인 스타일이라고 한다.
두 번째로, tag를 이용하는 방법은 HTML 문서 내 <head> 태그 사이에 <style> 태그를 사용해 적용하는데 해당 html 문서에서만 스타일을 적용할 수 있다. 이는 내부 스타일 시트라고 불린다.
마지막 세 번째는 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있는 것으로 css 확장자를 사용해 저장하고 <head> 태그 사이에 <link> 태그를 사용해 외부 스타일 시트를 포함시켜 스타일을 적용한다. 이를 외부 스타일 시트라고 불리운다.
스타일 적용 방법을 혼용해서 적용할 수 있는데 적용의 우선 순위는 인라인 스타일, 내부 및 외부 스타일, 웹 브라우저 기본 스타일 순으로 적용된다.
수강료 100% 환급 챌린지 | 패스트캠퍼스
딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'DevOps > Cloud' 카테고리의 다른 글
| 패스트캠퍼스 챌린지 20일차 (0) | 2021.11.20 |
|---|---|
| 패스트캠퍼스 챌린지 19일차 (0) | 2021.11.19 |
| 패스트캠퍼스 챌린지 17일차 (0) | 2021.11.17 |
| 패스트캠퍼스 챌린지 16일차 (0) | 2021.11.16 |
| 패스트캠퍼스 챌린지 15일차 (0) | 2021.11.15 |
