기초단계/HTML&CSS

2023.01.28 HTML

춘핑이 2023. 1. 28. 19:44

HTML

1. 학습개요

웹이라는 것은 문서를 전달받고 문서를 받는 과정
웹 퍼블리셔의 역할 디자인요소 구조화하는 일 HTML
옷입히는 일 CSS CSS가 없다면 순수하게 텍스트로 이루어짐
웹퍼블리싱 -> 웹문서를 만들기이다.

2. 웹과 인터넷의 차이? 관계?

인터넷 != 웹
웹브라우저로 문서를 본다. 파일전달받기도한다. 이메일을 보기도 한다.
웹이라는 것 하나로 파일 문서옮기고 하지만 넷상에서 돌아가는것처럼 보이지만 같은게 아니다.
WEB WWW
인터넷은 인터 네트워크 기술 중에 하나이다.
main terminal에 단말기들(terminal)들이 문서를 공유했다. 과거엔 이런 네트워크를 했다.
다른 회사에도 유사한 네트워크가 있었다. 서로 단절 된 상태로 자원을 공유하지 못했다.
과연 이네트워크를 연결하면 어떨까? 이것을 연결하는 inter network기술이 고민되게 되었다.
세계에서 고민을 했는데 미 국방성 산하 alpha net이 internet이 되었다. 1983.1.1부로 전세계에 퍼지게 되었다.
인터넷이 생기고 네트워크와 네트워크 단위가 생겼다. a에서 파일들을 b로 옮기고 싶다. 제공하는 쪽(서버) 요청하는쪽(client) 수많은 프로그램을 통해 요청을 할수있게 되었다.
서버또한 이 요청방식에 요청하기 위한 프로그램들이 필요하다. 서로 호환되지 않는 것이 인터넷에서 돌아다니면 매우 불편하다.
그래서 서버와 클라이언트간에 데이터를 주고받을 때 하나의 표준화된 방식으로 정해두고 서로 호환되게끔 방식을 취하고 있다.
전송되는 방식은 표준인 FTP를 정했다. file transfer protocole
FTP 위에서 SMTP(메일) TELNET(명령어) 등이 생겨났는데 www도 이때 생겨남.
WWW(http)문서를 전달하기 위한 규약 hypter text로 보내기 위한 프로토콜임. 웹브라우저들이 표준화된 이것을 사용함.
인터넷은 고속도로 www는 특정택배 역할이라고 할 수 있다. 요즘에는 인터넷 위에 www가 있기때문에 차이가 없게 느껴지는 것임. 하지만 결코 같지않다.

3. 웹의 탄생배경

berners-Lee라는 사람이 1990년 11.12 Hyptertext project 제안함. CERN이라는 곳에서 시작됨. 물리학자들이 연구하면서 이 연구문서들 용어를 찾아보면 또 오래걸림.
용어등을 Hyptertext로 이어지게 하자고 제안햇음. 이당시에선 프롬프트로 보는 것이엇음. CMD에서.
시간이지나 윈도우라는 환경에서 컴퓨터가 바뀌고 Mark Andreeseen이라는 사람이 1993년 Mosaic이라는 웹브라우저를 개발하게 되엇음
윈도우환경에서 Hyperlink를 표현할 수 잇는 브라우저를 만들어냄. 이때 회사를 만드는데 netscape가 생김. 이 브라우저가 생기면서 www가 널리 알려졌다.

이 웹이 없엇더라면 우리는 gopher 프롬프트 환경에서 사용했다. 도서관 형태에서 검색하는 형태 였음. 목차검색 dir검색이엇다. 모뎀으로 다운받으면 이것을 저장하게 되었다.
윈도우와 Mosaic이 등장하면서 없어지게 됨. 순수하게 텍스트로만 이루어진 것은 사라지고 하이퍼링크가 도입되기 시작했다.
클릭으로 브라우징이 가능하게 되었다.
이 문서를 전달받고 전달받는다 제공하는 사람(서버) 요청하는 사람(웹클라이언트) 가 생겨낫다.

4. 웹문서와 웹서버의 이해

서버가 클라이언트가 있다면 어떤형식으로 존재하는가?
양끝단에서 문서를 가지고 있는사람이잇고 문서를 요청하는 사람이있다.
가지고 있는 사람이 웹서버이다. 특정디렉토리가 있다.
클라이언트는 브라우저라는 것을 통해서 주소나 하이퍼텍스트를 클릭함. 서버의 파일을 달라고 요청함.
http에서 get요청 reqeuet하면 홈디렉토리에서 뒤져서 제공 response한다. 문서가 잇고 이것을 식별할 이름이 있다면 돌려준다.

