본문 바로가기

HTML강좌

[html04]이미지로 코딩하기! 안녕하세요. Graham입니다. (TMI: 제가 좋아하는 graham's number 에서 가져온 닉넴. 그레이엄으로 읽어주시면 됩니다.) 오늘도 계속 진행해보겠습니다. 동영상 강의도 만들긴 했는데, 아직 음성 녹음을 못해서 이따 완료한뒤 첨부하겠습니다. 이미지를 써보자! 저번 시간까지 기본구조랑 텍스트 다루는 방법에 대해서 알아봤죠? 이번시간은 이미지를 다뤄볼거예요. 실습을 위한 폴더 만들기 이전까지는 아무 환경이나 아무 경로(위치여도) 상관이 없었으나 이번부터는 특정 폴더에 저장하겠습니다.저는 F드라이브에 html_Tutorial 이라는 폴더를 만들었어요. 어떤 드라이브 경로여도 상관은 없습니다. 여러분들만의 폴더를 만들어주세요. F:\html_Tutorial VS Code 실행 방금전에 생성한 프로.. 더보기
[html03]CSS가 뭔데? 텍스트 꾸며보기 html을 장식하려면 css가 필요해 저번에 헤드, 바디 공부하셨었죠? 이번엔 좀더 결과를 눈으로 바로 확인할 수 있는 방법을 알려드릴까 해요. css가 뭔지 헷갈리시겠지만 우선 아래 실습을 같이 따라해보실게요. 글자 꾸미기 1.VSCODE 실행 2.새문서 만들기(Ctrl+N) 3.03_text_css.html로 파일 저장 4.문서 내에 html:5 입력(메모장이라면 아래 코드 복사) 5.body태그 안에 div 태그 입력하고, 안에 Hello라고 입력 Hello 아직까진 기존에 배우던거랑 다를게 없죠? 6.이제 꾸며보겠습니다. 앞부분 div 태그안에 style="color:red" 무슨뜻인지는 이따가 설명 드릴게요. Hello 7.IE나 크롬 브라우져에서 이 파일을 실행시켜 보세요. 빨간색 Hello가.. 더보기
[html02]html = head + body Hello, html world! 기존에는 html 내용을 그대로 복사 붙여넣기 하셨겠지만 이번엔 좀 더 코딩스러운 코딩을 해봅시다. Visual Stuio Code 실행(메모장을 열어도 상관 없음) htmlworld.html로 파일 저장 html:5 라고 입력(메모장이신 분들은 아래 코드 복사 붙여넣기) 사이에 Hello html World 입력 저장 후 크롬(or IE) 브라우져에서 실행 ※ 저장한 파일을 드래그 해서 브라우져로 끌어놓으면 실행 됨. 저번에 해봤던거니까 충분히 하실 수 있겠죠? 화면에 Hello html World 라고 떳나요? 여러분들은 이제 html의 세계에 오신겁니다.자 이제 설명 들어갑니다. DOCTYPE html DOCument TYPE 이 문서의 타입을 정하는 란인데, 이 .. 더보기
[html01]코딩은 누구나 할 수 있다? 안녕하세요. Graham 입니다. html 코딩에 대해 강좌를 시작할건데요. 사내 웹디자이너들에게 코딩 가르치면서 만든 강의 자료를 오늘부터 함께 보시도록 무료로 배포할 생각입니다. 코딩에 코자도 모르던 직원에게 가르친거라 정말 쉽습니다. 그리고 제 스타일답게 실전스러울거구요. 잘 따라와주세요. 코딩은 누구나 할 수 있다? 사실 코딩은 뭔가가 있어야만 코딩할 수 있는게 아니라 누구든지 어느 특정 장비가 있어야만 코딩을 할수 있는게 아닙니다. 물론 일부는 반드시 맥북이 있어야만 가능한 것도 있겠지만 반드시는 아닙니다. 특수한 경우는 있겠지만 항상 그런 것은 아니예요.컴퓨터만 있다면 당신은 코딩을 하실 수 있습니다. 메모장으로도 코딩이 가능하다? 많은 분들이 잘못 알고 계신 내용 중 하나가 바로 코딩을 하려.. 더보기