-
웹 프로그래밍 (12/ 15일) 개발일지스파르타 부트 캠프/TIL 2021. 12. 20. 20:38
ㅇ 웹프로그래밍 정리 ㅇ
배운 내용 및 목차
- HTML, CSS 기본내용
- 폰트, 주석, 파일 분리
- 부트스트랩
1. HTML, CSS 기본내용
HTML의 전체 구조는
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>다음과 같으며 크게 <head>, <body>로 나누어 진다.
<head>는 해당 html에 관한 설정 내용이 들어가며 <meta>, <title>, <script>, <style> 등이 사용된다
<body>에서는 실제 웹사이트에서 보여지는 것들이 들어가게 된다. 박스, 버튼, 배너 등등
ex) <div>, <h1>, <li>, <table>, <ul>, <p>, etc..
각 태그 관련해서는 이후에 정리하도록 하겠다.
2. CSS 기본 내용
-- CSS는 Cascading Style Sheets 의 약자로 웹사이트들의 구성들을 꾸며주는 역할을 한다.
예를 들어 버튼이라는 구성품을 만들었을 때 가로와 세로의 크기는 어떻게 할 것인지 색상은 무슨 색깔로 할 것인지 등등 디자인과 관련된 요소라고 생각하면 되겠다
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>웹사이트 제목!</title> <style> <!--해당 부분 부터 CSS 작성 시작--> </style> </head> <body> </body> </html>다음 처럼 <head>안에서 <style> 태그를 지정하여 사용할 수있으며
해당 태그 안에서는 선택자(Selector)를 이용하여 꾸미고 싶은 부분을 선택하고 내부에서 딕셔너리 형태로 값을 준다
자세한 내용은 이후에 정리할 예정
추가로 지금처럼 하나의 HTML 문서에 넣어도 상관은 없다만 나중에 유지 및 보수 또는 수정할 때 각 파일들 마다 바꿔줘야하므로 간단한 방법이 아니면 파일을 분리하는 방법이 좋다.
3. 폰트, 주석, 파일 분리
폰트같은 경우 CSS에 해당하는 내용인데 전체 폰트를 바꾸는 방법이다. GoogleFont에 있는 폰트를 URL로 연결하여 해당 HTML 글자를 전부 바꾸는 방법으로 진행이 됨 따라서 해당 링크를 잘 입력하는 것이 중요하다. CSS를 사용하기 때문에 추후에 다른 방법으로 수정하는 것이 가능함
HTML 주석은 다른 언어와 는 다른게 ( 당연히 다름 ) <!-- 주석 내용 --> 이렇게 작성한다. python의 경우 #, 아두이노의 경우 // 이라서 매우 편하게 바꾸지만 HTML은 사용되는 문자가 많아 단축키로 바꾸는 것이 불편하다
파일 분리에 대해서는 부트스트랩을 이용하는 방법이 주가 된 것 같다
프로젝트를 진행하면서 생기는 여러 HTML파일들에 대한 분리가 아니라 부트스트랩을 사용하는 방법이 맞는듯
4. 부트스트랩
부트스트랩은 웹상에서 만들 수 있는 디자인을 미리 만들어 놓은 것으로 웹사이트를 만들면서 디자인이 부족하거나 다자인 하는 시간을 줄이기 위해 사용된다. 미리 만들어놓은 코드를 복사 붙여넣기하여 만들 수 있으며 추가로 세부적인 내용도 수정할 수 있다. 강의에서는 부트스트랩에 나와있는 코드를 그대로 복사, 붙여넣기하여 사용하였지만 조금더 찾아본 결과 class를 지정하면서 사용할 수 있고 부트스트랩 수업이 따로 있는 걸로 보아 이를 적절히 이용하면 웹사이트를 가지 않아도 내 HTML파일에 부트스트랩 css파일이 연결되어 있다면 바로 사용할 수 있다.
PS 개발일지를 처음 작성을 하는거라 어떻게 작성을 해야할지 경향이 없다 개념을 설명하면서도 느낌점을 말하고 있는 것 같다. 목적이나 글에 대한 목표도 어수선하고 조금 더 나눠서 정리를 해야 겠다 .
'스파르타 부트 캠프 > TIL' 카테고리의 다른 글
TIL - 12월 25일 (0) 2021.12.26 TIL - 12월 24일 (0) 2021.12.25 12월 23일 (0) 2021.12.23 12월 22일 - TIL (0) 2021.12.22 12월 20일 - TIL (0) 2021.12.20