5. 그냥 한번 HTML 만나보기

웹문서 만들어보기 초간단 문서 메모장으로 한다.
웹문서는 3가지 요소가 있다. content(내용)
특정 블럭을 감싸서 컨텐트를 조작한다. -> 태그

안녕하세요~ <b>뉴렉쳐</b>입니다. 
<font color="blue">뉴렉처 강의는</font> 
단편적인 지식보다는 <u>용어의 올바른 이해</u>와 
그것을 제대로 사용할 수 있도록 하는
<i>올바른 코딩지침</i>을 알려주고 있습니다.

단순히 텍스트가 아니라 브라우저가 예약된 것을 해석해서 렌더링해서 보여준다.

6. Markup 이란?

Markup 언어
문서편집과 콘텐츠 구분자의 필요성
HyperText를 문서내에 포함하겟다. 수많읂 텍스트 여기서 특정 문자를 표시하고 싶다.
여기서 사용되는게 Markup이다. 특정이 더 알고 싶다. HyperText로 구분한다.
이것을 범위 블록을 감싸는 것이 마크업이라고 한다. <>로 감싸면 컨텐츠로 인식하는게 아니라 의미까지 부여하게 된다.

태그의 기호 <>가 마크업 기호로 적합한 이유 문서내에서 자주사용하는 기호 [] ,, 등등을 사용하면 문제를 발생시킬 수있다.
문서내에서 자주사용하는 것을 기호로 사용하면 문제가 된다. 한단계로 끝나는게 아니라 중첩을 가질 수 있다.
중첩을 하면 컨텐트로 사용할 수 있는 기호가 없어지는 것임.범용적으로 쓸수있는 방식을 만들어냈다.
그것이 <>이다. 더크게 감쌀때도 다른 의미로 인식하게 할 수있다. 몇개가 중첩되든 완전히 구분될 수 있고 일관되게 반복적으로 사용할 수 있다.
이 <> 을 tag라고 한다.
Markup언어란 문서의 콘텐츠를 구분하기 위한 태그 집합이다. 이미지 문장 등 구분 짓기 위해 사용한다.

정말 많은 태그가 있다. 배워야하는 입장에서 다 알아야되나 매우 불안하다. 다루다보면 알게 된다.

7. HyperText 란?

Markup알아봣으니 HyperText를 알아봐야한다. HTML에서 뒷부분 M이 Markup이고 앞부분 HT가 HyperText이다.
HyperText는 이 마크업 중에 특별한 녀석이 있다. 더 자세히알 수잇도록 페이지를 연결하고 싶다.
하이퍼텍스트입니다 \a>/a> 앵커 닻임. 이걸로 감싸져있는것을 HyperText이다. Hyper는 over 저건너 라는뜻을 가지고있다.
건너의 텍스트를 가지고 있다. 어떤 주소와 연결되어있는지 주소를 넣어 줄 수있다. 특정 url을 넣을 수있다.
또한 링크로 되어있어서 Hyperlink라고도 한다.

8. HTML파일의 기본구조

규칙
언어는 a가 b에게 의사전달을 한다. 어떤 키워드를 문서에 작성했다. 의사전달도구가 규칙없이 마구잡이로 사용한다면 의사전달할대 문제가 발생할 수 있다.
자연어의 경우에도 어휘 문법이 있다. 문법을 지키지 않고 어휘를 나열한다면 언어가 될 수 없다.
태그가 존재하고 태그를 사용하는데 규칙이 필요하다.

<html>
<head></head>
<body>
</body>
</html>

html이라는 안에 head와 body가 있어야한다. head는 브라우저 화면에 보여지는게 아닌 설정이다.
보여줄내용은 body에 들어간다. 사이트주소 사이트 내용 대략적내용 = head에 작성한다.
문서에 보여질것은 body에 작성한다. 지난번에 다룬 것을 넣어보자.
태그안에 태그가 들어가있음. 들여쓰기로 올바르게 만들어져있는지를 확인하자.

보여지는것은 큰차이가 없지만 반드시 넣어야한다.

9. DOCTYPE과 W3C

