JAVA 웹개발 과정 국비 31일차 정리
31일차
※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!
Front-end 시작!!
1. HTML
1) HTML이란?
Hyper Text Markup Language.
화면 구성에 필요한 element(요소)들을 생성하여 화면에 올려놓는 역할.
ML(계층구조를 늘어놓는 언어)에 HT(다른 페이지로 이동하는 기능)을 주는 것.
웹페이지 발전의 근간이 되었다.
html 파일을 브라우저로 볼 수 있는 이유는 브라우저가 코드 분석기 역할을 해주기 때문이다.
브라우저는 렌더링(코드를 분석하여 화면에 나타내주는 과정)을 할 수 있기 때문에 보통 브라우저를 많이 이용한다.
2) HTML의 구조
HTML은 기본적으로 대소문자를 가리지 않지만, 예전 버전 중 xhtml은 소문자만을 인식하기 때문에 소문자로 쓰는 것이 일종의 컨벤션으로 자리잡았다.
현재 쓰고 있는 IDE인 Visual Studio는 ! + tap을 이용해 기본 골격을 자동으로 작성할 수 있다.
| 태그 | 설명 |
|---|---|
| <head> | 화면에 보여지지 않고 설정을 지정 |
| <title> | 브라우저 상단 탭에 보여지는 제목 설정 |
| <body> | 화면에 나타나는 부분 |
- Element : HTML 내에서 사용되는 키워드
ex) html, head, body 등.. - Tag : Element에 괄호를 붙인 것
ex) <a>, <b>, <hr> 등.. - Attribute : 태그에 부여되는 옵션 값
- ” “, ‘ ‘ 를 붙이거나 또는 아예 따옴표를 붙이지 않아도 된다. ex) width, size, align 등…
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
3) 여러가지 태그
body 태그에 쓰이는 여러가지 태그를 알아보자.
자주 쓰이는 몇개를 제외하고는 검색해서 찾을 수 있으니 필요할 때마다 검색하는 습관을 들이면 좋다.
① <br>, <hr>, <b>, <i>, <marquee>
| 태그 | 설명 |
|---|---|
| <br> | 줄바꿈 |
| <hr> | 한줄 선 |
| <b> | 진하게 |
| <i> | 이탤릭체 |
| <marquee> | 움직이는 글씨 |
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
② <img>
속성으로 src(source), width 등을 줄 수 있다.
width에 %를 붙이면, 브라우저의 몇 퍼센트로 보여줄 것인지 선택할 수 있다.
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
③ <a>
anchor 태그로 닻처럼 페이지를 링크에 저장하여 그 위치를 한번에 이동할 수 있게하는 태그이다.
속성으로 href(hypertext reference)를 링크로 받는다.
내부 html 페이지는 물론, 외부 페이지, 이미지에도 가능하다.
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
④ <fieldset>, <ul>, <ol>
| 태그 | 설명 |
|---|---|
| <fieldset> | 제목 딸린 박스 |
| <legend> | 제목을 넣는 칸 |
| <ul> | 순서 없는 리스트 생성 |
| <ol> | 순서 있는 리스트 생성 |
| <li> | <ul>과 <ol> 안에서만 사용. 목록을 만든다. |
아래와 같은 구조를 간단하게 fieldset>legend+(ul>li3)+(ol>li3) 으로 빠르게 생성할 수 있다.
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
⑤ <table>
예전에는 레이아웃을 table 태그를 이용하여 구성했었지만, 불편한 방법이여서 요새는 사용되지 않고 표 용도로만 사용되고 있다.
witdh나 height를 줄 때는 이어진 다른 셀들도 함께 크기가 변하기 때문에 주의해야한다.
셀 병합을 할 때는 왼 -> 오 또는 위 -> 아래로만 가능하다.
엑셀처럼 병합하면 병합되는 셀이 사라지는 형식이 아니기 때문에, 직접 해당 셀을 삭제해주어야 한다.
열 병합이라고 해서 세로 병합일꺼라고 생각했는데 반대로 생각해야 한다.
<colspan> 이나 <rowspan> 에 속성값은 몇 칸을 합칠 것인지를 써주면 된다.
| 태그 | 설명 |
|---|---|
| <tr> | table row (행) |
| <td> | table data (열) |
| <colspan> | 열병합(가로) |
| <rowspan> | 행병합(세로) |
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
⑥ <input>
input 태그에는 type으로 많은 속성들을 줄 수 있다.
placeholder를 사용할 때는 태그 사이에 아무것도 없어야 안내문구가 출력된다. 엔터를 쳐버리면 그 엔터조차 입력으로 인식하기 때문에 안내문구는 출력되지 않는다.
| 태그 | 설명 |
|---|---|
| type=”text” | 입력창 생성 |
| placeholder=”안내문구” | 입력창에 대한 안내문구 생성 (입력값이 들어오면 사라진다.) |
| type=”button” | 버튼 생성 |
| value=”Click!” | 버튼 문구 생성 |
| type=”checkbox” | 체크박스 생성 |
| type=”radio” | 체크박스 (체크 해제 불가능) 생성 |
| name = “이름” | radio 타입일 때 같은 name 속성을 가지면 하나만 선택이 된다. |
| type=”file” | 업로드 할 파일 선택 창 생성 |
| type=”submit” | 특수한 기능을 가진 ‘제출’버튼 (나중에 배운다) |
| type=”color” | 컬러 선택 창 생성 |
| type=”date” | 날짜 선택 창 생성 |
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
⑦ 그 외 입력 방식 태그
| 속성 | 설명 |
| <textarea> | 입력창(크기 조절 가능 - 엔터를 치면 밑으로 내려가는) 생성 |
| <select> | 여러개 중 하나 고르기 창 생성 |
| <option> | <select> 태그 안에 선택 탭 생성 |
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
4) 실습 문제
이걸 배워서 뭘 만드나.. 싶었는데 이런식으로 게시판의 틀을 만들 수 있다.
① 로그인 기능 만들기
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
② 게시판 목록 만들기
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
③ 게시판 글 작성 페이지 만들기
See the Pen html by kkongkeozzang (@kkongkeozzang) on CodePen.
댓글남기기