본문 바로가기

html강의

[html09]실전미션#1: 텍스트 직접 코딩해서 꾸며보기 실전미션1: 텍스트 직접 코딩해서 꾸며보기 오늘은 그동안 배워온걸 써먹어 볼까 합니다. 실습만 있는거죠. 늘 해왔던대로 1.VS Code 실행시키고 2.html 을 하나 만든다음 3.html:5 기본 양식을 만들고 4.body안에 이렇게 써줍니다. 그들이 링을 채우는 법 PineApple Watch 사용자들이 활동 링을 어떻게 채우는지 살펴볼까요? 동영상 보기 5.기본 코딩이 완성 되었어요. 6.이제 예쁘게 꾸며주는 일만 남았네요. 예쁘기 위해선 style을 내야겠죠? 그들이 링을 채우는 법 PineApple Watch 사용자들이 활동 링을 어떻게 채우는지 살펴볼까요? 동영상 보기 7.먼저 h2부터 꾸며주겠습니다. 그들이 링을 채우는 법 갑자기 명령어가 많아져서 당황되셨나요? 사실 차분하게 읽어보면 다 .. 더보기
[html08]여백의 미: margin, padding #2 여백의 미2 지난 시간에 padding, margin 기본적인 사용법을 배워봤습니다. 하지만 텍스트에도, 이미지에도 적용할 수 있다는 사실 아셨나요? 실습: 텍스트에 여백 지정해보기 일부러 바뀌는 변화를 잘 보이기 위해 bg를 썼습니다. 마진, 패딩 실습 안녕하세요. p태그에 margin:50px 을 입력해보겠습니다. 안녕하세요. margin은 타겟 바깥으로 적용되는거 기억하시죠? 그런데 항상 위,아래,좌,우 균등하게 margin값을 지정해야하는건 아닙니다. 안녕하세요. 방금 지정한 margin은 위 10px, 우 20px, 아래 50px, 좌 30px 이렇게 줄 수 있습니다. 또 위아래 값이 같다면 이렇게도 쓸수 있습니다. 안녕하세요. 위아래로는 50px, 좌우는 30px 이런 형태로도 설정이 가능합니.. 더보기
[html07]여백의 미:margin, padding #1 여백의 미 지금까지 제 강좌를 잘 따라오셨다면 여러분들은 텍스트도 꾸미실 수 있고, 이미지도 코딩에 넣으실 수 있고, 링크도 걸 수 있게 되셨을겁니다. 그런데 코딩을 하다보면 문제에 봉착하게 됩니다.내가 만든 코딩이 뭔가 전문가스럽지 못하고 코딩끼리 딱 붙어있고, 답답한 느낌을 줍니다. 바로 이럴때 가장 크게 해결해주는게 여백입니다. 여백은 어떻게 주나요? margin, padding 으로 여백을 줄 수 있습니다.두개 명령어는 같은듯 하면서 다른 성격을 가지고 있습니다. ~~사실 이제는 이것조차 무효화하는 명령어까지 나왔지만.... 그래도 저는 레귤러한 설명을 해야하니까 ~~실습으로 해보는게 낫겠죠? 눈으로 봐야 차이점을 아는겁니다. 실습 VS Code 실행 html로 저장 기본구조 입력 (html:5 .. 더보기
[html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨) 문법 설명 절대경로, 상대경로 수학이나 물리에서 이런거 많이 보셨죠? 절대좌표, 상대좌표 똑같은 개념입니다. 우리집을 설명할때, 절대 주소로 말한다면 서울특별시 강남구 역삼동 테혜란로 000번길 2F 어디어디 (아... 언젠간 우리집 주소를 강남으로... 자가로...ㅠㅠ주륵) 즉, 나의 위치가 어딘지간에 중심점이 어딘지간에 저 주소를 따라가면 반드시 우리집이 나오는 주소를 절대 주소라고 합니다. 절대반지도... 그래서 나온 말일까요?ㅎㅎ 그런데, 친구가 물어봅니다. 너네집 우리집에서 가까워? 응, (너희 집에서 양재방향으로) 420번 버스타고 딱 2정거장 눈치채셨겠지만 중심점이 상대적으로 바꼈습니다. 이런걸 상대 주소 라고 합니다. 이해가 되셨나요? 다시 코딩 얘기입니다. 뭐 더 설명 안드려도 아시겠죠?.. 더보기
[html05]이미지로 코딩하기2 이미지 크기 줄이는 방법(with CSS) 아까 실습에서 이미지가 너무 커서 보기 안좋았죠? 적당한 사이즈로 줄여보겠습니다. style="" 입력 아직 아무런 변화가 없죠? 이제부터 기술 들어갑니다. width는 너비를 뜻합니다. height(높이)는 설정하지 않으면 width 값에 맞춰서 자동으로 줄어듭니다. 반대로 height 값만 적어준다면 height 값에 맞춰서 width도 변형하겠죠. 물론 width, height 모두 지정해도 됩니다.대신 정확한 이미지 비율을 맞추지 않는다면 이미지는 찌그러지겠죠. 링크 넣기 이미지에도 링크를 넣을 수 있습니다. 생각해보니 텍스트 편 할때 링크를 알려드렸어야 했는데, 안했네요. 링크는 텍스트에도 되고, 이미지에도 됩니다. 버튼이나 이미지 이렇게 해주면 됩니다.. 더보기
[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 이 문서의 타입을 정하는 란인데, 이 .. 더보기