상단에 !DOCTYPE html를 일반적으로 넣는다. 왜 넣는가?
이태그는 html4.0때만 하더라도 복잡했다. 또한 서로다른 방식의 제약형태가 잇엇다.
브라우저가 여러개가 있는데 이것을 지정하지 않으면 a브라우저에서 보여주는 모양이 b브라우저에서 보여주는 내용이 달랐다.
어떤 브라우저에서 보느냐에 따라 다른건 좋은 현상이 아니다.
똑같은 태그로 똑같은 문서인데 배경이나 모양이 다르면 좋은게 아님.
브라우저가 브라우저마다 다른 렌더링방식을 가지고 있다면 모여서 이렇게 해주자 라고 약속하지 않았으니 어찌보면 정상적이다.
하지만 같게 나오는것이 우리가 원하는 것이고 필요성이 높아졌다. 다 자사가 자기것들을 가져오기를 바란다.
브라우저마다 자신들의 태그를 등장하게 되었다. 더군다나 다양한 브라우저들이 생겨나고 있다.
만약 경쟁구도를 이렇게 방치한다면 개발자들은 브라우저별로 페이지를 만들어야하는 상황이 오게 되었다.
그래서 90년대에 W3C라는 기구가 생겻다. WWW consortium이라는 곳이다.
MIT LCS / ERCIM / 일본게이오대학이 모여서 웹의 표준을 정의해보자 하면서 기구가 만들어짐.
ISO, IEFE등등도 같이 모임. 멤버들을 모음 태그를 넣자고 제안 -> 다른멤버들에게 공표 받아들여지면 특정브라우저로 시범-> 권고안으로 제시
브라우저를 만드는 회사들이 권고안이 강제성이 없으니 만들건지 알아서 정함.
W3C는 브라우저들이 호환안된걸 사용하는 것이 좋지 않아서 3가지 방식을 제안했다. strict.dtd -> loose.dtd -> frameset.dtd점점 제약사항이 줄어듬.
우측으로갈수록 특정 브라우저에 종속 좌측으로 갈수록 모든 브라우저에 엄격한 형태임.
만약 이걸 넣지 않았다면 기준이 없어서 렌더링한다는 것은 표준화된게 아니라 내 멋대로 쓰겟다는 것임.
quirks렌더링방식을쓴다는 것임.
4.0때만 하더라도 표준화된 것을 고르게 되었다. 3가지 있다는 것또한 문제가 있는 거엿음.
html5에서는 이게 없어짐. 표준화된 방식으로 하고 지우면 브라우저만의 방식 quirks로 하겠다는 것임.
그래서 이게 등장하게 되었다. html이라는 것을 나타내는 것이다.

10. 실습환경 준비하기

메모장으로만 할 수 없다. 편리한 편집기 vscode
사실 ide vs가 잇엇는데 플랫폼을 다양화하면서 다른 운영체제에서도 돌아갈 수있도록 소프트웨어를 팔아먹는 회사가 된다며 만들어냇다.
간단한 편집기이다. 여기에 플러그인을 하나씩 추가하면서 ide가 되고있다.
js강의 보면 환경이 있다. https://youtu.be/K93FSlLALiU
vscode는 편집기능이 극대화 된것이다.
서버를 통해서 개발용 웹서버 live server다운받자.
https://youtu.be/\_W3LLg-Uu38
http라는 프로토콜로 서버를 보게 된다.
vs코드로 편집하고 라이브로 볼 수 있다.

11. PC웹과 모바일 웹의 실습순서 안내

pc웹과 모바일 웹이있다. 과거에는 pc로만들었는데 모바일 웹이 있다. 두개가 양분화되어있엇다.
이 중간을 메꾸는게 다양하게 등장함 태블릿 등 중간에 이것들을 위한것을 어떻게 만드는가?
pc웹이 모바일 웹을 따라가지 못하는 게 생겨났다. 모바일로 소모하는 트래픽양이 더 많아졋다.
pc로만 만들면 트래픽양을 적게 만드는 것을 가지게 된다. 일단 모바일 웹부터 만드는게 중요해짐. 사이즈 큰녀석에 반영할수 있게끔만듬.
모바일 first와 반응형웹 모바일만 만들고 크기에 따라 반응하는 pc를 만들겟다.
하지만 현실적으로는 따로 만드는 경우가 많다. 컨텐트가 너무 달라서 pc에서보여주는건 모바일은 몇개만 보여줄경우
입력도구가 다른 경우 마우스 vs 터치 그래서 작업용화면은 pc로하고 소비화면은 읽기조회가능한 모바일로 양분등
pc가 남아잇는경우는 키보드 마우스이므로 생산성이 좋아서 남아있다. 작업환경으로서의 웹은 pc가 좋다. 그래서 두가지가 양분하고잇다.
그래서 둘다 만들어야한다. 첫번째 pc html selectors css att 등 배우고 모바일에서의 반응형 media query responsive image등을 배우고자 한다.

