web / html / Protocol / IP / DNS / Port
# Web(웹)이란?
사전적인 의미로 거미줄이란 뜻으로 IT에서는 WWW(world wide web)라는 말의 줄임말로서 사용된다. 전 세계의 컴퓨터들을 연결하여 정보 공유를 하는데 주 목적이 있으며, 이렇게 연결되어 있는 상태를 네트워크에 연결되어 있다고 한다(:
- 웹이란, 1개 이상의 사이트가 연결되어있는 인터넷 서비스의 한가지 형태
- 인터넷이란, 1개 이상의 네트워크가 연결되어 있는 형태
프로토콜(Protocol) : 네트워크상에서 약속한 통신규약 (Http, FTP, SMTP, POP, DHCP)
IP : 네트워크상에서 컴퓨터를 식별할 수 있는 주소
DNS : IP주소를 인간이 쉽게 외우도록 맵핑한 문자열
Port : IP주소가 컴퓨터를 식별할 수 있게 해준다면, Port번호는 해당컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호
ex.
(http - 프로토콜)
(www.sba.seoul.kr - 컴퓨터 주소(도메인이라고 함/ DNS를 통한 IP주소로 변경)
(80 - port)
(kr/index - Information path)
# HTML이란?
HTML이란, Hyper Text Markup Language의 약자로서 웹문서를 기술하는 언어다. 웹문서를 표현하기 위해 태그들로 구성되어 있다.
(Hypertext : 링크가 걸려있는 텍스트)
# CSS란?
Cascading Style Sheets의 약자로, HTML문서를 디자인적으로 예쁘게 만들어 정보 전달을 좀더 효율적으로 하기 위해 만들어진 문서이다.
HTML은 정보를 가지고 있고, CSS는 화면상의 레이아웃등을 컨트롤하는 문서라고 생각하기~
[cascading : 종속 / 연속적인 / 폭포]
*캐릭터도 코딩으로 그릴 수 있다. 단, 좌표. 노가다... 좌표를 일일이 쳐야 하므로..ㅎㅎㅎㅎ 손으로그리는것만 노가다가 아님~
# 태그란?
HTML문서를 구성하고 있는 요소(: 그리고 태그에는 이름과 속성이 있다. 앞으로 태그에 대해서 학습하게 될 것(:
# HTML버전과 편집툴
공부할 HTML 버전은 ver.5(HTML5)이다. 편집에 툴은 개인 취향에 맞게 사용하면 된다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
#(코딩추천 사이트 : 생활코딩) ->생활코딩 너무괜찮은사이트❤︎
# (그외 web공부 사이트 : https://www.w3schools.com)
# DOCTYPE: Document Type.
# 누가 만들까?
W3C (의장: 팀 버너스 리 - HTML만든사람)
# 모니터는 코딩짤때 불편함을 느끼지 않지만,, 핸드폰은 다소불편!
버전이 업그레이드가 되면 사이즈가 다 다른데... 안에 디자인을 넣는데, 모든 핸드폰에서 봤을때 글씨가 겹치거나 하지않고예쁘게만든든게정말어려움. 그이유는 모니터 사이즈의 표준을 만들어놓지 않았기 때문이다. 이와 같은 현상을 파편화라고 함<< 핸드폰의경우 파편화현상이 심함ㅠ_ㅠ
# HTML의 본질 : 정보
# 이름 저장할때, 확장자 html 중요:) 그리고 무조건 영어로.
# <strong></strong> : 볼드체
# <em></em> : 이탤릭체
# <i></i> : 이탤릭체 -> 예전에 많이 썼던 태그. 시각장애인분들께는 똑같이 읽혀져, 접근성이 떨어지므로 i보단 em을 쓰는게 낫다. 접근성까지 생각한다면. strong도 마찬가지. strong도 접근성에 부합하는 태그지만, 글씨체만 볼드체로 만들어주는 태그 <b>도 있다. 근데 시각장애인분들께 <b>는 강조해서 읽어주지 않고 <strong>은 강조해서 읽어줌. + 문단을 표현할때 보통 엔터로 표현하지만, 아무리 공백을 띄어줘도 컴퓨터는 공백을 읽지 못함. 컴퓨터는 얼마나 열심히 사는지..ㅋㅋㅋㅋ 공백에서 쉬지 않는다~ 줄바꿈을 하고싶으면? 예한테 줄바꿈을 하고싶다고 태그를 써줘야 함.
# <br> : 단일태그, 짝꿍이 없는 태그(시작태그만 쓸 수도 있고, 끝 태그만 써도 되고 <br/>이렇게 넣어줘도 괜찮음.
# <a></a> : 링크를 걸고싶을때. 속성이 필요한 태그
href: 속성
<a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>
href속성을 썼을때 그 값이 뭐냐하면 등호(=)를 넣어준다. 그리고 속성값을 진짜료 표현할땐 " " 로 감싸줘야 함.
**target속성을 쓰려면 한칸을 띄어주고 target을 써야 함. 그리고 속성값을 표현할땐 항상 등호(=)를 넣어주고 언더바 블랭크(_blank) 적기.(단, " "로 꼭 감싸줄것!)
# 사실 메모장으로 짜면, 불편함.
일일이 하다보면 불편하니까.. but, 훌륭하게 작업할수있는 툴이 많이 나와이씀!
쉽게 코딩할수있는 도구들이 많이 있는데 그 중에서, Sublime Text 3 (개인적으로 VSC를 선호하지만 ㅎㅎ)
이유: 1. 무료로 제공됨 2. 실무에서도 쓰는경우 다수
# 코딩은 짝꿍이 중요하다(: 시작태그가 있으면 끝태그도 있어야할 것~ 단, 단일태그예외.
meta: 정보에 대한 정보
"charset":"UTF-8" (다국어로 지원하겠다는 뜻)
heading<h1><h6>
h6까지만 있음.
대제목~세제목
F12: 바로 브라우저에서 보기 가능.
*br태그 안해도 제목이어서 자동으로 줄바꿈됨.
컨트롤 슬래시 (ctrl +/) : 주석처리. (단, 커서가 해당 컨텐츠 안에 있는 상태에서!)
img 태그 : 이미지
src : 소스
alt : alternate
같은공간에 있으면, 그냥 이미지의 파일명만 넣어주면 되고, 이미지라는 폴더안에 있으면 img/ 해줘야함.
'IT' 카테고리의 다른 글
| 서브라임 에밋 Emmet / html attribute, list, table (0) | 2022.06.19 |
|---|---|
| 서브라임 텍스트 Sublime text3 다운 및 플러그인 설치 (0) | 2022.06.18 |
| IT 일기 / 뷰포트 메타 태그 (viewport meta tag) & jQuery 연결하기 (0) | 2022.06.16 |
| 비주얼 스튜디오 코드 필수 세팅 & VSC Extensions (0) | 2022.06.15 |
| 맥 M1 프로 caps lock 영문 대문자 딜레이 문제 해결 (0) | 2022.06.14 |