3주차 HTML & CSS 기본 (1)
2022. 10. 11. 16:20ㆍ배울수록 연봉은 늘어간다./자바스크립트
728x90
- ▲ 위에 보이는 화면처럼 웹페이지를 만들어 봅니다.
- 프로그램은 구름 IDE를 사용했습니다.
- 소프트웨어 스택은 HTML , CSS, JS 선택을 했고 프로젝트는 빈 프로젝트로 시작하였습니다.
- github 링크 : https://github.com/develup-official/htmlcss-s01e01
1. 터미널에서 깃허브 링크 불러오기
- 터미널에 git clone 링크 주소를 입력하세요.
2. 파일 만들기
- 다운로드한 폴더에 파일을 만들어 줍니다.
- 문자는 대소 문자를 구분합니다.
- 특수문자는 언더바나 하이픈 정도만 쓰도록 합니다.
- 파일명 : orange.html
3. 콘텐츠를 확인합니다.
- 위 이미지를 크게 보자면 눈에 보이는 콘텐츠는 "이미지 , 오렌지 글자 , 아래 작은 글자로 오렌지 / 키위 / 스토로우 베리"라는 콘텐츠를 확인하게 됩니다.
4. Orange 글자를 만들어 봅니다.
- Orange 글자를 써서 웹에서 확인을 합니다.
- <hi1>Orange</h1> 태그를 넣어 확인합니다. (슬러시에 따라 여는 태그 , 닫는 태그라고 합니다.)
- h는 heading(페이지 위에 붙이는 제목)의 약자입니다.
- 숫자의 의미는 글자 크기를 나타냅니다.
https://www.w3schools.com/tags/tag_hn.asp
HTML h1 to h6 tag
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
중요하지 않은 것 같지만 매우 중에 합니다.
웹페이지는 정보의 전달이 본질입니다.
사람들이 검색엔진에서 찾기 위에선 태그를 달아주어야 하는데 태그는 웹페이지에서는 태그를 기반으로 정보를 구조화한다.라고 합니다.
5.html의 전체 큰 구조~ 반드시 적어주어야 하는 약속??
- html : html 문서다.
- head : 실제 웹브라우저에 나오는 영역이 아니다. 눈에는 보이지는 않지만 중요한 정보를 담고 있습니다. 예를 들어 메타데이터 데이터를 설명하고 있는 데이터라고 생각합니다.
- body : 실제 눈에 보이는 영역입니다. hi1은 body 영역에 들어갑니다.
- 태그는 부모와 자식 간의 관계이다.
- title에는 fruit라고 적어줍니다. (탭의 이름을 바꾸어 줍니다.)
- 상단에는 <!DOCTYPE html>이라고 적어 줍니다. (html 문서의 최신버전을 지정합니다.)
- <meta charset="utf-8"> : 한글이나 또 다른 언어들이 깨지지 않고 실행됩니다. 유니코드라고도 말하는데 전 세계의 언어를 표현하는 규격, 약속이라고 보면 됩니다.
- html의 목표는 디자인이 아닙니다.
- body의 콘텐츠를 작성해 줍니다.
| html 구조 | ||||
| <!DOCTYPE html> | ||||
| <html> | <head> | <title> | ||
| <meta charset="utf-8"> | ||||
| <body> | <h1 ~ h6> | |||
6. body 목록 만들기 = 목록은 리스트? 목록을 표현하는 태그 만들기
- ordered list : 순서가 있는 리스트 ( ex.1234....)
- 우리가 쓰는 것은 앞에 언니 붙습니다. unordered list
- 사용법은 <ul> -> <li> (언오더드 리스트 -> 리스트 아이템)를 사용합니다.
- <li> Orange </li>
- <li> Kiwi </li>
- <li> Strawberry </li>
| html 구조 | ||||
| <!DOCTYPE html> | ||||
| <html> | <head> | <title> | ||
| <meta charset="utf-8"> | ||||
| <body> | <h1 ~ h6> | |||
| <ul> | <li> | |||
7. 이미지 넣기
- img 라는 테그가 쓰입니다.
- img는 여는 태그가 끝입니다.
- 이러한 것들을 셀프 클로징 , 홀 태그라고 합니다.
- 이것 자체가 콘텐츠입니다.
- 사용법은 <img src="경로">
- 경로가 맞으면 잘 실행이 될 것이고 안 맞으면 실행이 안될 것입니다.
<img src="images/orange.png">
| html 구조 | ||||
| <!DOCTYPE html> | ||||
| <html> | <head> | <title> | ||
| <meta charset="utf-8"> | ||||
| <body> | <img> | |||
| <h1 ~ h6> | ||||
| <ul> | <li> | |||
8. h1 태그 꾸미기(1)->style
예제▼
| <h1 style="color;orange;"> |
- h1 태그에 위 예시를 입력해서 글자의 색상이 바뀌는 것을 확인합니다.
- 하지만 이렇게 작성하면 보기도 어렵고 고치기도 어렵습니다.
- 그래서 우리는 <head> 안에다가 <style> 태그를 만들어 사용합니다.
| html 구조 | ||||
| <!DOCTYPE html> | ||||
| <html> | <head> | <title> | ||
| <meta charset="utf-8"> | ||||
| <style> | ||||
| <body> | <img> | |||
| <h1 ~ h6> | ||||
| <ul> | <li> | |||
- <style>
- h1 {
- color : orange;
- }
- body에 있던 h1 태그를 style에 적습니다.
- 중괄호{}를 사용합니다.
- 이것은 html 태그랑 다르게 생겼니??? 이건 다른 기술이기 때문입니다.
- 이것은 CSS라고 하는 기술입니다.
- h1 자리는 어떠한 부분을 변경할래? 라고 선택을 한것이기 때문에 우리는 이것을 선택자라고 부릅니다,
- 영어로는 Selector(셀렉터)라고 부릅니다.
- color : orange; => 이 부분을 (속성 : 값;) 이라고 부릅니다
- 위와 같이 작성했을때 동일하게 색상이 바뀌는 것을 확인합니다.
- 콜론과 세미콜론은 구분을 확실학게 해줍니다.
- <style>
- h1 {
- color : red;
- background-color: orange;
- }
- 위 예시처럼 실행을 해봅니다.
- h1을 body로 바꾸어 실행을 해봅니다.
- body에 style을 주게되면 h1과 ul에도 영향을 끼치는데 이것을 상속된다 라고 합니다.
- 하지만 모든 것들이 상속되지 않는다는 점 참고해 주세요,
9. style에 배경 이미지 넣기
background-image: url(images/orange-bg.jpg);
- 밑줄친 부분은 이미지 경로를 넣어 줍니다.
- 배경이 잘 들어갔는지 확인을 해줍니다.
10. 레이아웃 꾸미기
- <ul> 태그를 하나로 묶어서 레이아웃을 잡을겁니다.
- 묶는 개념도 태그라는 개념이 필요한데 가장 보편적으로 묶는 태그 <div>를 사용합니다.
- <div>는 Division(디비전)이라는 약자에 분활이라는 뜻을 가지고 있습니다.
- <style>
- <div> {
- background-color: white;
- width: 400px;
- padding: 50px;
- margin-left: 50px; ( 숫자를 바꾸어 이동되는 것을 확인합니다.)
- }
- 위 예시를 입력해서 색상이 바뀌는 것을 확인합니다.
- 너비는 widht : auto (설정안하면 자동입니다.)
- 높이는 height : auto (설정안하면 자동입니다.)
- 너비는 크기를 적어 주지만 높이는 환경마다 다르기 때문에 지정해 주지 않습니다.
- width: 400px; 로 지정을 해줍니다.
- padding: 50px; 로 지정을 해줍니다 ( 패딩에 대한 개념은 앞주차 기초를 확인해 봅니다.)
- 화면을 가운데로 옮기기 위해 margin-left: 크기를 주어 화면이 이동하는 것을 확인 합니다.
- 하지만 이렇게 될경우 환경에 따라 동일한 화면을 볼 수 없기 때문에 마진은 고정 픽셀로 두지 않습니다.
- 화면을 가운데로 오게 하려면 margin-left: auto; / margin-right: auto; 라고 입력해서 가운데로 오는 것을 확인합니다.
- <style>
- <div> {
- background-color: white;
- width: 400px;
- padding: 50px;
- margin-left: auto;
- margin-right: auto;
- border-widht : 10px;
- border-style : solid;
- border-color : orange;
- }
- 테두리를 넣어 봅니다.
- border-widht : 10px;
- border-style : solid;
- border-color : orange;
- 단축속성은 border: 10px solid orange; 위와 같은 말입니다.
- margin 도 단축속성이 있습니다.
| head | body |
 |
 |