12. 실습을 위한 파일 구조 생성하기

파일명 경로명?
문서들의 연결관계 클릭하면 가게하겟다.

계층하나하나가 파일이다. 각각 하나하나가 파일임. 파일명이 중요하다. 각각이름을 붙여보았다.
이것들을 한 디렉토리에 넣어야하나? 그건또 아님 파일수가 많을 것같다. 기능별로 구조화해야한다.
자세한건 프로젝트 할때 정한다.

root파일을 홈디렉토리로 사용할것이다. vscode로 파일을 만들것임.
html5
파일명이 같다면 -로 구분한다. html과 css의 관습이다.

13. 상대경로와 절대경로

경로를 알아보자.
하이퍼링크를 사용하는데 index에서 notice를 가거나 한다.
/는 절대 경로이다. ./는 현재 자기경로를 의미한다. ../는 상위 폴더를 의미한다.
여러번 상위? ../../하면된다.
!누르고 선택하면 기본적인것 html모양이 추가가 된다.

golive하면 웹서버에 요청을 함. root디렉토리를 홈디렉토리로 보고 거기서 index.html을 돌려주게 됨.
경로를 적지않고 파일명만 적으면 어딘지 모름.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="index.html">홈</a>
    <a href="notice/list.html">공지사항목록</a>
    <a href="member/login.html">로그인</a>
    <a href="member/signup-agree.html">회원가입</a>
</body>
</html>

근데 이렇게하면 index의 입장에서의 경로라서 다른데선 안된다.
list 입장에서 index는 ../indext.html인것임. login은 ../member/login.html
경로라는 것은 두가지 방식이있다. 이런것은 상대 경로를 한것임.
/index.html 로하면 /은 home디렉토리임. 절대경로라고 할 수있다. 상위 갓다가 갈필요없다.
절대경로 root에서 하나씩 내려가는 것이다.
쓸거면 하나로 몰아써야하는데? 상대경로를 쓰는게 좋다. 절대경로는 수정할때 수정할게 너무많아짐.
-> 나중가면 매핑을 하기때문에 상관없다.

14. SGML은 무엇인가 그리고 HTML과의 관계는?

태그를 보면 태그를 묶고 그 태그를 마킹하기 위한게 잇다. 그자체로 내용이있는 것도 있는데 이런 것을 단일태그라고 한다.
예를들어 <meta charset="UTF-8">가 있다. 닫는 태그가 없다. > VS /> 의 차이가 뭔가
설정에 따라 다르다. 어떤 설정을 어떻게 해야 뭐가맞는가? 그 설정을 가장위에 한다.
설정을 4가지로 할 수있다.
1번은 순수하게 HTML 3번은 xhtml이 해석한다. 2번째는 두개를 합친 것임. 해석기가 단일 태그는 <br>
xhtml은 단일태그는 <br />을 꼭 해줘야한다.
그럼 xhtml은 무엇인가? 알려면 html의 문제점을 알아야한다.

데이터를 저장하거나 전달하기 위한 마크업
1960년대 ibm에서 범용적으로 사용할 수 있는 마크업 언어를 만들었다.
html이 나오기전에는 SGML이라는 언어가 있었다. 전신은 GML이다.
일반적으로 문장을 보여줄때 , 나 ""로 구분을 했다. 그런데 이런식으로 마크업하면 컨텐트를 표현하기가힘들어진다.
내려쓰기를 하거나 번호=1 제목=2 이런식으로 하기도 했다. 레코드가 목록이면? 더 복잡해짐
데이터를 구분하기 위한 구분자 구조 등 이 어려워졋다. 이런 데이터를 구분짓기 위한 마크업도구 가 <>를 가진 태그이다.
<>안에잇는것은 무조건 태그가 되는 것이다. <>만 조심하면 어떠한 것도 컨텐츠를 넣을 수 있게 되었다.
이 태그를 활용하는게 많아졌고 이것을 활용하는 분야 중하나가 '웹'이다.
웹은 정의된 태그만 사용할 수 있다. head body가 있으며 역할이런 것은 이미 정의 되어있다.

