어떤 분께서 혹시 티스토리에도 전화번호 링크가 가능한지를 여쭤보셨습니다. 물론 가능합니다. a 링크 태그를 이용해서 진행 할 수 있습니다. 또한 img 태그를 추가하여 이미지배너 타입으로 전화번호 링크도 생성 가능합니다. 그러면 한번 어떻게 하는지 살펴봅시다. 일반 텍스트에 전화번호 링크걸기 먼저 아래의 태그를 살펴봐주세요. 전화걸기 아주 간단한 태그죠? 그렇습니다. 보통 a href 태그 다음에는 url 주소를 넣는게 일반적입니다. 여기에서 URL 주소 대신 전화번호를 입력 할 수 있습니다. 단 tel: 이라는 태그를 함께 입력해줘야 합니다. 이것만 주의하시면 됩니다. 위의 예시를 바탕으로 완성된 결과가 아래에 있습니다. 전화걸기 이 페이지를 스마트폰에서 확인했을 때, 전화걸기 텍스트를 터치하면 실제 ..
예전에 받았던 질문 중 하나 입니다. 친효스킨의 메인 화면은 현재 인덱스 페이지로 구성되어 있습니다. 그리고 각 목록마다 특정 표식이 지정되어 있습니다. 스크린샷 이미지를 보시면서 다시 설명 드리겠습니다. 수동으로 영구 삭제 "> 이 부분을 찾으셨나요? 이 중에서 삼각형 모양의 형태를 구성하고 있는 태그 부분은 바로 이곳 입니다. 이 부분 입니다. 여기가 바로 검은색 삼각형 형태를 취하고 있는 영역 입니다. 따라서 해당 태그를 모두 삭제하거나 주석 처리를 하면 사라지게 됩니다. 끝. 추가내용 친효스킨 2.2 버전부터 이 삼각형을 켜고 끌 수 있는 버튼을 추가했습니다. 따라서 태그를 수동으로 삭제할 필요가 전혀 없습니다. 스킨편집 > 레이아웃 설정에 보시면 메인삼각형이라는 기능이 있습니다. 해당 스위치는 ..
오늘은 특정 영역에서 텍스트 정렬에 도움을 줄 수 있는 white-space 매소드에 대한 속성을 알아봅니다. 지난번 시간에 이어서 겹치는 부분도 있으니 혹시 어제의 강의를 놓치신 분들이 계시면 한 번 읽어보시는것도 괜찮을 것 입니다. 티스토리의 CSS를 수정하거나 개인만의 스타일로 꾸미는데 아는 것 만큼 더 발전할테니까요. CSS! 말줄임표 생략기호 text-overflow 속성 사용 방법 먼저 아래의 첨부파일을 다운로드 받아 주시기 바랍니다. 다운로드가 완료되었다면 한번 실행해 보시기 바랍니다. 그러면 빨강, 초록, 파랑, 보라, 검정 DIV 박스가 있고 그 안에 텍스트가 들어 있을 겁니다. 또한 DIV 박스를 삐져나온 텍스트들도 보일 것 이고, 띄어쓰기가 이상하게 되어 있는 것들도 살펴보실 수 있을..
어떤 블록 요소에 들어가는 텍스트가 다소 많아서 이것을 생략기호(말줄임표)로 표현하고자 할 때, 우리는 CSS에서 text-overflow 매소드를 사용할 수 있습니다. 어떤 식으로 표현 되는지 간략하게 알아보겠습니다. See the Pen CSS! text-overflow 속성 by rgy0409 (@rgy0409) on CodePen. 보시면 두 개의 DIV 영역 안에 텍스트가 들어가 있습니다. DIV 영역의 가로값은 모두 300px 로 동일 합니다. 세로값이 auto로 되어 있으므로 텍스트가 300px 이상의 사이즈라면 적색 div 처럼 한 줄 아래로 내려오게 되어 있습니다. 하지만 푸른색 div 박스의 경우는 보시는 것 처럼 텍스트가 생략이 되어 있습니다. CSS 탭을 눌러서 매소드를 살펴 보시기..
구형 글쓰기 에디터를 아직도 사용 중 입니다. 티스토리의 신형 글쓰기 에디터는 다 좋은데 이미지를 여러장 본문에 넣어야 하는 상황일 때, 워터마크를 일괄 적용 할 수가 없습니다. 한장 한장 수동으로 워터마크를 넣어야 하는 큰 단점이 있습니다. 또한 본문에 HTML 및 CSS 관련 태그를 입력하면 이걸 자동으로 순수 태그로 인식해서 스타일이 적용이 된다는 점 입니다. 이건 장점임과 동시에 단점이 될 수 있는데... 개인적으로는 단점에 해당합니다. 태그 설명하기가 어려워지기 때문 입니다. 구형 글쓰기 에디터의 가장 큰 단점은 본문의 HTML태그가 매우 지저분하다는 점 입니다. 먼저 아무 이미지나 하나 가지고 와보도록 하겠습니다. 티스토리 구형 글쓰기 에디터로 작성한 글의 HTML 상태 티스토리 로고 이미지를..
현재 친효애드온을 하나 개발 중 입니다. 본문 내에서 편리하게 해당 소제목으로 빠르게 이동이 가능한 하이퍼링크 목차 애드온 입니다. 이 기능은 방문자의 편의성을 최대한 살린 방법으로 구현해 놓으면 원하는 내용을 잽싸게 이동할 수 있다는 장점이 있습니다. 그와 동시에 단점도 하나 존재합니다. 본문 중간에 노출되는 자동 애드센스를 못 보고 지나칠 수 있다는 점 입니다. 우선 아래의 참고글을 살펴보시기 바라겠습니다. 큐텐 추천 상품 모음 친절한효자손 큐텐(Qoo10) 추천 상품 모음 안녕하세요, 친절한효자손 입니다. 온라인 쇼핑을 좋아하는데 큐텐에서 관심있게 본 상품들을 따로 글로 작성하고 싶어서 이렇게 키보드를 두드리고 있습니다. 제 블로그에 들어오시는 분들도 rgy0409.tistory.com 위의 글을 ..
친효스킨 커스터마이징에 대한 카테고리 입니다. 보통 요청에 의해 작성됩니다. 본문의 텍스트 줄 간격이 다소 좁다고 생각되시면 아래의 방법으로 조절이 가능합니다. 친효스킨의 CSS에서 아래의 코드를 검색하시기 바랍니다. "진짜본문" 이라고 검색하면 쉽게 찾을 수 있습니다. /* 진짜본문 (article_rep_desc) */ #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: 1px solid var(--subColor); font-family: "RIDIBatang", "Nanum Gothic" serif; font-size: 17px..
자바스크립트 중 하나인 제이쿼리를 활용하여 a href에 URL 링크 주소가 들어가지 않고 그냥 #을 넣었을 경우 클릭을 하게 되면 페이지 맨 위로 올라가는 현상이 있습니다. 가장 기본이 되는 현상인데 이걸 원하지 않고 그냥 클릭했을 경우 아무런 반응이 없는, 즉 페이지가 제자리에 머물러 있게 만들고 싶은 경우 입니다. 두 가지 방법으로 진행이 가능합니다. jQuery 구성가장 먼저 소개하는 방법은 제이쿼리를 이용한 방법 입니다. 이 방법의 장점은 사이트 내 모든 a href="#" 을 사용하는 링크 태그에 클릭 방지를 걸 수 있는 방법입니다. 한 마디로 광역 마법인 샘 입니다. 코드는 다음과 같습니다. 이 스크립트를 안쪽에 그대로 삽입하시면 됩니다. 별도로 세팅할 필요가 없이 아주 간편하게 적용시킬 수..
실험삼아서 해봤는데 사용이 가능합니다. 제목만 보면 어떤 뜻인지 잘 모를수도 있으니 (나중에 저 조차도 까먹을 수 있으니까) 간단한 예시를 들어서 한번 더 풀어서 설명하겠습니다. li:not(:last-child)::before { content: "#"; margin-right: 5px; } li 태그의 :not 이므로 ~이 아니다 라는 뜻이 됩니다. 여기에 (:last-child) 이므로 마지막 요소는 "~이 아니다" 라는 의미가 됩니다. 마지막에는 ::before 가 들어갔으므로 li 의 앞에 가상요소를 적용시킨다는 뜻이 되지요. {} 안의 내용을 살펴보니, # 기호가 적용됨과 동시에 오른쪽으로 5px 떨어지도록 되어 있습니다. 이제 한 마디로 표현해 보자면 다음과 같습니다. li의 맨 앞쪽에 #을..
HTML5에서 새롭게 추가된 태그 중 하나가 video 입니다. 과거에는 플래시 플레이어, 혹은 여러가지 ActiveX 같은 추가 프로그램을 설치해야만 재생이 되었지만, 버전이 향상되면서 video 요소 하나로 이 모든것을 퉁치게 되었습니다. video 태그에서 사용할 수 있는 여러 속성들이 있습니다. 아래를 참고해 주세요. 속성 설명 src 동영상 경로 지정 poster 동영상이 깨졌거나 재생 불가 시, 대신 표시할 이미지 경로 지정 preload 동영상 백그라운드 다운로드 후 재생 단추를 눌렀을 때 재생됨 autoplay 자동 재생 loop 무한 반복 (loop="숫자" 의 형태는 무한반복 횟수) controls 동영상에 컨트롤 UI 생성 width 동영상 가로 화면 넓이 height 동영상 세로 화..
HTML로 뼈대를 만들고, CSS로 살을 붙여줍니다. 이때 살을 붙여줄 뼈를 지정하는 것을 선택자 라고 합니다. 따라서 선택자가 정말 중요합니다. 예를 들어서 어떤 div 요소가 있고, 그 안에는 무수히 많은 p태그, 또 무수히 많은 헤드태그, 또 ul과 li 태그들도 있다고 가정해 봅시다. 어떻게 선택하는것이 가장 정확할지를 판단해서 코딩을 진행해나가야 합니다. 선택자를 어떻게 선택하든지에 대해서는 그건 프로그래머의 마음입니다. 자신이 가장 좋아하고, 차후에 한 눈에 파악할 수 있으며, 손에 익은 선택자로 진행하시면 됩니다. 먼저 아래의 예제를 참고하시기를 바랍니다. 이것을 바탕으로 간략히 설명을 드리겠습니다. See the Pen CSS3 선택자 by rgy0409 (@rgy0409) on CodeP..
CSS3로 다양한 삼각형을 만들 수 있습니다. 아니 표현한다는게 더 정확한 키워드겠네요. 웹코딩으로는 사각형이 기본 형태이기에 별도로 삼각형을 구성하는 태그는 없습니다. 저도 검색을 통해 알아보니 border로 삼각형을 만들 수 있는 방법을 알았고, 이것저것 해보니까 조금 이 바닥(?)이 어떻게 돌아가는지 이해가 됩니다. 우선 아래의 예제를 살펴보세요. 예제를 통해서 하나씩 설명드려보겠습니다. See the Pen CSS3 : Express Triangle by rgy0409 (@rgy0409) on CodePen. div 안쪽에 p태그로 번호를 부여했습니다. p태그에는 테두리를 주어서 중심이 어디인지를 확인할 수 있도록 마크업 해두었습니다. HTML과 CSS 버튼을 누르셔서 태그 요소들을 확인하실 수 ..
오늘은 정말 중요한 요소를 배웠습니다. 레이아웃을 꾸미는데 가장 기본이 되는 div 블록 요소를 가로로 정렬하는 방법입니다. h1 이나 p태그, div 등의 태그는 모두 블록요소라고 합니다. 특별히 크기를 지정하지 않았어도 크기값을 가지며, 줄바꿈 현상이 일어나는 요소를 블록요소라고 하지요. 때문에 가로로 정렬하려면 또 다른 CSS 스타일 태그를 사용해야 합니다. 이 때 사용하는 요소가 바로 float 입니다. 크게 두 가지 속성이 있습니다. float: left; → 왼쪽부터 가로로 정렬 float: right; → 오른쪽부터 가로로 정렬 이렇게 사용 되는것이 대부분이며, 각 요소를 사용하면 어떻게 되는지를 한번 살펴보겠습니다. 먼저 본문인 body 안쪽에 div 3개를 만들었습니다. 각각 클래스값을 ..
오늘은 CSS 스타일 중 border 태두리 속성에 대해서 배웠습니다. 사용법은 간단합니다. 테두리가 어떤 형태로 나타나는지, 그리고 해당 요소는 무엇인지만 기억해 주시고, 적절한 문장을 강조하고자 할때, 한 문단을 감싸고자 할 때 적시적소에 쓰시면 되겠습니다. 우선 마크업 상태를 확인해 주시기 바랍니다. 그리고 본문 body 안쪽에는 단락 요소인 p태그를 사용했고 짧은 문장을 몇 개 적었습니다. 그리고 p태그는 class 값을 부여했습니다. 각 클래스별 스타일을 내부스타일 방식으로 head의 style 에서 지정하였습니다. 보시면 border 속성값이 대략적으로 3가지 묶음 정도로 보여지게 되는데 각 요소의 역할은 다음과 같습니다. border : { 테두리 두께, 테두리 형태(디자인), 테두리 색상 ..
글씨 사이를 자간이라고 합니다. HTML 텍스트도 CSS 스타일을 사용해서 자간 조절이 가능합니다. 촘촘하게 만들수도 있으며, 넓게 넓게 떨어뜨릴수도 있습니다. 제목에 나온 letter-spacing 요소를 사용하시면 가능합니다. 바로 본론으로 들어가겠습니다. 내부스타일 방식을 사용했습니다. 본문의 p태그에 클래스값을 부여했습니다. 만약 수치값을 0으로 입력하면 어떤 변화가 생길까요? 아무런 변화가 없습니다. 해당 글꼴에 대한 기본 자간 스타일로 출력됩니다. 이번에는 letter-spacing 수치값을 10px을 입력했습니다. 어떤 변화가 생겼는지 출력해서 확인해 보겠습니다. 보시는 것 처럼 10px 씩 자간이 떨어졌음을 확인할 수 있습니다. 그러면 마이너스 값도 적용될까요? 그렇습니다. 아주 잘 적용됩..
오늘은 텍스트 데코레이션 요소들에 대해서 다시한번 짚고 넘어가는 시간 입니다. 전 시간에 아마 한번 언급했던 부분이 있을 수 있겠는데요 복습한다는 마음으로 다시한번 봐주시면 감사하겠습니다. a링크에 대해서 말씀 드릴 때 나왔을수도 있는 부분입니다. 복습겸 다시한번 살펴보도록 하겠고, 여기에 오늘의 주제인 text-decoration 태그 스타일에 대해서 다양하게 다뤄보도록 하겠습니다. 태그라는게 알수록 신기하고 재밌네요. 이런 맛에 코딩을 하는 것 같습니다. 먼저 text-decoration의 쓰임새를 간단히 살펴보기 위해서 위와같이 마크업을 해두었습니다. a 요소에서 많이 쓰이는 text-decoration: none; 부분도 등장하게 될 것입니다. 먼저 이렇게 마크업을 하면 당연히 a 링크가 걸린 텍..
오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다. 지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다. font-family → 글꼴을 지정합니다.font-size → 글자 크기를 설정합니다. 단위는 px 입니다.font-weight → 글자의 굵기를 설정합니다. 보통 bold 를 사용합니다.font-style → 기울이기 등의 글자 스타일을 지정합니다.font-variant → 영어 작성 시, 작은..
오늘은 가상 클래스 선택자에 대해 배웠습니다. 보통 링크 태그인 a 요소에서 많이 볼 수 있습니다. 우리가 흔히 알고 있는 텍스트 기본 링크 색상은 파란색이며, 밑줄이 그어져 있습니다. 그리고 한번 방문한 링크는 보라색으로 바뀌어 있습니다. 이 부분을 설정할 수 있는데, 가상 클래스 선택자를 통해서 수정이 가능합니다. 태그를 먼저 살펴보겠습니다. 위의 스크린샷처럼 작성하시면 됩니다. 각 부분의 설명은 다음과 같습니다. a:link → 링크가 걸린 텍스트의 기본 상태a:visited → 한번 이상 방문했던 링크 텍스트a:hover → 링크가 걸린 텍스트 위에 마우스가 올라갔을 경우를 설정a:active → 링크가 걸린 텍스트를 클릭하고 있을 때를 설정 보통은 색상 변경을 가장 많이 하는 편이죠. 아니면 밑..
이 부분은 정말 중요합니다. 여러분들께서 홈페이지를 만드시려 한다거나, 저처럼 티스토리 스킨을 제작해보려 하신다면 꼭 알고 있어야 하는 부분입니다. 꼭 스킨을 만들지 않더라도, 현재 사용하는 스킨이 편집 수정이 가능한 것이라면 원하시는대로 입맛대로 스타일을 바꾸거나 추가해서 사용할수도 있을 것입니다. 그러기 위해서는 꼭 오늘 이 글에서 다루는 부분을 이해하고 넘어가야 합니다. 타입(태그) 선택자 / 아이디 선택자 여기에서는 내부스타일 방식으로 진행합니다. 현재 본문 영역에는 p태그와 div 요소로 텍스트 두 문장을 작성했습니다. 그리고 head의 스타일 요소 안쪽에 이들에게 각각 글씨 색상을 변경하도록 스타일 지정을 했습니다. p {color: blue;} 여기에서 p가 바로 선택자가 됩니다. 결국 이 ..
오늘은 홈페이지를 만들 때, 가장 기본이 되는 여러가지 폼에 대해서 배웠습니다. 어떤 종류의 폼이 있는지 알아보고, 어떻게 태그를 사용하는지, 어떻게 적용시키는지에 대해서 간단히 알아볼 것입니다. 먼저 아이디를 입력해야 한다면, 빈 칸을 구성하는 네모 상자가 필요하겠습니다. 그리고 비밀번호 입력 항목도 있어야 합니다. 성별을 선택하는 메뉴도 필요할 것 같고, 주민번호를 요구하기도 하겠죠? 그리고 비밀번호 분실 시 질문을 선택하는 항목도 있는 경우를 종종 경험해보셨을 겁니다. 그리고 오픈마켓에서 흔하게 볼 수 있는 제품 구매 후기 칸도 한번 구성해 보도록 하겠습니다. input type="text" / id / name / method / action / enctype 먼저 폼을 사용하기 위해서 본문인 b..
지난시간까지 테이블 사용법에 대해서 계속 배워가고 있습니다. 오늘 시간도 그 연장선 입니다. 접근성을 위한 테이블 사용 방법에 대해서 알아가고 있는데, 오늘은 id와 header 요소에 대해서 배웠습니다. 사실 지금까지 접근성만을 고려해봤을때, 제일 이해가 쉬운 요소가 오늘 배운 id와 header 였습니다. 뭔가 체계적이라고 해야 할까요? 이해가 쉬웠습니다. 이 부분은 마치 요소에 class 혹은 id를 별도로 부여해서 스타일이나 스크립트를 주는 방식과 비슷한 원리였습니다. 본문인 body 부분만 캡쳐한 마크업의 상태 입니다. 보시면 th 요소 안쪽으로 headers 와 id 태그가 들어있는것을 확인할 수 있습니다. 이것은 그대로 이해하시면 될 것 같습니다. 예를 들어서, 62열을 보시면 스마트폰 라고..
오늘 배운 내용은 정의형 목록 태그에 대해서 입니다. 사실 이 부분은 쓰임새가 크게 많지는 않지만, 그래도 알아두면 유용하게 사용할 수 있을 것 같습니다. 출력되는 텍스트는 비슷해도, 안에 쓰이는 태그가 다른데, 그 이유는 바로 검색엔진 때문이라고 예전 시간에 말씀드린바 있습니다. 그러므로 겉으로 보여지는게 아닌, 태그가 어떻게 쓰여지는지에 대해 알아두시면 무척이나 요긴할 것입니다. 지금까지 배운 내용 중, 목록형 요소 (태그) 는 ol과 ul 이 있었습니다. 이들의 특징은 안에 li 태그가 반드시 들어온다는 것이었는데, 정의형 목록 요소도 마찬가지 입니다. dl 안쪽에 dt와 dd만 요소로 사용할 수 있습니다. dt 태그는 인라인 요소이며 또 다른 인라인 요소와 텍스트만 사용 가능하며, dd는 블록 요..
오늘은 정말 중요한 내용입니다. 앞으로도 자주 써먹을 수 있을 그런 내용이므로 만약 저처럼 html 코딩을 배우시려고 마음을 먹으셨다면 꼭 이해하고 넘어가야 하는 영역입니다. 직업전문학교 다니기 전에 저도 무척이나 햇갈렸던 부분으로 선생님께서도 이 부분은 상당히 어려운 부분에 속한다고 말씀 하셨어요. 처음 들을 땐 무슨소린지 모를 수 있어도 자꾸 반복 학습하면 분명 이해되는 순간이 올 것입니다. div 영역 안쪽에 리스트를 만들고, 해당 리스트를 가로배열헤서 적절히 떨어뜨리는 방법에 대해서 알아볼 것입니다. 최대한 알기쉽게 많은 부분을 스크린샷 했습니다. 하나하나 꼼꼼히 보시면서 배우시면 좋을 것 같습니다. 우선 지난시간에 배웠던 html 같은 페이지 내에서 div 영역 여러개 생성 후 원하는 위치로 바..
예전에 애드센스와 티스토리 입문때 가장 골치 아팠던 부분이 바로 중앙정렬 이었습니다. 애드센스 상단 두개의 광고를 노출시키는 방법, 그리고 중앙정렬 하는 방법을 몰라서 참 해메었던 기억이 있는데, 지금 다 배우고나니 별거 없구나 라는 생각을 하게 됩니다. 테이블 (table) 태그는 영역을 나누는 기능이라기 보다는, 표를 만들 때 많이 사용하는 태그인데, 사실 거의 사용하지는 않습니다. 테이블 태그 대신 div를 많이 씁니다. 그래도 알아두면 언젠가는 요긴하게 쓰일테니 오늘 배운 간단한 개념을 한번 정리해보고 응용해보는 시간을 갖도록 하겠습니다. 우선 html 기본 구조를 작성합니다. 늘 그렇듯 사용 프로그램은 브라켓 (Brackets) 입니다. 본문 body 안쪽에 테이블을 작성해 줍니다. 사용 태그는..
제목이 다소 복잡한 것 같습니다만, 다시한번 풀어서 설명하면 이렇습니다. 하나의 메뉴를 두고, 링크된 글씨나 이미지를 누르면 아래쪽에 해당 페이지를 불러오거나, 그쪽으로 바로 이동하는 방법입니다. 보통 스크롤 내용이 많은 쇼핑몰의 경우, 오른쪽에 보시면 TOP 메뉴라던지, 제품 상세보기 버튼이 있을 수 있습니다. 바로 이런 경우가 하나의 웹페이지 상에서 구간별로 영역을 나누어 해당 구간으로 이동하는 기능이라고 보시면 됩니다. 우선 HTML 기본 태그와 요소들을 작성해 둡니다. 그리고 본문 안족에 a태그를 이용해서 구성했습니다. 저기 보시면 와 사이에 " | " 이렇게 생긴 특수문자가 보이시나요? 저건 키보드에 보시면 백스페이스 바로 왼쪽에 있는 특수문자 입니다. Shift를 누른 상태에서 누르시면 출력됩..
이번 시간에는 사소하지만 정말 중요한것을 알아보겠습니다. 이건 네이버 웹마스터에 있는 링크구조에 대한 오류와도 관련있는 문제일 수 있습니다. 더 나아가자면, 자신의 검색엔진에 노출되는 영향과도 관련이 있을 수 있습니다. 바로 이미지를 대처하는 alt 태그에 대한 내용 입니다. 일반적인 이미지 태그는 다음과 같습니다. 여기에서 저 alt 태그가 정말 정말 중요합니다. 꼭 이미지에는 alt 태그를 넣어주셔야 합니다. 왜 그런지 이유를 파악해 보겠습니다. 먼저 늘 하던대로 이미지 폴더를 html이 위치한 루트 폴더에 생성합니다. 저는 image 라고 이름을 적었습니다. image 폴더 안에 googlelogo.png 파일을 넣었습니다. 이것을 웹에 띄워보겠습니다. html 코딩을 구성합니다. width와 he..
오늘은 간단하지만 정말 중요한 개념을 배웠습니다. HTML에서 코딩시 흔하게 사용하는 태그라던지, 태그라던지 하는 개념에 대한 부분이었습니다. 이 한 묶음의 태그를 "요소" 라고 말합니다. 예를 들자면, 티스토리는 참 재미있습니다. 를 사용했을 경우, 가 한쌍으로 묶였는데, 이것을 요소라고 보시면 됩니다. 요소에는 블록요소와 인라인요소라고 하는 개념이 존재합니다. 저도 처음 들었을 때는 대체 뭔소린가 싶었는데, 자세히 배워보니까 생각보다 이해하기 쉬운 것이었습니다. 한번 예를 들어서 알아보도록 하겠습니다. 브라켓으로 HTML 기본 구조를 작성합니다. 그리고 위와같은 태그로 한번 구성해 봤습니다. 헤드 태그 안쪽에 쉽게 설명을 위한 스타일 태그도 넣었습니다. 이렇게 하면 결과가 어떻게 얻어지는지 한번 보겠..
이번 시간은 참으로 사용하기 용이한 이미지맵에 대해서 알아보겠습니다. 이 방법은 네이버 블로그에서 많이 사용합니다. 네이버 블로그를 사용하시는 분들 중에서는 위젯 곳곳에 링크를 걸어두신 분들이 제법 많이 계십니다. 대체 이건 어떻게 하는걸까 궁금하셨던 분들은 이번 강좌를 꼭 눈여겨 봐주시기 바랍니다. 이미지맵이란 말 그대로 커다란 이미지 안에서 투명한 가상의 레이어를 만들어 그곳에 링크를 거는 방법 입니다. 우선 준비물은 사용하고자 하는 이미지가 필요합니다. 그리고 HTML 태그 중, AREA 그리고 MAP 태그를 사용해서 원하는 좌표에 넘어가고자 하는 인터넷 주소를 입력해서 사용하게 됩니다. 그러면 구체적으로 어떻게 하는지 알아보겠습니다. 우선 이미지는 이것으로 사용해 보겠습니다. 웹 접근성 연구소 홈..
오늘은 특수문자에 대한 태그를 알아봅니다. 이 방법을 알아야 하는 이유는 바로 지금 작성하는 이런 강좌 관련 때문입니다. 예를 들자면 이라고 하는 태그를 문자 그대로 출력이 되게 하고 싶지만, 실제 HTML 문서상에서 P태그 안에서 작성하면 이 문자를 태그로 인식하기에 글씨는 보이지 않고 한 줄 내려쓰게 되는것으로 처리가 됩니다. 그래서 우리는 특수기호에 대한 태그를 알아야 합니다. 따라서 을 문자 그대로 HTML 문서에 출력하게 하려면 태그를 구성하는 ""에 대한 태그를 사용해서 표현하면 될 것입니다. 방금 위에서 설명한 내용입니다. 여기에서는 코딩 프로그램을 브라켓을 사용했습니다. 보시는 것 처럼 본문 안에 " 태그는 줄바꿈 태그이다." 라는 문구를 출력하고 싶은데, 과연 위의 스크린샷 내용대로만 작..
이번 시간에는 간단한 개념을 짚고 넘어가려고 합니다. 저도 이 부분에 대해 궁금했는데 오늘 수업을 들으면서 궁금증이 해소되었습니다. HTML 코드 중 안쪽에서 존재하는 여기에서 처음 나오는 h1이 바로 선택되어지는 대상, 즉 선택자라고 말합니다. 그리고 소괄호 안에 들어가는것이 바로 적용되는 스타일 내용입니다. 예시에서는 레드 컬러로 설정되었다는것을 확인할 수 있습니다. 따라서 이 뜻은, "h1 태그를 사용한 텍스트에 한해서는 글자색을 빨간색으로 만들어라!" 라는 뜻이 됩니다. 그렇기에 실제 웹으로 출력을 해보면 이렇게 태그만 글씨가 빨갛게 적용된 것을 알 수 있습니다. 어려운 개념은 아니지요? 다음은 스크립트 (script) 입니다. 스크립트 또한 스타일을 변경하기도 하지만 주로 동적인 부분을 변경시켜..