지금까지 만들어 본것!!
11. h1 꾸미기(2)
- <style>
- h1 {
- color : orange;
- background-color: orange;
- border-bottom: 5px solid orange;
- width: 115px;
- margin: 50px auto;
- }
- <style>
- ul{
- background-color: antiquewhite;
- width: 100px;
- margin: 30px auto;
- padding-top: 30px;
- padding-bottom: 30px;
- }
- 하나씩 적어보면서 화면이 바뀌는 것을 확인합니다.
- 같은 방식으로 kiwi와 strawberry도 만들어 봅니다.
- 지금까지 배운 것은 동영상을 보면서 복습을 해봅니다.
12. <a> 태그는 하이퍼 텍스트 레퍼런스~ (href)
<a href="kiwi.html" target="blank">Kiwi</a>
- 목록에 있는 오렌지 html 문서에 위 태그를 사용해서 링크가 되는 것을 확인합니다.
13. 페이지가 늘어나면 비효율적인 부분이 생긴다.
동일한 디자인을 만들다 보면 동일한 태그가 동일하게 들어가는 것이 발생을 합니다.
만약 수정을 해야 되는 경우가 발생을 하게 된다면 지금은 2번을 일을 하지만 만약 200개가 되었을 경우
200번의 작업을 해야 하는데 여간 곤란한 일이 아닐 수 없습니다.
그래서 우리는 css 파일을 따로 만들어 둘 필요가 있습니다.
- 다운로드한 폴더에 파일을 만들어 줍니다.
- 파일명 : style.css
- <head>에 새로운 태그를 추가 합니다.
- 태그명은 <link rel="stylesheet" href="style.css">
- rel은 relation (릴레이션) 관계라는 뜻을 가지고 있습니다.
- 중복되는 태그는 style.css에 넣어 줍니다.
| html 구조 | ||||
| <!DOCTYPE html> | ||||
| <html> | <head> | <title> | ||
| <meta charset="utf-8"> | ||||
| </link rel="stylesheet" href="문서명"> | ||||
| <style> | ||||
| <body> | <img> | |||
| <h1 ~ h6> | ||||
| <ul> | <li> | |||
| html | css |
 |
 |
최종 완성 코드 입니다.
수고 하셨습니다~^^
Total :
Today :
Yesterday :