정의된 내용대로 만들어야한다. html은 이미 정의된 형식대로 만들어짐. 이것을 정의할때 사용된는 언어가 SGML이다.
이것들이 Meta Language라고 한다. 언어를 만드는데 사용되는 언어 SGML로만들어지는 언어는 아주 많은데 웹과 관련되는것은 HTML과 HDML(과거 피쳐폰 웹문서) 이 있다.
SGML이 메타언어로 만들엇고 그 구조로 만들게 되었다.
문제가 하나 등장한다. 문서타입을 미리 정의한대로 사용하는게 현대 웹에서는 결격사유임.

15. 시멘틱 웹과 XML 그리고 XHTML과의 관계

1.시맨틱을 지원하는 문서로의 변화 W3C
굉장히 표준화가 만들어지고 수반하는 브라우저를 만드는 VENDER들이 잇엇다.
W3C는 문서를 문서로 보는 포커스를 가지고 잇엇다.
2.프로그래밍 플랫폼으로의 변화 WHATWG
브라우저들을 만드는 사람들은 프로그램인 환경으로 변화시키는데 관심을 가졋다.

W3C는 문서가 미래지향적으로 변화하기를 바랫다. 기존웹의 구조 사용자->HTML->웹정보
시맨틱웹의 구조 에이전트(TV AI 가전 등)-> WEB 데이터를 인식하는 다른 모양 -> 웹지식 자원을
HTML이 이런 에이전트가 보는거로는 좋지 않다는 것이다.
HTML태그가 이런것을 바라보는게 옳지않다. 태그가 마크업도구가아닌 모양을 가꾸는데 역할이 중시되고 있는 것 같게 되었다.
W3C에서 웹을 바라보는게 내용을 충분히 설명하도록 바꾸고 싶게 되었다.
이 데이터를 감싸는 태그가 미리 정의가 될 수 있을 까? 업무에 따라 미리 만들 수 있을 까? 불가능
태그를 정의 하지 않겟다. 미리 정의 안하고 규칙만 맞추면 원하는 태그를 아무때나 사용 할 수 잇게끔 한다.
-> XML ->HTML의 호환성을 유지하고 태그를 정의하고 확장도 가능한 XHTML을 만들어냄.
XHTML이 데이터를 해석하는 쪽에서는 더 바람직한 모습이다.
의미를 가진 웹 시맨틱 웹이 등장하게 되었다.

XML을 하면 형식만 맞추면 되게 된것임.
그럼 우리가 사용해야하는 태그는 무엇인가? 둘다 가능하다.

16. HTML의 버전과 HTML5의 탄생배경

HTML1.0 -> HTML4.0 -> XTHML 1.X(얘는 다른녀석) -> HTML5.0
브라우저들을 만든 회사와 표준을 만드는회사의 이해관계가 부딪치게 됨.
W3C가 SGML->XML로 변경하겟다 새로은 XHTML을 만들겠다고 함.
초반에는 개발자들은 해석기만 달라졋을뿐 크게 달라졋지 않앗다.
XHTML 2.0부터 호환성이 확떨어짐 VENDER들이 준비하던게 아예 달라지게 된다. 시맨틱하게 하면서 아예 너무달라짐
VENDER들이 반기를들고 html4.0을 이어가겟다 하면서 html5.0을 만들기로함.
WHATWG라는 기구가 만들어지고 html을 연구하기 시작했다. 다양한 화면기술 api등을 발전시키고자 하기 시작했다.
기존 html4.0에 하나씩 추가하게 되었다. flash등 이런게 생겻는데 이런거를 줄이고 웹에서 그냥 사용되게하겟다 이것이 html5이다.
html4.0+시맨틱 웹인 것이다. w3c도 html5을 같이 연구하게 되었다.
다양한 웹을 만들수 있는 프로그램이 된것이다.
시맨틱 태그를 원하면 xmlns도 넣어주면된다.
https://youtu.be/cg2QrYr5NCE

17. 웹문서 작성 1단계-콘텐츠 작성하기

