본문 바로가기

HTML & CSS

 (19)
HTML 기초 개념 - Apache 설치하기 #09 웹 서버는 Apache IIS Nginx 등이 있다. 우리는 Apache를 사용할 것이다. 오픈소스이고 무료이다. 1등의 자리를 빼앗긴 적도 없다. 'how to install apache http server windows' 검색 >appach 설치 for window 'how to easy install apache on window' 검색 https://httpd.apache.org/docs/current/platform/windows.html https://bitnami.com/stack/wamp Window Appache MySQL PHP 매니저가 자동으로 실행되지 않거나, 나중에 실행하고 싶을 때는 윈도우 탐색기에서 Bitnami를 설치한 디렉토리를 찾으세요. 보통 C:\Bitnami\wamp..
HTML 기초 개념 - 서버와 클라이언트 #08 웹을 위해서는 2개의 컴퓨터가 있어야 한다. Web Server는 웹 주소를 갖고 있다. 또한 index.html이라는 파일이 저장되어 있어야한다. Web Browser를 실행시키는 컴퓨터는 http://info.cern.ch/index.html 주소로 들어간다. 그러면 Web Server는 index.html이라는 코드를 Web Browser에게 전송한다. 그러면 Web Browser는 그 코드를 읽어서 User Interface로 변환시킨다. 웹 서버를 구축하는 방법은 두가지가 있다. 하나는 웹 서버를 직접 까는 것과 서버를 깔아주는 대행 업체에게 맡기는 것이다. Web hosting은 대행 업체에게 맡기는 것이다. Web Server는 직접 서버를 만들고 원리를 아는 것이다. >웹 호스팅 : git..
HTML 기초 개념 - 원시웹 #07 인터넷이 도시라고 하면 웹은 그 도시위에 있는 건물 하나이다. 인터넷이 도로라면 웹은 도로 위 자동차 하나이다. 인터넷이 운영체제라면 웹은 그 운영체제 안 프로그램 하나라고 할 수 있다. 웹은 인터넷의 부분집합이다. 웹과 동급인 기술이 별처럼 많이 있다. 인터넷은 1960년에 등장했고, 웹은 1990년에 등장했다. 하지만 우리가 인터넷을 웹과 구분하지 못하는 이유는 웹이 대성공을 했기 때문이다. 그만큼 중요한 기술이다. --- 1960년은 인류역사에서 처음이자 마지막이었던 핵전쟁이 끝난 지 얼마되지 않은 때 였습니다. 당시에 핵에 대한 공포는 상상을 초월하는 것이었습니다. 미국은 핵공격이 일어났을 때, 통신시스템에 심각한 취약점이 있었다. 당시 통신 시스템이 중앙집중적이었기 떄문에 핵공격을 당하면 통신이..
HTML 기초 개념 - 태그의 제왕 #06 현대의 HTML은 150여개의 태그로 이루어져 있지만 이들 모두 이 태그의 아래에 있습니다. 이 태그가 무엇일까요? 검색엔진들은 이 태그 덕분에 전세계의 웹을 항해하면서 웹페이지들을 발견할 수 있고, 이 태그 덕분에 더 좋은 검색결과를 만들 수 있었습니다. 이 태그가 없다면 검색엔진은 존재하지 않았을 것입니다. 우리의 일상에서 검색엔진이 없다면 어떤 일이 생길지 생각해 보세요. 이 태그가 무엇일까요? 이 태그가 없다면 전세계의 모든 웹페이지는 고립될 것이고, 정보혁명도 시작되지 않았을 것입니다. 이 태그가 무엇일까요? 이 태그는 도시의 길과 인체의 혈관과 같은 것입니다. 이 태그가 없다면 전세계의 모든 웹페이지는 고립될 것이고, 정보혁명도 시작되지 않았을 것입니다. 이 태그가 무엇일까요? 이 태그는 매일..
HTML 기초 개념 - 문서의 구조와 슈퍼스타들 #05 문법 공부는 끝났다. 문장이 모이면 페이지가 된다. 페이지가 체계화 되면 책이 된다. 정보가 많아지면 정보를 잘 정리해주는 체계, 구조가 필요하다. 그 구조를 만드는 방법을 알아보자. 우리는 빈도수가 높은 태그들을 우선적으로 알아보았다. 그런데 압도적으로 빈도수가 높은 태그들, 즉 '슈퍼스타'들을 의도적으로 알아보지 않았다. 이번 시간에는 슈퍼스타를 알아보자. 다른 사이트들은 내용을 잘 표현하는 제목을 표시하고 있지만, 우리는 파일 명이 제목이다. 보자. 이 제목을 바꾸고 싶을 것이다. 뜨거운감자 - 고백 설명 이렇게 나타낼 수 있다. 검색엔진은 우리의 페이지를 찾을 때, 이 타이틀 태그를 표지로 생각하고 찾는다. 따라서 우리가 태그를 사용하지 않는 것은 굉장한 손해가 될 수 있다. 또한, 우리는 웹 사..
HTML 기초 개념 - 부모 자식과 목록 #04 태그를 써보자. List라는 뜻이다. ***아톰 에디터에서는 ctrl + alt + 방향키로 multi cursor를 사용할 수 있다. https://atom.io/packages/multi-cursor 그런데 리스트가 겹칠 때, 각 리스트를 구분하고 싶다. 이럴때 의 부모인 을 사용할 수 있다. 앨범 1집 - Navi 2집 - New Turn 3집 - 연기(年記) 4집 - The Journey Of Cultivating A Potato field 멤버 김C 고범준 이렇게 작성하면 상단에 있는 리스트와 하단에 있는 리스트가 다른 그룹임을 그루핑 할 수 있다. 따라서 태그는 반드시 부모의 태그를 가지고 있다. 이렇게 나타난다. 번호를 주고 싶을 때는 어떻게 해야할까? 뜨거운 감자 앨범 1집 - Navi 2..
HTML 기초 개념 - HTML이 중요한 이유 #03 왼쪽은 일반인이 작성한 코드(블로그 에디터 사용)이고, 오른쪽은 html로 작성한 코드이다. 이 웹페이지의 정보를 검색하는 것은 tag로 찾는다. 검색엔진은 제목이 코딩인 사이트인 지식인의 사이트를 더 높게 평가를 한다. (SEO) 화려하게 만들고 편리하게 만들고는 싶겠지만, web이 갖고 있는 본래의 의미인 정보라는 것을 잘 이해해야 한다. 이미지를 통해 정보를 나타내고 싶은 생각이 많겠지만, 정보 점수에서는 높은 점수를 받을 수 없다. 따라서 코드를 깔끔하게 구성하는 것이 비즈니스에 있어서 엄청난 영향을 끼친다. 웹의 핵심적인 철학은 접근성이다. 웹 페이지 소스 코드는 누구나 볼 수 있고, 웹은 어떤 운영체제에서 접근할 수 있다. 이러한 개방성을 accessibility라고 한다. > 최후의 문법 속..
HTML 기초개념 - 줄바꿈 <br> vs <p> #02 'html new line tag' 검색 은 닫지 않아도 된다. 말 그대로 줄바꿈의 의미이다 는 단락을 나타내는 태그이다. 하나의 단락을 의미한다. 주석은 사이에 넣으면 된다. 돌아가는 시계바늘 찢어지는 하얀 달력 이상은 아주 큰데 현실은 몰라주고 갖은 건 꿈이 전분데. 돌아오지 못할 강물처럼 흘러간다. 다시 오지 않는 아름다운 나의 청춘 무뎌지는 나의 칼날 흐려지는 나의 신념 느낄 수 있을만큼 빠르게 변해간다. 세상은 이런 거라고 위로해보지만 인정하고 싶지 않다. 서로움의 눈물 한없이 흘러내린다. 돌아오지 못할 강물처럼 흘러간다. 다시 오지 않는 아름다운 나의 청춘 언젠부터 이런건지 나 혼자만 이런건가 후회만 많아지고 한숨은 길어지고 세상은 이런거라고 위로해보지만 인정하고 싶지 않다. 서러움의 눈물 한..
HTML 기초 개념 - 실습환경 준비 #01 HTML(HyperText Markup Language)은 두 가지 장점을 가지고 있다. 첫 째는 쉽다는 것이다. HTML을 사용하는데 중요한 문법을 배우는데 10분이 걸리지 않는다. 또 한가지는 Public Domain이라는 것이다. 주요 내용을 검색을 통해 찾아낼 수 있다. HTML 코딩과 실습환경 준비 'HTML Editor' 'best HTML Editor 2020' 검색해서 찾아라. 'atom editor' 채택. 웹 브라저를 열고 '파일 열기'(ctrl + o)를 눌러서 html을 직접 열 수 있다. ____ 앞 뒤에있는 것을 태그(Tag)라고 한다. 뒤의 슬래시는 닫아준다고 한다. 태그는 코드를 설명해주는 역할을 한다. www.w3.org 웹을 만드는 곳이다. 사이트의 코드를 보고 싶으면 페..

티스토리툴바