컴퓨터 알아가기/HTML CSS
-
HTML 기본은 알고가자 (마지막) : 의미있는 코딩(Semantic HTML / Semantic Web)컴퓨터 알아가기/HTML CSS 2021. 3. 8. 19:30
이제 HTML 관련 어느정도 기본은 이해가 되고 있다고 보면 됩니다. 이제 머리가 많이 굳어서 모든 프로그램 언어를 외우진 못해도 이런 개념이구나 정도 이해를 하면 나중에 많은 훌륭한 개발자들이 올려놓은 소스를 보고 이해도 하고 만들어 보기도 할 수 있을겁니다. 그래서 오늘의 주된 주제는 최초 개발할 때도 그렇고 개발이 완료된 소스를 볼때도 필요한 체계적인 HTML 코딩에 대해 이야기를 하려합니다. 사실 기본 HTML 개념에 대한 마지막 시간이기도 하고요. 우리가 웹페이지를 만들려고 할 때 한 페이지의 단락을 나누는 기본 태그는 태그를 사용했습니다. 모든 페이지의 단락을 태그로 사용한다면 프로그램 내용이 많을경우 나중에 검증과정이나 수정과정에서 어다애 어떤 프로그램 코딩을 했는지 알기 힘듭니다. 그래서 ..
-
HTML 기본은 알고가자(6탄) : Form속성컴퓨터 알아가기/HTML CSS 2021. 3. 4. 19:30
인터넷 정보를 주고받는 프로토콜중 HTML로 이루어진 웹페이지를 주고 받을때의 프로토콜을 HTTP(Hyper Text Transfer Protocol)이라고 합니다. 웹페이지 주소를 볼때 써있는 http://www.****.com에서 앞 부분을 선언해 주고 시작한다고 보면 됩니다. HTTP만 해도 깊이 들어가는 내용이 많지만 이 개념을 꺼내는 이유가 오늘 우리가 볼 form 요소 기능입니다. 쉽게 이야기해서 HTML상 태그를 사용해서 데이터를 전송하고 받는 개념으로 시작한다고 보면 됩니다. 오늘도 VS code에서 시작해 보도록 하지요. 전체 개념을 보시고 Codecademy에서 퀴즈도 풀어보시기 바랍니다. ▒ Form 속성 Form 속성은 데이터를 입력하고 송신하고 처리하는 작업이라고 보면 됩니다. 이..
-
HTML 기본을 알고가자(5탄) : 테이블 그리기 기본개념 완성컴퓨터 알아가기/HTML CSS 2021. 3. 2. 19:30
지난 시간에 HTML을 이용하여 테이블 그리기 (표 그리기)의 기본 구조에 대해 이야기 하였습니다. 다른 것은 차츰 경험하면서 알게 될 것이고 무조건 기억해야 하는 기본 구조는 셀 내용 이었습니다. 그리고 아직 배우지 않은 CSS의 느낌도 살짝 경험해 봤구요. 그 느낌이라는게 특별한 언어가 아니라 그냥 영어였다는 것도 알개 되었습니다. 테이블의 실선을 그리기 위해서 경계라는 border를 사용했고요 테이블 자체의 색을 넣기 위해서 background color의 약어인 bgcolor라는 명령어도 사용했습니다. 오늘은 두가지 명령어만 더 보고 개념에 대한 이해를 마치겠습니다. 중학교때 인가요 고등학교때 인가요 수학중에 행렬(Matrix)라는 단락이 있었는데 행과 열을 나타내는 단어였습니다. 여기서 행은 가..
-
HTML 기본은 알고가자(4탄) : 공백, 테이블 만들기컴퓨터 알아가기/HTML CSS 2021. 2. 24. 19:30
이제 HTML 4번째 시간입니다. 직접 코드를 입력해서 HTML 문서를 만들때 내용이 길어지면 직접 만든 사람도 어디에 무슨 기능을 넣었는지 해석이 어려울 경우가 있습니다. 이를 위해서 개발자들이 몇가지 HTML 기능을 사용하고 있습니다. ▒ Whitespace and Indentation (공백과 들여쓰기) 다음 두 예는 브라우저상에서 같은 내용을 표시합니다. 브라우저는 HTML을 렌더링할 때 공백과 들여쓰기를 무시하기 때문에 공백과 들여쓰기를 잘 사용하면 나중에 코드를 보더라도 이해가 쉽습니다. 둘 다 모두 브라우저에서는 똑같이 나옵니다. 즉, HTML에서는 어떤 방식으로도 문법을 지키면 되는데 직접 만든 사람입장에서는 코드가 길어지거나 할 경우 공백과 들여쓰기 등을 잘 한다면 나중에 해당 위치를 찾..
-
HTML 기본은 알고가자(3탄) : HTML 문서선언, html tag, head tag, page title, 웹페이지링크, 같은페이지내 링크컴퓨터 알아가기/HTML CSS 2021. 2. 18. 19:30
이제 HTML 3번째 시간으로 지난 시간까지는 전체적인 HTML에 대한 기본 개념에 대한 소개였습니다. 그리고 Codecademy에서는 하나의 과정이 완료될 때 마다 다음 그림과 같은 인증도장을 찍어주는데 시각적으로나 기분적으로나 나쁘지는 않습니다. 이제 본격적으로 HTML 표준을 보면서 진도를 나가고자 합니다. ▒ Preparing for HTML (HTML 문서준비, HTML 문서선언) HTML을 시작할 때 웹브라우저에 우리의 문서를 사용한다는 문서타입을 선언해 주어야 합니다. 2021년 2월 현재 HTML 5 문서가 사용되고 있습니다. 문서타입 선언은 맨 처음 1행에 해야합니다. 방식은 다음과 같습니다. ▒ tag 문서타입 선언이 끝난 후 태그를 오픈하고 태그를 닫아야 비로서 그 안에 있는 내용이 ..
-
HTML 기본은 알고가자(2탄) : 속성, 글씨쓰기, Text꾸미기, 줄바꿈, 순서 및 비순서 목록, 이미지 및 동영상 삽입컴퓨터 알아가기/HTML CSS 2021. 2. 17. 19:30
지난 시간까지 HTML구조, Body 태그, P 태그, Head 태그, Div 태그에 대해 간략하게 개념을 살펴 보았습니다. 물론 각각에 대하여 많은 실제 예를 들어 연습도 필요합니다만 최소한 어떤 형태로 이루지고 어떤 역할을 하고 있는지 한번 읽어 봄으로써 HTML의 문징구조를 이해하는게 중요하다고 말씀 드릴 수 있습니다. 이번에는 조금 더 확장을 해서 어떤 구조들이 있는지 알아보고자 합니다. ▒ 속성 (Attributes) HTML에서 각각의 태그를 요소(Elements)라고 합니다. 그 요소 태그의 성질(기능)을 확장하고자 하는 경우 속성(Attributes)을 사용합니다. 속성은 크게 속성의 이름(Name)과 속성의 값(Value) 2가지로 구성되어 있습니다. HTML내에서 한번 속성을 정의하면 ..
-
HTML 기본은 알고가자 (1탄) : HTML구조, Body 태그, P 태그, Head태그, Div 태그컴퓨터 알아가기/HTML CSS 2021. 2. 16. 19:30
컴퓨터 프로그래밍 언어에 대한 나름 대로 로망이 생기기 시작했다. 하지만 확실한 건 개발자 수준까지는 올라갈 수 있는 능력(?).. 음 거기까지는 이제 너무 시간이 지난 것 같다. 최초 언급했듯이 컴퓨터라는 존재를 알기 위해서는 여러가지 중 컴퓨터 프로그램도 어떤 구성을 가지고 있는지 알 필요가 있기에 언어에 대해 간단히 공부를 해 보고자 한다. 그 중에서도 많은 전문가들이 웹사이트를 구성하는 HTML이라는 언어는 복잡하지도 않고 쉽게 접할 수 있다고 하니 기본구조가 어떻게 생겼는지 어떻게 작동을 하는지 알 필요성은 있다고 판단이 되어 시작 해볼려고 한다. 지난 시간 퀴즈를 풀면서 개념을 익히는 사이트인 Codecademy라는 곳에서 간단히 맛을 봤다. 앞으로 1주일마다 한번씩 HTML의 기본을 알고 나..
-
HTML 기본은 알고 가자컴퓨터 알아가기/HTML CSS 2021. 2. 15. 19:30
현재까지 조금씩 알아 가는 컴퓨터 관련 글을 이어가면서 문득 이런 생각이 든다. '조금씩 알아 가면 알아 갈 수록 향후 뭔가를 만들기 위해서는 최소한 왜 이렇게 구성이 되는지는 알고 가야 최소한 내 것을 만들 수 있다'고 생각이 들었다. 그렇다면 내가 해보고 싶은 일은 최소한 웹페이지를 만들어 보는 것이었다. 처음부터 완전히 전문개발자처럼 코딩을 만들어 가면서 할 수는 없는 일이지만 기존에 무료로 사용할 수 있는 프레임을 그래도 변형정도는 할 수 있는 능력은 최소 필요한 갓으로 판단되었다. 웹사이트에서 검색을 해보면 HTML 강좌가 많이 있다. 하지만 우리는 프로그래밍 언어를 하나 하나 전문적으로 배울려면 일단 시간도 없고 흥미도 안 생긴다. 물론, 천천히 배워나가고자 하고 시간이 엄청 많고 흥미가 대단..