고정 헤더 영역
상세 컨텐츠
본문
728x90
Q. 웹퍼블리싱이란
- 기획, 디자인, 퍼블리싱에서 디자인에서 퍼블리싱을 하는 과정 (html, css까지)
- HTML. markup language (어디에서부터 어디까지)
1 내가 뭘 만들건지 기획
2. 컨텐츠 구분 (html)
3. 스타일 입히기 (css)
Q. 인터넷은 웹이다?
- 웹문서를 만든다는 사람이 웹에 대해 알고 있어야지~
- 인터넷 = inter-network 기술 중 하나.
네트워크와 네트워크를 연결하는거.
- 서버는 뭐고 클라이언트는 뭔가
- 네트워크가 만들어졌다는 것은, 한 쪽에서 한 쪽으로 이동이 가능해진 것
자원을 갖고 있는 쪽은 제공하고 싶겠지 <-> 반대쪽은 자원을 요청하고 싶겠지.
서버 클라이언트
- 클라이언트는 필요할 때 들어온다. 필요할 때만 받으면 되니까
- 서버용 컴퓨터란 : 서버는 클라이언트가 언제 요구할지 모르니까 24시간 안정적으로 돌아갈 수 있는 환경이어야 하니까, 그러니까 서버용 컴퓨터란 꺼지지 않게끔 24시간 업데이트 가능한 컴퓨터(파워가 최소? 2개). (일반적으로 데스크탑은 파워가 1개. 꺼야만 업데이트 가능하고 파워 교체가 가능한)
- 주고 받는 서비스들이 생기면서, 파일 주고 받는 FTP, 메일 주고받는 SMTP, 문서 WWW (http) 등 다양한 프로토콜이 등장
- 약속을 기반으로 요청을 해야함.
- 요즘은 다 WWW 위에 얹어짐. FRP가 원래 internet 위에 있었는데 WWW 위에 있게된 것
하지만 WWW(웹)와 인터넷은 같은 녀석이 아니라는 거
웹 문서 만들어보기 (=이게 퍼블리셔가 하는 일)
- 구분할 때 사용하는 게 태그
1. 컨텐츠 적고
2. 저장하고 (ctrl + s)
3. 맨 왼쪽 index.html 우클릭해서 'reveal in File explore' 열면 됨
- 인간이라면 취미가 아래 항목들이구나~ 하고 구분할 수 있음. 하지만 컴퓨터는 취미가 뭔지 알아보기 쉽지 않음.
구분해주는 작업(markup)을 해줘야함. html을 배우는 이유
- 어떻게 구분해줘야 하나?
- 태그 기호로 <>가 마크업 기호로 적합한 이유
컨텐츠에 자주 사용하지 않기에.
<b>여기에서부터 여기까지 굵어주게 해달라</b>
- markup 언어 = 문서 컨텐츠를 구분하기 위한 태그 집합
- 그림 속 태그가 태그의 전부가 아님.
저거 말고도 이외의것도 언제 다 숙지하려나?
-> 생각의 전환. 우리가 드라마 볼 때도 16부작 드라마라도 하루만에 볼 것. 그렇게 신기하게 느끼다보면 어느 순간 다 끝나있어요~ ㅎㅎㅎ
<ul>순서가 없는 목록을 구분</ul>
<ol>순서가 있는 목록을 구분</ol>
- 1번 취미를 해야 2번 취미를 할 수 있는건 아니니 <ul>
<li>그리고 리스트화해주고 싶어</li>
<h1>제목을 해주고 싶어</h1>
- 마크업이란 문서에서 컨텐츠를 구분해주는 것
- html 태그를 제대로 쓴건가?
Q. HTML 문서의 기본 구조 (규칙)
<html>
<head>
컨텐츠가 어떤 뷰를 갖는다던지 하는, 컨텐츠를 위한 컨텐츠 자리 (메타?데이터)
</head>
<body>
</body>
</html>
- i (느낌표) + 엔터 누르면 -> 위에 기본 구조를 보여줌
- ul>li*3 치면
<ul>치고 <li>를 3번씩 칠 필요 없이 한 번에 쫙~ 보여줌.
<title>다른 사람에게 노출하는 정말 중요한 역할</title>
Document -> 김태희의 취미로 바꿔주면
-> 웹 열었을 때 위에 탭 제목, 즐겨찾기 이름이 '김태희의 취미'로 (이거 실습해봐야 함)
- 문서구조보다 더 위에 있는게 파일구조
문서구조 : 컨텐츠 감싸는거
파일구조 : 컨텐츠를 가지고 있는거
- 파일구조 만드는 법 :
1. 웹 문서를 만들게 될거다 ex) 뉴렉처 사이트 (=웹 퍼블리싱)
- 이때 사용하는 언어 html, css
html : 문서의 구조를 만드는 언어
마크업 하는 도구 = 태그
태그는 규칙이 존재해서 규칙에 따라 사용해야함
- 문서를 만들려면 파일이 있어야 함
파일구조 먼저 알고 -> 문서구조 할 예정 (내일)
*파일구조*
- 예를 들어 파일들을 쫘아아악 펼치는 것보다는, '정리'를 해주는 것
ex) (이건 소그룹 내 스터디에서 다른 분이 말해주신거) 이 파일 내에서, 이 파일은 수정 역할 ~ 너는 어느 약할 ~
cf ) 문서 구조 : 컨텐츠의 구조 ex) 이 페이지에서 목차는 메일을 넣고, 동영상을 넣고 해야지~
728x90
반응형
'수업 일지 > HTML, CSS, Flex, Grid' 카테고리의 다른 글
| 7일. HTML(6) - 테이블 만들어주는법, 1/5, 1-5 페이지 만들어주는법, inline vs block (0) | 2021.02.26 |
|---|---|
| 6일. HTML(5) - section, article, aside, nav (0) | 2021.02.25 |
| 5일. HTML(4) - header, main, footer + aside // 고전적인 방법 (0) | 2021.02.24 |
| 4일. HTML(3) - 상대경로, 절대경로, 컨텐츠 블록 태그 5개(제목, 목록, 문장, 표, 입력폼) (0) | 2021.02.23 |
| 3일. HTML(2) - HTML이란, 폴더 정리법 (1) | 2021.02.22 |
