2022 / 07 / 19
2022 / 07 / 20
2022 / 07 / 21
- Html5
- Interface
- 이진법
- Css
✔️HTML
HTML란? 네트워크로 정보를 전달하는 즉 정보의 집합
HTML5 ( Hypertext Markup Language ) 이란 W3C에서 정의한 표준 마크업 언어이다.
- 마크업 언어란? 태그, 데이터, 메타데이터로 형성되어 있다.
자세히 말하자면 정보를 표현하는데 있어 데이터와 메타데이터를 결합하여 정보를 표현하는 언어이다.
HTML5의 특징
- 표준문서 - 표현의 보장, 커뮤니케이션의 기반, 효율성 // 어떠한 웹브라우저에서도 동일하고 균일하게 표현해 낼 수 있다.
- 기능의 독립성 - 데이터, 디자인(css) , 제어(자바스크립트)의 분리 즉 개인화가 가능하다.
- 다양한 기능 - 멀티미디어, 기능컴포넌트, 신뢰성 통신 등
- 확장성 - pc, 스마트폰, 다양한 기기에서 사용가능
코딩 스타일
태그는 소문자로! // 메타데이터 표시는 소문자
들여쓰기를 사용하자
인코딩은 UTF-8
인코딩이란 A라는 것을 코드화 시키는 것
ASCII (미국정보교환표준부호)를 주로 사용하여 2진법으로 나타낸다.
ex ) A = 01000001
HTML5의 문서 구조
<head>
<meta charset = " utf-8">
<title> my first HTML document </title>
</head>
<body>
<h1> hello </h1>
</bady>
head는 앞에 (사용자 화면에) 보이지 않는 것 / 연출팀이라고 생각 / 문서 자체에 대한 정보
body는 앞에 (사용자 화면에) 보이는 것 / 연극배우라고 생각 / 문서의 실질적인 내용이 위치한다.
정보의 전달 구조
Html 은 정보를 전달하기 위한 http( 하이퍼 텍스트 프로토콜) 라는 프로토콜 (상호규약) 을 통해 정보를 전달한다.
꼭 html을 사용하지 않아도 되지만, 대부분 사용하는 게 http이다.
🔔 좋은 개발자가 되기 위해서는 고정관념에 막히지 말고 유동적으로 생각해야 한다!
웹서버 - 가치있는 html의 집합을 제공해주는 컴퓨터
서비스 - 가치있는 html의 집합
정보 - html
Html5 tag
태그란 ? 데이터에 시맨틱 요소를 포함하기 위한 메타 데이터이다.
Element - 전체 데이터
Content - 실데이터
Attribute - 메타정보를 더 깊이 나타내는 속성정보
클로징태그 (닫힌태그)가 없는 태그도 있다 => input , br 등등 보통 유저인터페이스 태그
| Text tag | |
| <hn> 제목을 나타내는 태그 | <h1> 안녕 </h1> |
| <br> 줄바꾸기 | |
| <hr> 수평줄 | 주제가 바뀌는 경우 주제를 분리하기 위해 가로줄로 표시 |
| <p> 텍스트 단락 | |
| list tag | |
| <ul> 순서가 없는 목록 | |
| <li> list item | ul과 쓰일때는 순서가 지정되지 않은, 정렬되지 않은 목록을 나타낸다. ol과 쓰일때는 순서가 있는, 정렬된 목록을 나타냄 꼭 글머리기호나, 숫자, 영문으로만 사용되는것은 아니다. 순서를 나타낸다는것을 알아두자 !! |
| <ol> 순서가 있는 목록 | |
| 기타 tag | |
| <a> 하이퍼링크 연결 | < a href="http://www.naver.com"> 네이버로 이동 </a> |
| <img> 이미지 출력 | 이미지를 웹페이지에 포함하는게 아니라, 링크를 시킨다 src는 절대경로, 상대경로 둘 다 가능하다. 상대경로 <img src =../images/naver.jpg> 절대경로 <img src = "c:/testdir/images/naver.jpg" alt = ""> |
| table tag | |
| <table> 테이블 자체를 의미 하는 태그 | border라는 태그가 있어야 표 테두리를 그려준다. < table border = 1 > |
| <tr> 테이블 칸 | |
| <th> table header | |
| <td> table data call | |
| <th colspan = "2"> 컬럼 2개를 걸쳐 구성한다. / 가로로 2칸 | |
| <th rowspan = "2"> 줄 2개를 걸쳐 구성한다. / 세로로 2칸 | |
| 입력양식 태그 | |
| <form> | 사용자 입력을 처리하는 html form생성 서버에 요청을 목적으로 작성 |
| <input> | 사용자의 데이터 입력을 위한 ui 제공 type, name, id, value등의 속성이 있다. |
| <labal> | <input> <progress> 등의 태그에 라벨링 수행 / 라벨링 : 스크린 리딩이나 클릭이 어려운 사용자 지원 for attribute을 통해 id를 매게로 연동한다. laver for = "abc" 와 ~~ id ="abc"는 서로 연동된다. |
| <textarea> | text 에디터 |
🔔
코딩을 배우며 중요한 것은 태그를 공부하는 방법이다.
화면에 나타난 겉모습, 디자인에 초점을 두어 태그의 의미를 파악하지 말고,
태그가 정확하게 어떤 의미를 갖고 있는지를 알아야 한다!
프로토콜의 일반적 구조
검색을 하기 위해서는
payload - 실제로 보낼 데이터, 보내고 싶은 정보(편지)와
header - 그 데이터를 찾아가기 위한, 전송에 필요한 데이터(편지봉투)가 필요하다. (편지봉투여서 많은 데이터는 못넣음)
이러한 데이터 블록을 packet이라 한다.
http header - url 삽입가능
http payload / http body 로도사용한다.
Get방식 전송 - header에 사용
post방식 전송 - payload에 사용
이를 method라 부른다.
✨ 클라이언트가 서버에게 정보를 보낼때 http를 사용하고, 이는 header와 payload를 통해 정보를 보낸다.
header를 사용하면 get방식 -> url 사용가능
payload를 사용하면 post방식이다. -> 전통적인 데이터 전송 방식
✔️Interface
✔️이진법
16진수를 활용하여 색상을 표기 해보자 !
✔️CSS
CSS ( Cascading Style Sheets)란 ?
- Html의 디자인을 꾸미기 위한 프로그래밍 언어로
- html에서 디자인과 element(정보, 컨텐츠)의 분리
- 독립적인 디자인 요소를 제공, 정보의 간결성, 유지보수성이 극대화 된다.
- 상위 태그에서 적용한 속성은 하위태그에 그대로 상속된다!
ex ) ol태그에 적용한 속성은 li속성에 상속된다 !
그러나, 모든 css속성이 상속되는것은 아니라는점 알아두기
CSS의 적용방법
외부 CSS - 외부파일로 작성하여 사용하며 가장 일반적인 방식이다.
내부 CSS - html파일 내부에 style 태그를 넣어서 사용한다.
인라인 CSS - 태그에 넣어서 사용 // NAME, ID같은 태그에 넣어서 사용
CSS 선택자
| CSS 문법구조 :: Selector { 스타일속성 : 속성값 ; } | |
| 전체 선택자 | 모든 웹페이지의 Element를 선택 *{color : red;} |
| 태그 선택자 | 특정한 태그를 선택 h1{color : red;} 여러 태그를 같이 사용할 수도 있다 (콤마사용) h1, p { color : red;} |
| 아이디 선택자 | 특정 id에 해당하는 Element 선택 가급적 같은 id를 쓰지 않는것을 권장한다. #hello{color : red;} ✨ id가 class 보다 상위선택자이다. |
| 클래스 선택자 | 특정 class 에 해당하는 Element 선택 . a { color : red ;} |
| 속성 선택자 | 특정 속성을 가진 Element 선택 일반적으로 다른 선택자와 함께 사용 명시적으로 속성을 표시한 경우만 적용된다. input[type="text"{background : blue;} <body> < input /> < input type = "text" /> </body> |
'🏃♀️ Do it ! > TIL' 카테고리의 다른 글
| Datatype / 배열 (0) | 2022.08.01 |
|---|---|
| 자바스크립트 (0) | 2022.08.01 |
| 프로그램을 위한 수학 (0) | 2022.08.01 |
| 통신프로토콜 (0) | 2022.08.01 |
| 정보통신 (0) | 2022.08.01 |