웹개발의 영역은 기능과 역할에 따라 '보여지는 부분을 담당하는 프론트엔드'와 '보여지지 않는 부분을 담당하는 백엔드'로 나뉘어져 있다, 따라서 해당 분야에 전문성을 갖고 있는 전문가를 '프론트엔드 개발자'와 '백엔드 개발자'라고 부른다.
그렇다면 프론트엔드 개발에 있어서 필요한 지식은 어떻게 될까?!
HTML, CSS, JS
프론트 웹 개발에 있어 가장 기본이되는 기술은 HTML, CSS, JS이다.
HTML은 뼈대, CSS는 스타일, JS는 기능을 담당하고있다.
HTML
HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어다.
즉, HTML은 화면상에 보여지는 전체적인 구조를 표현하는 언어다.
또한 HTML은 tag들의 집합으로 구성되어있다. tag는 부등호(<>)로 묶인 HTML의 기본적인 구성 요소이며
<head>로 태그를 열면 </head>로 태그를 닫는다.
이것을 트리구조라고 하는데. HTML은 부모와 자식노드의 결합으로 구성되어있다.
HTML의 활용
1. <div></div>와 <span></span>테그의 차이
<div></div>는 한줄을 통째로 차지한다. (Java의 println같다.)
<span></span>는 줄바꿈이 되지 않고 계속 이어서 적을 수 있다. (Java의 printf)
<div>줄바꿈이 된다</div>
<span>줄바꿈이 되지 않는다</span> <span>줄바꿈이 되지 않는다</span>
2. 이미지테그는 </>닫는 테그가 없다.
<img src="???">
<img src="https://handsomeharyeom/">
3. 링크삽입 <a></a>, href 활용
<a href="???"></a>
(a는 anchor의 약자로 '배의 위치를 고정'한다는 의미이다.)
<a herf="https://findthelostedhobby.tistory.com/">강하렴의 블로그</a>
4. ul(unordered list),li:리스트 <ul></ul><li></li>
트리구조로 열리는 리스트이다. 메뉴같은것을 만들 때 유용하게 만들 수 있다.
5. input type, text, password, check박스
<input type="text">아이디나 비밀번호를 입력하는 텍스트 태그를 만들어줄 수 있다.
radio와 check박스의 차이는 radio는 다양한 선택지에서 하나만 선택할 수 있고 check box는 중복으로 선택 할 수 있다.
<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio" name="option1"> 옵션1
<input type="radio" name="option1"> 옵션2
6. 텍스트 에리어 <textarea></textarea>
<textarea></textarea>
7. 버튼 <botton></botton>
<botton></botton>
8. <p>는 paragraph(문단)의 약자로 하나의 문단을 표현하기 위해 사용한다.
9. <section> 요소는 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용된다.
10. <h1>은 제목을 표현하기 위해 사용한다.
HTML의 응용
<header> <main> <nav> <aside> <footer>은 <div>와 기능이 완전히 동일하나 개발자가 쉽게 파악할 수 있도록 이름을 붙여놓은 것이다. 이렇게 이름에 의미를 붙여 부르는 태그를 우리는 시맨틱 태그(semantic tag)라 부른다.
'Front-End > HTML' 카테고리의 다른 글
| [HTML & CSS] 셀렉터(Select) (2) | 2022.08.23 |
|---|---|
| [HTML & CSS] HTML과 CSS의 링크 (0) | 2022.08.23 |
웹개발의 영역은 기능과 역할에 따라 '보여지는 부분을 담당하는 프론트엔드'와 '보여지지 않는 부분을 담당하는 백엔드'로 나뉘어져 있다, 따라서 해당 분야에 전문성을 갖고 있는 전문가를 '프론트엔드 개발자'와 '백엔드 개발자'라고 부른다.
그렇다면 프론트엔드 개발에 있어서 필요한 지식은 어떻게 될까?!
HTML, CSS, JS
프론트 웹 개발에 있어 가장 기본이되는 기술은 HTML, CSS, JS이다.
HTML은 뼈대, CSS는 스타일, JS는 기능을 담당하고있다.
HTML
HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어다.
즉, HTML은 화면상에 보여지는 전체적인 구조를 표현하는 언어다.
또한 HTML은 tag들의 집합으로 구성되어있다. tag는 부등호(<>)로 묶인 HTML의 기본적인 구성 요소이며
<head>로 태그를 열면 </head>로 태그를 닫는다.
이것을 트리구조라고 하는데. HTML은 부모와 자식노드의 결합으로 구성되어있다.
HTML의 활용
1. <div></div>와 <span></span>테그의 차이
<div></div>는 한줄을 통째로 차지한다. (Java의 println같다.)
<span></span>는 줄바꿈이 되지 않고 계속 이어서 적을 수 있다. (Java의 printf)
<div>줄바꿈이 된다</div>
<span>줄바꿈이 되지 않는다</span> <span>줄바꿈이 되지 않는다</span>
2. 이미지테그는 </>닫는 테그가 없다.
<img src="???">
<img src="https://handsomeharyeom/">
3. 링크삽입 <a></a>, href 활용
<a href="???"></a>
(a는 anchor의 약자로 '배의 위치를 고정'한다는 의미이다.)
<a herf="https://findthelostedhobby.tistory.com/">강하렴의 블로그</a>
4. ul(unordered list),li:리스트 <ul></ul><li></li>
트리구조로 열리는 리스트이다. 메뉴같은것을 만들 때 유용하게 만들 수 있다.
5. input type, text, password, check박스
<input type="text">아이디나 비밀번호를 입력하는 텍스트 태그를 만들어줄 수 있다.
radio와 check박스의 차이는 radio는 다양한 선택지에서 하나만 선택할 수 있고 check box는 중복으로 선택 할 수 있다.
<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio" name="option1"> 옵션1
<input type="radio" name="option1"> 옵션2
6. 텍스트 에리어 <textarea></textarea>
<textarea></textarea>
7. 버튼 <botton></botton>
<botton></botton>
8. <p>는 paragraph(문단)의 약자로 하나의 문단을 표현하기 위해 사용한다.
9. <section> 요소는 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용된다.
10. <h1>은 제목을 표현하기 위해 사용한다.
HTML의 응용
<header> <main> <nav> <aside> <footer>은 <div>와 기능이 완전히 동일하나 개발자가 쉽게 파악할 수 있도록 이름을 붙여놓은 것이다. 이렇게 이름에 의미를 붙여 부르는 태그를 우리는 시맨틱 태그(semantic tag)라 부른다.
'Front-End > HTML' 카테고리의 다른 글
| [HTML & CSS] 셀렉터(Select) (2) | 2022.08.23 |
|---|---|
| [HTML & CSS] HTML과 CSS의 링크 (0) | 2022.08.23 |
