본문 바로가기

HTML강좌

[html]article, section, div 대체 차이가 뭐야? 코딩하면서 한번쯤은 궁금했던 사람들이 있지 않을까해서 찾아봤습니다. 실제로 같이 일하는 작업자들 중에 아직도 혼용해서 쓰는 사람들도 있고, div만 쓰는 사람들도 봤습니다. 이런 이유는 현재 html표준문서도 Not found로 나오고, 그리고 정작 바꿔 사용해봐도 전혀 차이도 없고, 에러도 안나옵니다. 그렇다고 잘하는 네카라쿠 형들을 따라하면 될수도 있겠지만 그 형들이 또 다르게 적었을경우 어떻게 하실래요? 그러니 한번쯤은 정리가 필요하지 않을까요? 제 나름대로의 해석이니 보시고 틀린 부분이 있다면 댓글로 남겨주세요. 수정하겠습니다. 사전정의 아래 내용은 번역기 돌려서 가져온겁니다. article 문서 또는 사이트의 독립적 인 부분. 즉, '독립형'이 가능해야하며 다른 곳 (예 : RSS 피드에서)에 .. 더보기
[html11]배경 이미지 사용하는 방법 오늘은 배경 사용방법에 대해서 배워볼게요.먼저 div 가 있어야겠죠? p태그도 상관없고, 블록형태의 태그면 됩니다. 저는 저번에 이어서 11번 폴더를 만들었고, 마찬가지로 html을 만들었습니다.이제 설명 안해도 이 부분은 아시겠죠?box라는 div를 만들어줬습니다. 크기를 먼저 설정해줘야겠죠?저번과 마찬가지로 클래스 형태로 스타일을 주겠습니다. 이제 배경을 설정할 차례입니다. background 라고 써주면 됩니다. 아주 간단하게 만들어졌죠? 이미지로도 적용할 수 있습니다.미리 저장해둔 이 이미지를 써보겠습니다. 적용은 됐는데 이미지가 너무 커서 보이질 않네요.사이즈를 키웠더니 보이네요. 사실 앞에 red는 지워도 되긴 합니다. 어떤 형태로 된거냐하면 bg로 빨간색을 깔고, 위에 이미지를 덧입힌 겁니다.. 더보기
[html10]반복작업을 줄여주는 class 활용하기 안녕하세요. 저번시간에 실전코딩을 통해 얻으신게 좀 있나요?ㅎ 저번 실습 통해서 배너 만들때 텍스트 크기, 간격 등 약간만 변경하면 좀 더 그럴싸한 코딩이 완성된다는건 느끼셨을거예요.하지만 손이 굉장히 바쁘시고 힘드셨을거예요. 매번 글을 쓸때마다 font-family 정하고 size 입력하고 간격입력하고 그래야하나 결론부터 미리 말씀 드리면 아니예요.코딩은 생각보단 불편하면서도 편리한기능도 들어있어요. 오늘 강좌에서는 반복작업을 줄여줄 방법을 소개하려고해요. CSS 클래스 만들기 1.글자 일괄변경하기 저번코딩을 한번 봐볼까요? h2에서 썼던 비슷한 내용이 p태그에서도 쓰이고 있어요. 하지만 모두 개별적으로 쓰이고 있죠.이걸 하나로 묶어줄수가 있어요. 예제를 한번 만들어볼게요.폴더를 생성해줘야겠죠? 10번.. 더보기
[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 모두 지정해도 됩니다.대신 정확한 이미지 비율을 맞추지 않는다면 이미지는 찌그러지겠죠. 링크 넣기 이미지에도 링크를 넣을 수 있습니다. 생각해보니 텍스트 편 할때 링크를 알려드렸어야 했는데, 안했네요. 링크는 텍스트에도 되고, 이미지에도 됩니다. 버튼이나 이미지 이렇게 해주면 됩니다.. 더보기