비주얼 스튜디오 코드(Visual Studio Code)
- 마이크로소프트에서 만든 개발환경으로 프로그램으로, 좋은 확장프로그램* 들이 많이 들어있음
*Live Server : vs코드에서 수정한 것을 바로바로 보이게 하는 확장프로그램
- shift + alt + f : 코드 자동정렬
- ctrl + / : 주석, 메모(화면에는 보이지만 컴퓨터는 읽지 못함)
- * : 모두 다 의미함
html
head와 로 body로 구성
1. head
- 페이지의 속성 정보
- 눈에 안 보이는 필요한 것들을 담는 것
- 대표적인 요소들: meta, script, link, title
- 필요한 스크립트들을 부름
- css / java script도 head로 들어감
2. body
- 페이지의 내용
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1 제목을 나타내는 태그, 페이지마다 하나씩 꼭 써줘야 구글 검색이 잘 됩니다.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>CSS
- <head></head> 안에 <style></style> 로 공간을 만들어 작성
- 명찰 달아주기 필수!
- css로 꾸미려면 대상 지정할 수 있는 이름(명찰)이 있어야함 (ex. 짱구의 바지 색을 바꾸려면 '짱구의 바지'라는 명찰이 있어야 함)
- 같은 명찰 달아주면 같이 변경됨
- <body>에 class로 지정한 mytitle라는 명찰(class="mytitle") 을 가리킬 때, css는 <style>에 ".mytitle { ... }" 라고 꼭 써줘야 함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.mytitle { }
<style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
</body>
</html>배경이미지 설정(아래 3개 같이 다님)
- background-image: url(''); // 이미지주소
- background-position: center; // 이미지 중앙으로
- background-size: cover; // 이미지 사이즈 꽉 차게
div 안 내용물 정렬하는 방법
- display: flex; // flex 레이아웃을 적용
- flex-direction: column; // 내부 요소들의 정렬 방향은 세로방향
- align-items: center; // 축 수직 방향 정렬 중 가운데
- justify-content: center; // 축 수평방향 정렬 중 중앙
유용한 css
- border-radius: 10px; // 모서리 10px 둥글게
- text-align: center; // 글자정렬 중앙
- margin: 0px 0px 0px 0px; // 바깥 여백(시계방향 위-오-아-왼), auto 넣으면 쭉 밀어라 임
- padding: 0px 0px 0px 0px; // 안쪽 여백(시계방향 위-오-아-왼), auto 넣으면 쭉 밀어라 임
- border: 1px solid white; // 테두리 1픽셀 + 실선 + 흰색
- box-shadow: 0px 0px 3px 0px red; // 그림자효과, 우/하0px, 길이3px, 크기0px, 빨간색
- .mytitle > button // 마이타이틀 아래있는 버튼을 지정함
- .mytitle > button:hover // 버튼에 마우스 올리면 변화됨
파일분리
- <style> ~ </style> 부분이 너무 길어 보기가 어려울 때 사용
- style.css 파일을 같은 폴더에 만든 후 html파일 head 태그에서 아래 내용 작성해 불러오기
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">라이브러리(Library)
누군가가 작성한 코드 조각
부트스트랩
가장 유명한 css 꾸러미
Github(깃허브)
- 인터넷에 코드를 업로드할 수 있는 사이트, 협업 및 코드 관리에 활용함
- 깃허브로 배포할 때는 반드시 파일 1개 그리고 파일 이름이 index.html이여야 함
'⛵ 항해99 > 개강준비' 카테고리의 다른 글
| [JavaScript 문법] 프로그래머스_3일차 (0) | 2023.07.31 |
|---|---|
| [JavaScript 문법] 프로그래머스_2일차 (0) | 2023.07.28 |
| [JavaScript 문법] 프로그래머스_1일차 (0) | 2023.07.27 |
| [JavaScript 문법] 2주차 (0) | 2023.07.26 |
| [JavaScript 문법] 1주차 (0) | 2023.07.26 |