html / css / java script 를 배우게 되었다.
학교에서는 따로 배워본 적이 없고, 프로젝트를 진행할 때 부트스트랩에서 템플릿을 적용할 때 잠깐 써본게 다라
여기저기 찾아보며 템플릿을 연결했었는데 이렇게 제대로 공부하는건 처음이라서 좋았다.
html / css / java script 에 대해 간단히 설명해 보자면,
웹이라는 집을 구성할 때,html 은 집의 구조 , css 는 집의 인테리어 , java script 는 집의 기능이라고 볼 수 있다.
위 세 가지 요소 중, 오늘은 웹 프로그래밍의 시작으로 html에 대해 알아보았다.
<vs code>
1. Live Server
시작 전, vs code에서 Live Server라는 익스텐션을 설치하였다.
Live Server는 vscode에서 작업 중인 html를 저장하기만 하면 , 웹 페이지를 새로고침 하지 않아도 자동으로 업데이트되어 현재의 모습이 반영된다.
작동 방법은 원하는 html 파일을 우클릭 한 뒤, 다음 이미지와 같이 Open with Live Server를 하는 것이다.
2.Prettier
두번째로 prettier를 설치해주었다. 저장만 하면 코드를 알아서 예쁘게 정렬시켜주기 때문에 굉장히 편하게 쓰고 있다.
< HTML >
1. 개념
- Hypertext Markup Language의 약자 = 마크업 언어 = 태그를 이용해 구조화하는 언어
- 반드시 <! DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정해야 함
➡️ vs code에서 ! 를 쳐서 html 기본 구조를 자동완성 시킬 수 있다.
➡️ 따라서 실제 html 문서는 2행부터 시작되며, <html>과 </html> 사이에 작성한다.
- 크게 <head> 태그와 <body> 태그로 나뉜다.
➡️ <head> 태그에는 메타 데이터와 html 문서 정보가 정의되어 있다.
➡️ <body> 태그에는 실제 콘텐츠가 정의되어 있다.
2. tag의 종류
기본 태그
| <h1~6> | 제목 태그 (Heading) |
| <p> | 본문 태그 (Paragraph) |
| <br> | 줄 바꿈 태그 (break) |
| <ul> | 순서가 없는 목록 (Unordered list) |
| <ol> | 순서가 있는 목록 (Ordered list) |
| <hr> | 수평 줄 태그 (Horizontal rule) |
제목 태그는 웹 검색 엔진이 가장 먼저 검색하는 태그이며, 하나의 HTML 문서에는 하나의 제목 태그를 쓰는 것을 권장한다.
- 코드 예시
<!--제목 태그 : 6으로 갈수록 크기가 작아진다.-->
<h1>h1 태그 입니다.</h1>
<h2>h2 태그 입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>
<!--본문 태그 : 본문 태그는 자동 줄바꿈이 되지 않는다. -->
<p>
p 태그입니다. <br />
p 태그의 두번째 줄 입니다.
</p>
<!--수평줄 태그-->
<hr />
<!--목록 태그(순서x)-->
<ul type="circle">
<li><b>사과</b></li>
<li>바나나</li>
<li>망고</li>
</ul>
<!-- 목록 태그(순서O)-->
<ol type="A" start="3" reversed>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
- 실행 결과
꾸미기 tag
| <b> | 두껍게 |
| <strong> | 두껍게 (+Semantic) |
| <i> | 이탤릭 |
| <em> | 강조 , 기울여서 표시 (Emphasized) |
| <del> | 중간 줄 |
| <u> | 밑 줄 |
삽입 태그
| <img> | 이미지 삽입 |
| <a> | 하이퍼링크 삽입 |
- 코드 예시
<!--하이퍼링크 예시-->
<a href="https://www.naver.com" target="_blank">네이버</a>
<!--이미지 예시-->
<img src="이미지의 주소" alt="설정하고 싶은 이미지 명"/>이미지 태그는 src를 통해 이미지의 경로를 넣고, alt에 이미지가 뜨지 않을 시 로드 할 대체 글자를 지정한다.
이때 이미지의 경로는 절대경로 / 상대경로 / URL 이 있는데, Live Server에서는 절대경로가 적용되지 않아 이미지 로드에 실패한다.
3. 사용자 입력 태그
| <input> | |
| type="button" | - 버튼 생성 - 주로 특정 기능 수행 시킬 때 사용 |
| type="text" | - 텍스트 입력 값 받는 폼 생성 |
| type="password" | - 비밀번호 값 받는 폼 생성 - 입력 값을 자동으로 안보이게 처리 |
| type="checkbox" | - 여러 선택지 중 여러개 선택 가능한 체크 박스 생성 속성 Name : 체크박스의 이름 Value : 체크박스가 실제로 전달하는 값을 지정 Checked : 화면 최초 로딩 시에 선택 된 상태로 로딩 |
| type="radio" | - 여러 선택지 중 하나만 선택 가능한 라디오 버튼 생성 속성 Name : 라디오 버튼의 이름 Value : 라디오 버튼이 실제로 전달하는 값을 지정 Checked : 화면 최초 로딩 시에 선택 된 상태로 로딩 |
| type="date" | - 특정 날짜 선택 받는 폼 생성 속성 Name : 날짜 선택 폼 이름 - type="datetime-local" 시, 시간까지 선택 가능 |
| type="select" | - 선택 메뉴 (드롭다운) 생성 - <select> : select 폼 생성 Name : select 박스의 이름 - <option> " select 폼의 옵션 값 생성 Value : 실제 전달되는 값 Selected : 최초 선택 된 값으로 설정 -<optgroup> :option 을 그룹화 Label : optgroup 이름 설정 Disabled : 옵션은 보이지만 선택을 못하도록 설정 |
4. <table>
표를 만들 때 사용하는 태그로 , 먼저 행을 만들고 자식 요소로 칸을 넣어주는 것이 기본이다.
<table>의 구성
| table 의 구성 | |
| <table> | 표를 감싸는 태그 |
| <tr> | 표 내부의 행 |
| <th> | 행 내부의 제목 칸 |
| <td> | 행 내부의 일반 칸 |
<table>의 속성
| <table>의 속성 | |
| border | 테두리의 두께 |
| cellspacing | 테두리의 간격 사이 너비 |
| cellpadding | 셀 내부 간격 |
| align | 테이블 정렬 속성 |
| width 와 height | 테이블 너비와 높이 |
| bgcolor 와 bordercolor | 테이블 배경 색과 테두리 색 |
<td>의 속성
| <td>의 속성 | |
| colspan | 해당 칸이 점유하는 열의 수 지정 |
| rowspan | 해당 칸이 점유하는 행의 수 지정 |
- 코드 예시
<table border="1" cellspacing="0" cellpadding="10" width="300" height="100">
<tr>
<th>이름</th>
<th>나이</th>
<th>전화번호</th>
</tr>
<tr>
<td colspan="2">홍길동</td>
<td rowspan="2">010-1111-1111</td>
</tr>
<tr>
<td>홍길동</td>
<td>15</td>
</tr>
</table>
- 실행 결과
'개발 > HTML,CSS,JS' 카테고리의 다른 글
| [JS] JavaScript(1) - 개념 / 변수 /자료형 / 형변환 / 연산자 (0) | 2023.07.16 |
|---|---|
| [CSS] CSS(4) - transform / transition / animation (0) | 2023.07.16 |
| [CSS] CSS(3) - position / background / display (0) | 2023.07.16 |
| [CSS] CSS(2) - 폰트 / 속성 (0) | 2023.07.16 |
| [CSS] CSS (1) - 선택자 (0) | 2023.07.16 |
