HTML = 뼈대, CSS = 꾸미기
정적 웹페이지 : 회원가입, 로그인 등 없이 보기만 하는 것. 예를 들면 청첩장.
github 이용해서 html 배포하기
- repositories 중 배포할 거 선택.
- Settings > pages > Branch 선택 > 옆에 있는 Save 버튼 > 파일 선택(파일명은 반드시 index.html)
- 배포하고서 index를 수정하고 commit 해주면 수정되어서 배포된다.
웹의 동작 원리
- 브라우저의 역할 : 요청을 보내고, 요청한 파일을 받아 그려준다.
- 요청은 서버에서 만들어 놓은 API라는 창구에 보낸다. 창구는 예로 /naver.com 같은 형식이다.
Visual Studio Code
- 한글, Word 같은 프로그램. 코드를 짤 수 있도록 도와준다.
- 확장 기능인 Live Server를 이용해 변경사항이 실시간으로 브라우저에 적용되는 것을 볼 수 있다.
- Shift + Alt + F : 줄 정렬 되는 단축키
tags.html
- 수 많은 태그들이 존재하고 외우는게 아니라 복사해서 가져다쓰고 내 입맛에 맞춰 고쳐쓴다.
- 이하는 잘 모르는 태그들
<ul>
- <ul> 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용
- <ul> 요소에 속하는 각 아이템은 <li> 요소를 사용
- 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현
- CSS의 list-style-type 속성을 사용하여 마커의 종류를 변경
<hr>
- <hr>태그는 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용
CSS
- 지칭 할 수 있는 이름이 필요하다.
- class 선택자로 이름을 붙여줄 수 있다.
- <style>을 .css 파일로 분리할 수 있다. <head> 부분에 코드를 추가하면 된다.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">- 이하는 잘 모르는 태그들
box-shadow: 1px 2px 3px 4px grey:
- 박스에 그림자 효과를 주는 태그.
- 1px 부분은 오른쪽
- 2px 부분은 아래쪽
- 3px 부분은 사방으로
- 4px 부분은 그림자의 길이
- grey 부분은 색깔
'HTML, CSS, javascript' 카테고리의 다른 글
| 웹 프로그래밍 기초. 5 미니프로젝트, 배포하기 (0) | 2023.03.20 |
|---|---|
| 웹 프로그래밍 기초. 4 Flask, 미니프로젝트 (0) | 2023.03.19 |
| 웹 프로그래밍 기초. 3 Python, 크롤링, mongoDB (0) | 2023.03.18 |
| 웹 프로그래밍 기초. 2 javascript, jQuery, Fetch (0) | 2023.03.17 |