웹 사이트의 구성원리
사용자가 브라우저를 켜서 주소를 입력
브라우저는 알파벳으로 되어있는 네이버 주소를 실제 숫자로 이루어져 있는 주소로 변경
숫자주소를 가지고 실제 네이버에게 컨텐츠 요청
이때 웹페이지를 요청하게 되면 네이버서버에서 브라우저에게 코드를 전달
브라우저가 받은 코드를 해석해서 사용자에게 페이지를 보여줌
웹사이트를 만든다는 것은 코드를 작성하는 것
위 이미지로 보면 웹사이트를 만든다는 것은 네이버가 전달해주는 코드를 작성하는 일을 말함
게시판 리스트 만들기
- 대부분의 태그는 여는태그(<div>)와 닫는태그(/<div>)로 이루어져 있음
<head>: 페이지를 구성하는데 필요한 CSS, JS 정보를 담는 곳
<body>: 웹 페이지에 표현할 내용이 들어가는 공간
VsCode tip: 편집기 파일명 오른쪽에 동그라미 표시가 있는 경우 파일이 저장되지 않았다는 의미이기 때문에 꼭 윈도우: 컨트롤 S 또는 맥: 커맨드 S를 눌러 저장해야 함
<table>
<thead>
<tr>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>게시글1</td>
<td>이소현</td>
<td>2022.11.16</td>
</tr>
</tbody>
</table><table>: 표
<thead>: 표를 만들때 head를 표현하는 태그
<th>: 헤더로 쓰는 태그, 자동으로 bold(굵은 글씨)가 됨
<tr>: 행을 의미
<td>:그 안에 하나의 셀을 의미
<table style="width:500px;">- CSS는 값을 할당할때는 :을 사용하고, 적용한 뒤에는 마지막에 세미콜론(;)을 꼭 붙여야 함
width: 가로길이를 의미
px: 픽셀의 약자. 화면을 구성하는 단위. 웹페이지를 만들때 쓰는 단위
<head>
<style>
.my-table {
width: 500px;
}
</style>
</head>
<body>
<table class="my-table">- 스타일 부분에 클래스 이름을 지정해서 스타일을 지정할 수 있음
클래스를 생성하여 CSS를 적용할때는 .classname {} 형태로 작성해야 함
클래스 의미를 가진 태그는 중괄호({}) 안에 있는 스타일을 적용하겠다라는 의미
.my-table {
width: 500px;
border-collapse: collapse;
}
.my-table tr {
border-bottom: 1px solid #000000;
}
.my-table td{
padding: 5px;
}
.text-center {
text-align: center;
}.my-table tr: .my-table은 클래스 속성값에 my-table이 있는 태그라는 뜻인데 tr처럼 앞에 .이 없으면 태그 이름을 의미
즉 .my-table tr은 my-table 클래스 속성을 가진 태그 아래에 tr태그
border-collapse: tr태그에 border를 적용하기 위해서 필요한 속성 값
border-bottom: border은 테두리를 의미하는 속성값, border-bottom은 아랫줄 테두리를 의미
위에 1px solid #000000;를 예시로 보면 1px에 검은색 실선을 아랫줄
padding: 내부 여백을 의미
text-align: 문자열의 정렬, center로 하면 가운데 정렬이 됨
HTML 기본
CSS 기본
CSS는 웹 페이지의 레이아웃을 표현하는 HTML에 스타일을 적용할때 사용함
CSS는 HTML과 같은 마크업 언어로 작성된 문서의 "표시 방법"을 기술 위한 스타일 시트 언어
스타일은 예시와 같이 텍스트의 색상을 포함하여 배경색, 테두리 등을 지정할 수 있음
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue">헬로우 월드!</h1>
<p style="color: red">이것은 나의 첫번째 CSS예제</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>헬로우 월드!</h1>
<p>이것은 나의 첫번째 CSS예제</p>
</body>
</html>→ HTML과 분리하여 작성
color: 색깔을 표현하는 여러가지 방식이 있는데
보통 #00ff00; rgb(214, 122, 127); 방식을 많이 사용
font-size: 다양한 표시 방법이 있음
1.2em; 12px; 80%;
가이드문서 링크: https://developer.mozilla.org/ko/
부트스트랩
웹사이트 구축 프레임 워크
부트스트랩은 조금 더 편하게 반응형 웹 구현을 도와줌
또한 디자인을 편하면서도 예브게 할 수 있도록 편의성을 제공
부트스트랩 링크: https://getbootstrap.kr/
'기초 > 웹 개발 왕초보 입문' 카테고리의 다른 글
| 2주차_서버와 통신하기 3 (0) | 2022.11.30 |
|---|---|
| 2주차_서버와 통신하기 2 (0) | 2022.11.30 |
| 2주차_서버와 통신하기 (0) | 2022.11.28 |
| 1주차_화면만들기 3 (0) | 2022.11.23 |
| 1주차_화면만들기 2 (1) | 2022.11.21 |
댓글