인터넷에서 웹이 동작하는 기본적인 원리 인터넷이 동작하려면 최소 2대의 컴퓨터가 필요하다. 역할에 따라서 서버와 클라이언트로 부른다. 따라서 웹이 인터넷에서 동작하려면 웹 클라이언트와 웹 서버가 필요하다. 인터넷에서 웹이 동작하는 과정을 살펴보자. 웹 브라우저를 설치한 클라이언트에서 인터넷을 통해 웹 서버에 접속한다. 클라이언트가 서버에 index.html 파일을 요청(request)한다. 웹 서버는 저장장치에서 index.html이라는 파일을 찾아서 클라이언트로 전송한다. 클라이언트의 웹 브라우저는 수신한 index.html이라는 파일의 코드를 읽고 해석한다. 웹 브라우저의 화면에 보여준다. 이미지 출처 : https://youtu.be/yBPyzaccbkc 웹 서버를 운영하는 하는 방법은 크게 2가지..

https://opentutorials.org/course/3084/18418 HTML 태그의 제왕 - 생활코딩 우리는 지금까지 문서를 만드는 방법을 충분히 자세히 살펴봤습니다. 태그를 결합하는 방법을 완전히 마스터했고, 빈도수가 절대적으로 높은 태그들을 살펴봤습니다. 앞으로 배울 것 보다, 지 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. a tag 지금의 웹을 만든 중요한 태그가 있다. 웹과 웹이 서로 연결하는 태그가 그것이다. text href : Hypertext + reference 자주 쓰는 형식은…. text target=”_blank” : 새 탭으로 열기 title=”…” : 커서가 위에 있을 때 표시되는 정보 출처를 표시하기 위해서 나무위..

https://opentutorials.org/course/3084/18488 HTML이 중요한 이유 - 생활코딩 --- 누구나 기초가 중요하다고 말합니다. 하지만 기초가 중요하다는 말을 잘 들어보면 응용으로 가는 과정으로서 기초가 중요하다는 뜻인 경우도 많더라구요. 그런데 사실 기초는 기초만으로도 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. HTML을 의미에 맞게 사용한다는 것 중요하다. 검색 엔진은 웹 페이지에 담긴 html 코드를 분석한다. 태그에 근거해서 정리 정돈한다. 현대 사회에서 검색 엔진의 위상을 고려해 볼 html의 의미에 맞게 사용한다는 것은 비즈니스 측면에서 중요하다. 또 신체적 장애가 있는 분들이 사용하는 청각화 장비도 html을 ..

HTML 코딩 실습 환경 준비 - 생활코딩 HTML 코딩 실습 환경 준비 - 생활코딩 --- 기획이 끝났으니 이제는 코딩하기 위한 준비를 해보겠습니다. 코딩을 하기 위해서는 에디터(Editor)라는 프로그램이 필요합니다. 각자의 운영체제에는 이미 에디터가 준비 되어 있습니다. opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 준비 강의에서는 atom editor로 진행하지만, 나는 vs code를 사용하기로 했다. 바탕화면에 web이라는 디렉터리를 만든다. 프로젝트에 사용할 파일은 이곳에 저장한다. 강의 목표 오픈 튜토리얼 html 강의의 목표는 아래와 같은 웹 페이지를 만드는 것이다. 강의에서 이고잉 선생님이 … 우리 수업에서 강조하는 부분은 자기 자신을 ..

웹 개발을 위한 vscode setting 비쥬얼 스튜디오 코드 설치 및 웹개발을 위한 필수 익스텐션 10개 추천 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 시작할 때 알면 좋은 것 ⇧+⌘+P : 상단에 명령 팔레트 창을 연다. html:5 + tab : .html 파일을 처음 만들었을 때 기본 형식을 완성해준다. ⌘L ⌘O: 명령 팔레트 >live Server : open with live server 단축키 시작 오픈튜토리얼은 https://opentutorials.org/course/3084에서 배울 예정이다. 하핫. 책까지 사버렸다.

HTML에서 많이 쓰이는 대표적인 6가지 태그 youtube 참고영상 html에서 가장 많이 쓰이는 태그 6종 : 영역을 정의한다. (division) : 문자 정보의 단락을 정의한다. (paragraph) : 이미지를 첨부한다. (image)(Empty element) : 입력값을 받을 수 있는 창을 만든다. (Empty element) : 버튼을 추가할 수 있다. : hyperlink를 추가할 수 있다. 와 의 차이점 는 를 포함할 수 있다. 는 를 포함할 수 없다. 와 모두 block element다. 는 HTML 문서의 영역을 구분하는 용도다. 각 영역의 용도를 구별하는 기능이므로 다른 블록 요소가 하위에 포함될 수 있다. 반면 는 문자 정보를 입력하는 단락을 구성하는 용도로 사용된다. 의 하위 ..

Anatomy of an HTML document HTML 문서의 구성 This is my page HTML document의 시작은 로 시작한다. A DOCTYPE is a required preamble. DOCTYPE은 필수적인 서문입니다. DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the rel..

Attributes example My cat is so grumpy # class="ramen ins delicious" 부분은 attributes에 해당한다. Attributes contain extra information about the element that won't appear in the content. 띄어쓰기로 element name과 다른 attribute와 구분되어야 한다. The attribute name 뒤에는 =가 붙는다. An attribute value는 인용구 "가 앞뒤로 감싼다. Anchor for a hyperlink. : a는 anchor를 뜻한다. hyperlink를 끌어오는 느낌으로 anchor를 사용하는 듯하다. 각 element마다 사용할 수 있는 attri..