사이트를 받으면 비트맵을 받는다. 스타일을 분리한 현대적인 방식 제일먼저 디자인은 빼고 내용만 넣는다. 컨텐트가 무엇인지
이미지 색상 그런것을빼고 텍스트만 보기. 그래서 어떤 것니 콘텐트인지
Web Developer를 설치해서 확인해서 Disable All Styles 하면 컨텐트만 남음.

기본 html구조에서 body에 출력할 콘텐트 나열하기

텍스트들을 나눠보자. 이제 뭐해야하나? 마크업. 어떤태그를 사용해야하는지?

18. 콘텐츠의 블록 작성하기 #1

사진과 같은 것을 만들 것이다.
문서를 가지고 컨텐트가 잇다면 각각의 컨텐츠를 블록을 잡아야한다.
결국 태그로 블록을 잡는다.
디자인파일을 받앗다면 바깥부터 안쪽으로 간다. 방을 만들고 방안을 나누고 컨텐트를 넣느다.
큰것부터 미시적으로 간다. 문제는 이러려면 경험이 잇어야한다. 방을 만드는 것 태그 구조를 다 알아야한다.
처음배울때는 미시적으로 간다. 내용을 감싸는것부터 알아보도록 하자.

신문처럼 목차를 짜는것임.

18.1 제목 h1~h6

제목 <h1>뉴렉처 온라인</h1>

18.2 목록을 위한 태그 ol ul dl

ul 순서없는 목록 li리스트 ol 정렬된 목록
메뉴는 각각이 순서가 없기때문에 ul이 맞는듯.

<ul>
    <li>학습가이드</li>
    <li>강좌선택</li>
    <li>AnswerIs</li>
</ul>

munu도있는데 마우스 오른쪽 누르면 나오는 메뉴 등
dl은 목록이긴한데 dt와 dd로 담음 용어 - 용어 설명의 관계임.

18.3 폼

총이름 legnd filedset
검색 정보 입력도구 input 이것의 이름lable등

 <form>
    <fieldset>
        <legend>검색입력필드</legend>
        <label>과정검색</label>
        <input type="text">
        <input type="submit" value="검색">
    </fieldset>
</form>

하면 그루핑이 된느낌이 됨.

19. 콘텐츠의 블록 작성하기 #2

구분하기 위해 최소한의 블록을 잡아가고 있다.
소규모 블럭들을 만든다. 제목이냐 문장이냐 내용이냐 폼이냐 등 어떤 범주냐에 따라 만든다.

제목? 목록? 문장? 표? 폼?인지를 구분한다.
<table></table> 층을 <tr></tr>로 구분한다. 한줄안에 구분될필요가있다 이 각각을 나눈것을 <td> </td>

구분하기 편하게 한줄로 작성한다.

<table border="1">
    <tr>
        <td>번호</td>
        <td>제목</td>
        <td>작성자</td>
        <td>작성일</td>
        <td>조회수</td>
    </tr>

내용은 나중가선 java jdbc를 이용해서 표시하게 된다..!

<div>
    1 / 3 pages
</div>

이녀석은 제목 목록 문장 표 폼도 아님 그럼 무엇인가? 이도저도 아니다. 그냥 블럭으로 구분짓기 위해 div태그가 잇다.
영역만 나누는 녀석임.

<div>
    <div>이전</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li> 
        <li>4</li> 
        <li>5</li>
    </ul>
    <div>다음</div>
</div>

이도저도 아닌 녀석이 있다면 또 div로 감싸면된다.

2023.01.28 후기

https://2hyes.tistory.com/91 깃헙 프로젝트 올리는법(파일너무많아서 그냥안됨.)
이런역사 배우는 것 없이 그냥 html을 배웟엇는데 더 흥미로워지고 필요성을 더 잘알 게 된 것같다.
학원에서 배울때 재미가 없엇는데 왜 배우는지 왜 사용하는지를 알게 되니 이부분도 재밌게 느껴진다.
범위를 잡아주면서 느껴지는 점은 결국 많이 해봐야 알 듯 하다. 단순히 화면에 내용을 표시하는 백엔드 부분은 반복숙달을 하면 비슷한 내용이다.
하지만 웹퍼블리싱, 디자인이라는 것은 매우 힘든 것 같다. 이런 부분을 잘하는 분을 팀으로 포섬해야한다.
아무튼 디자인을 할때는 범주를 정하고 어느 범주인지 정하는게 중요하다.
내용 구성 기획 하는 부분이 매우 어려운 것 같다. 이부분을 경험을 쌓아 능력을 쌓는게 중요해 보인다.