본문 바로가기

전체 글63

html 테두리로 상자 만드는 border 속성과 block element, inline element, none 값 제목, 본문 등 작성한 내용에 테두리를 적용하는 border 속성에 대해 알아보겠습니다. 우선, 아톰 에디터로 새 파일을 생성합니다. 이름은 box.html로 하겠습니다. 테스트를 위해서 이 파일에는 아래와 같이 html의 기본 코드를 작성해줍니다. 본문에 아무 내용이나 적어주고, 첫 문장은 h1 태그를 이용해 제목으로 지정합니다. 제목이 아닌 일반 문장은 p 태그를 사용해 문단으로 처리해 줍니다. 제목으로 처리한 "Code is so useful."이라는 문장은 제목으로서 줄 바꿈이 적용됩니다. Code is so useful. We have to learn how to use tags. 스타일 태그로 border 속성을 추가하여 h1 제목 처리한 문장에 테두리를 생성하겠습니다. 테두리의 두께를 지정하.. 2020. 8. 29.
html class 클래스 지정과 selector 선택자 활용 html class 클래스로 그룹을 만들어 CSS 서식 동시에 적용하기 같은 수업을 듣는 학생들의 모임을 클래스 class라고 합니다. html에서는 같은 속성을 가진 개체를 하나로 묶어 그룹핑을 할 때 이 class 개념을 사용합니다. class="클래스 이름"으로 서식을 적용할 그룹임을 정의합니다. 클래스 이름을 saw로 작성했습니다. 아래와 같이 class를 만듭니다. HTML CSS 지정한 saw 클래스에 서식을 적용하겠습니다. 스타일 태그 안에 선택자로서 saw 클래스를 지정합니다. 선택자로 클래스를 지정하려면 클래스 이름 앞에 period [. ]을 찍어주어야 합니다. period 없이 클래스 이름 saw만으로 선택자를 지정한다면, 웹페이지에 있는 saw라는 텍스트에 대해 서식이 적용됩니다. .. 2020. 8. 29.
CSS 속성 property 텍스트 서식 적용하기 수많은 CSS 속성 Property를 굳이 다 외울 필요가 없습니다. 검색엔진을 통해 사용 예시까지 쉽게 찾아볼 수 있습니다. 사용을 반복하다 보면 자연스럽게 기억하게 됩니다. CSS 적용이 필요한 상황에 따라 관련 Property를 검색하여 사용하는 방법을 알아보겠습니다. CSS font-size property를 이용해 텍스트 크기를 수정해야 한다고 가정하겠습니다. css font size property 키워드로 검색을 합니다. 텍스트 크기를 수정할 수 있는 CSS 속성을 찾을 수 있습니다. 검색엔진의 맨 위에 있는 사이트 W3 Schools에 접속합니다. CSS Font Size에 대한 내용을 확인할 수 있습니다. 텍스트의 크기를 수정하고 싶을 때는 font-size property를 사용해야 한.. 2020. 8. 28.
html CSS 스타일 style 태그, 선택자 selector, 선언 declaration, 속성 property, 값 value 개념 CSS는 웹 페이지의 가독성을 높입니다. CSS는 사용자 편의를 증진시키는 웹 디자인을 위한 언어입니다. html을 이용해 전자문서, 즉 웹페이지를 만들 수 있습니다. html의 다양한 태그를 활용하여 웹페이지를 개발할 수 있지만, 시각적인 요소를 구현하는 데는 한계가 있었습니다. 폰트 태그와 같이 글자색을 바꾸어 디자인적 요소를 보완할 수도 있습니다. 그러나 일일이 폰트 태그를 작성해주어야 하기 때문에 생산성이 좋지 못했습니다. CSS는 이러한 불편함을 해소하면서도 더욱 효과적으로 디자인적 요소를 추가할 수 있는 언어입니다. 웹페이지를 더욱 보기 쉽고 편하게 만들기 위해 CSS 언어가 등장한 것입니다. CSS는 디자인에 최적화된 언어로서 html의 한계를 보완하는 데 큰 기여를 했습니다. 웹 브라우저는.. 2020. 8. 27.
html 동영상 링크 삽입하기 웹페이지에 동영상 삽입해 넣기 이미 만들어진 코드를 가지고 와서 웹페이지에 즉시 반영할 수 있습니다. 우선 현시점에 가장 강력한 동영상 기반 플랫폼 유튜브에 접속합니다. 특정 영상을 하나 선택합니다. 영상의 좋아요 버튼 옆에 공유 버튼을 클릭합니다. "퍼가기"를 클릭합니다. 아이프레임 태그를 확인할 수 있습니다. 태그를 복사해서 내 웹페이지의 html 문서에 붙여 넣습니다. 해당 태그를 태그로 묶어 문단으로 쉽게 관리할 수 있습니다. 방문자가 댓글을 작성할 수 있는 기능 추가하기 DISQUS, LiveRe 등의 사이트를 사용할 수 있습니다. DISQUS에 로그인 후 Your sites 메뉴의 +New를 클릭합니다. 웹사이트의 이름을 작성하고 카테고리를 지정합니다. Creat Site를 클릭합니다. 다양한.. 2020. 8. 27.
Web1 , Web2 html 문법과 기타 유용한 태그 Html과 Internet Html 언어를 사용하여 웹 문서를 만들어 서버에 저장하고, 저장된 문서를 웹브라우저를 통해 확인할 수 있습니다. http://는 웹브라우저와 웹서버가 서로 통신할 때 사용하는 약속 즉, 통신규약입니다. 각자 다른 컴퓨터에 있는 웹브라우저와 웹서버를 사용할 때에는 반드시 http:// Hyper Text Transfer Protocol을 사용해야 합니다. 웹브라우저가 설치된 컴퓨터의 웹서버를 가리키는 특정 ip 주소는 127.0.0.1 형태를 사용하는 것으로 약속이 되어 있습니다. CSS는 html이 등장하고 약 4년 뒤에 나왔습니다. 웹사이트를 아름답게 꾸미고 싶다면, CSS를 학습해야 합니다. CSS를 활용하여 웹사이트를 디자인하는 직업을 Web publisher, Web .. 2020. 8. 27.
internet 인터넷과 web 웹 생활코딩님 덕분에 인터넷과 웹의 시초에 대해 알게 되었습니다. 생활코딩님의 강의 말씀을 정리하면 다음과 같습니다. 인터넷이 도시라면 웹은 그 도시에 있는 건물 하나라 볼 수 있습니다. 인터넷이 도로라면 웹은 그 도로를 달리고 있는 자동차 한 대라 할 수 있습니다. 인터넷이 운영체제라면 웹은 그 운영체제 위에 있는 프로그램 하나로 이해할 수 있습니다. 인터넷이라는 전체 안에 웹이 존재합니다. 웹 이외에도 웹과 동급인 수많은 서비스들이 존재합니다. 대표적으로 email, FTP 등의 서비스가 있습니다. 1960년 internet 인터넷이 처음 등장했습니다. 이후 30년이 지나 웹이 등장했습니다. 인터넷은 수많은 통신장치들이 분산되어 연결되어 있습니다. 다수의 통신장치 중 어느 하나가 고장이 나더라도, 나머지.. 2020. 8. 26.
웹페이지 html 링크 연결하여 간단한 홈페이지 만들기 아톰 Atom Editor를 이용하여 간단한 홈페이지 구조를 만들어 보겠습니다. 우선 새로운 파일을 생성합니다. 새로운 파일을 만들 때 반드시 확장자명을. html로 지정해주세요. 파일 이름은 1.html로 하였습니다. 아래와 같이 홈페이지의 기본 구조를 작성합니다. 처음 작성한 이 html 문서를 랜딩페이지로 사용하겠습니다. 아톰 에디터에 작성할 코드 내용은 아래에서 참조해주세요. WEB html page CSS page JavaScript page html 최상위 개념인 태그로 구조의 아우트라인을 잡고, 그 안에 하위 개념의 태그를 작성합니다. 부분과 2020. 8. 23.

티스토리툴바