자바스크립트 중 하나인 제이쿼리를 활용하여 a href에 URL 링크 주소가 들어가지 않고 그냥 #을 넣었을 경우 클릭을 하게 되면 페이지 맨 위로 올라가는 현상이 있습니다. 가장 기본이 되는 현상인데 이걸 원하지 않고 그냥 클릭했을 경우 아무런 반응이 없는, 즉 페이지가 제자리에 머물러 있게 만들고 싶은 경우 입니다. 두 가지 방법으로 진행이 가능합니다. jQuery 구성가장 먼저 소개하는 방법은 제이쿼리를 이용한 방법 입니다. 이 방법의 장점은 사이트 내 모든 a href="#" 을 사용하는 링크 태그에 클릭 방지를 걸 수 있는 방법입니다. 한 마디로 광역 마법인 샘 입니다. 코드는 다음과 같습니다. 이 스크립트를 안쪽에 그대로 삽입하시면 됩니다. 별도로 세팅할 필요가 없이 아주 간편하게 적용시킬 수..
이 글은 HTML에 대한 기초 지식이 전혀 없으신 분들께서 티스토리의 HTML 편집 부분을 어떤 식으로 접근해야 하는지에 대한 가이드 목적으로 작성되었습니다. 애드센스 승인 이후 스크립트 코드를 어디에 넣어야 하는지, 또 간단한 HTML 구조에 대해서 파악하는 목적도 가지고 있습니다. 친효스킨을 기준으로 설명이 되어 있습니다. 티스토리 내에서의 HTML 구조HTML은 사람으로 비유하자면 뼈대라고 생각하시면 됩니다. 사람도 뼈가 정위치에 와야 생활할 수 있듯 HTML도 각 뼈대의 역할이라는게 있습니다. 크게 헤더 사이드바 본문 푸터 잘 보시면 뭔가 공통점이 보일 겁니다. HTML의 구조는 마치 러시아 전통 인형인 마트로시카와 비슷합니다. 인형을 열어보면 또 인형이 있고, 또 그 인형을 열면 또 인형이 안에..
저도 까먹기 전에 빨리 이걸 써놔야 할 것 같습니다. 더불어 티스토리 스킨을 직접 제작하려고 결심하신 분들도 계실 것 입니다. 그분들에게 조금이나마 도움이 되었으면 하는 바램도 있습니다. 티스토리 스킨을 처음 만들려고 도전했을 때, HTML 스킨 구조가 어떤건지 쉽사리 파악이 되지 않아서 다소 고생한 경험이 있습니다. 경험을 바탕으로 최대한 자세하면서 단순하게 설명해 보겠습니다. 또한 티스토리에서 제공하는 스킨 가이드 페이지도 같이 참고하시면 이해하는데 도움이 될 것입니다. 이곳에서의 설명은 HTML과 CSS를 어느정도 이해하고 계신 분들을 위한 강좌입니다. HTML 웹코딩을 좀 하실 줄 아신다면 아마 쉽게 이해가 되시겠지만, 코딩과 태그에 대한 기초 지식이 없으신 분들이시라면 파악하시는데 조금 어려움이..
코딩 순서에는 사실 정답이 있지 않다고 합니다. 보통 회사에서 사용하는대로, 혹은 사수가 즐겨쓰는 스타일대로 따라가게 되는데 통상적인데요, 그럼에도 불구하고 "우리 이것만큼은 이 순서대로 하면 참 보기 좋을 것 같다!" 하고 정해놓은 규칙이 있긴 한가 봅니다. 제가 다니고 있는 이곳 국비학원에서도 선생님께서 이렇게 작성해주면 좋다고 말씀해 주셨습니다. 오늘은 CSS에서의 코딩 순서에 대해 배워보겠습니다. 거두절미하고 CSS 코딩 순서는 아래와 같습니다. 01. display02. overflow03. float04. position05. z-index06. width & height07. margin & padding08. border09. font10. background11. etc (ex. opac..
CSS에서는 마우스를 올렸을 경우에 애니메이션을 변경한다던지, CSS3 애니메이션을 사용하여 반복적인 움직임을 만들 수 있습니다. 왜 CSS에서는 클릭 이벤트를 만들지 않았을까요! 정말 너무 아쉬운 순간입니다. 버전이 올라가면서 부디 클릭 속성에 대한 설정 부분도 추가되었으면 좋겠습니다. 자바스크립트가 늘어날수록 웹페이지의 로딩 시간은 그만큼 길어지는데다 오류의 주요 원인이 될 수 있기 때문에 저는 CSS를 좋아할 수 밖에 없습니다. (사실 스크립트를 잘 몰라서...) 구글에서 CSS 관련 클릭 이벤트에 대해 검색해보니 역시 해결하신분들의 경험담을 확인할 수 있었습니다. 단 이 방법은 공식적이지 않으며 지극히 개인적인 방법이라는 것을 염려해 두셨으면 좋겠습니다. 개인적으로는 무척 마음에 들었던 방법입니다..
수업 시간에 이미지를 활용해서 스플릿 이미지 메뉴 만드는 방법에 대해 배웠습니다. 이 메뉴 구현의 최대 단점은 이미지를 써야 한다는 것이죠. 꼭 이미지를 써야 할까요? 아닙니다. CSS3 스타일로도 얼마든지 구현이 가능합니다. 이미지 없이 태그 요소만으로도 스플릿 메뉴를 만들 수 있습니다. See the Pen CSS3 : Split Menu by rgy0409 (@rgy0409) on CodePen. 먼저 완성된 nav 메뉴 형태를 살펴보시기 바랍니다. 저 메뉴 위에 마우스를 올려다 놓으면 새로운 메뉴2가 위로 올라오는것을 확인하실 수 있습니다. 그러면 HTML 부터 살펴보시겠습니다. MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 구조는 간단합니다. 다만 li 태..
html과 CSS에서 게시판 목록에 대해서 만들고자 할 때, table 태그 요소를 활용해서 만들곤 합니다. 그리고 ul, li 요소로도 얼마든지 꾸밀 수 있습니다. 여기에서는 li를 활용하여 테이블을 구성해 보겠습니다. 먼저 아래의 완성된 모습을 참고해 주시기 바랍니다. 이렇게 완성 됩니다. 그러면 본문 내용과 CSS 스타일 상태를 한번 살펴보겠습니다. 먼저 HTML body 영역 안의 마크업 상태입니다. 공지사항 내용날짜 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018..
지난 시간에 이어서 오늘은 그 응용편으로 3단 메뉴를 구성해 보겠습니다. 2단 메뉴에서 한단계 더 깊은 형태이기 때문에 크게 어렵지는 않을 것 입니다. 3단 메뉴이므로 ul 태그가 총 3개 들어갑니다. 어떤 식으로 들어가는지 살펴보시겠습니다. 어떤 메뉴인지 잘 감이 안 오시면 아래의 예시를 먼저 살펴봅시다. 이것이 메인 메뉴가 가로형태인 3단 메뉴 구성의 예시 입니다. 어떤 형태인지 아시겠죠? 그러면 먼저 html 마크업 상태를 살펴보겠습니다. 메뉴1 소메뉴1 소메뉴2 2단소메뉴1 2단소메뉴2 2단소메뉴3 소메뉴3 2단소메뉴4 2단소메뉴5 2단소메뉴6 메뉴2 소메뉴1 2단소메뉴7 2단소메뉴8 2단소메뉴9 소메뉴2 2단소메뉴10 2단소메뉴11 2단소메뉴12 소메뉴3 2단소메뉴13 2단소메뉴14 2단소메뉴1..
지난 시간까지 드롭다운 메뉴 구성하는 방법에 대해 알아봤습니다. 오늘은 2단 메뉴가 한꺼번에 나오는 방법에 대해서 어떻게 진행하는지에 대해 알아볼 것입니다. 무슨 뜻이냐면, 1단 li 에 마우스를 오버하면 해당 li 의 메뉴에 대한 또 하나의 2단 ul li 가 나타나게 됩니다. 예를 들자면 아래와 같은 경우 입니다. 이해 되시나요? 이런 경우 입니다. 아마 이와같은 홈페이지 메뉴 구성은 심심찮게 보셨을 것입니다. 그러면 어떻게 구현되는지 살펴보도록 하겠습니다. 모바일에서 보시는 분들도 계실 수 있으니, 최대한 이미지가 선명하게 보일 수 있도록 세로로 배치하겠습니다. 참고로 이번 강좌를 이해하기 위해서는 먼저 1단 메뉴부터 구상하는 방법에 대해서 학습하시면 좋습니다. 해당 내용을 아래에 올려두겠으니 먼저..
지난 시간에 이어서 이번에는 2단계 메뉴를 만드는 방법입니다. 이전시간에 만들었던 메뉴를 그대로 활용해서 진행합니다. 따라서 이번 강좌를 이해하시는데 있어서 전 시간의 가로 형태의 1단 메뉴를 먼저 익히시고 이 글을 보시는것이 도움이 됩니다. 빠르게 참고하시라고 아래에 관련글을 남기도록 하겠습니다. CSS ul li 사용하여 가로형 1단 메뉴 리스트 만들기 형태는 이렇습니다. 먼저 1단 메뉴는 가로 형태이고, 마우스를 올렸을 때, 세로 형태로 2단 리스트가 나오게 만드는 방법입니다. 조금 복잡하겠지만 원리만 이해하면 크게 어려운 부분은 없습니다. 그럼 한번 살펴보겠습니다. 먼저 HTML 마크업 상태 입니다. 보시면 li 안쪽에 다시한번 ul이 자리잡고 있는 것을 알 수 있습니다. 그리고 1단 ul 과 2..
오늘은 HTML + CSS 에서 가로형태의 메뉴를 만들어 보겠습니다. 홈페이지나 블로그에서 심심찮게 살펴볼 수 있는 항목입니다. 주로 ul li 요소를 가로로 배치하여 사용하게 됩니다. 예전에 div를 가로 정렬하는것에 있어서 float 요소를 사용한다고 배운 바 있습니다. 그리고 float을 사용하셨다면 반드시 이것을 해제해 주셔야 다음에 배치될 태그 요소들이 정상적으로 제 위치에 놓여지게 됩니다. 한번 알아보겠습니다. 먼저 HTML 마크업 상태 입니다. 현재 style을 외부스타일로 지정했습니다. head 안쪽에 link 태그를 사용해서 스타일을 불러와 인식하는 방법입니다. body 본문을 살펴보시면 ul 그리고 li 태그를 써서 메뉴를 4개 만들었습니다. 그리고 ul 요소를 menu1 이라고 하는 ..
직업학교에서 HTML과 CSS를 배우고 있는데 상당히 재밌습니다. 햇갈렸던 부분, 개념정리가 다소 안 되었던 부분, 어려웠던 부분들을 하나하나 터득해가며 내 것으로 만드는 재미가 쏠쏠하다고나 할까요? 마치 퀘스트를 받고 수행하며 보상을 얻는 기분입니다. 레이아웃 기초 부분을 배우는데 어려웠던 div에 대해서도 하나하나 개념을 적립해 나가고 있습니다. 그리고 중앙정렬에 대해서도 이제 확실히 알았습니다. 기준이 뭐가 되어야 하는지, 왜 이렇게 하면 중앙정렬이 되는지 말이죠. 원리는 간단합니다. div같은 블록요소는 반드시 크기값을 가져야 합니다. h1이나 p태그는 블록요소이고 텍스트를 작성하면 알아서 가로사이즈의 크기가 정해집니다. 그렇기 때문에 중앙정렬인 text-align:center; 를 진행하면 한방..
이번에는 HTML에서 백그라운드 (배경) 에 이미지를 넣는 방법입니다. 색을 부여하는 방법은 background : #원하는 16진수 색상코드 ; 를 CSS에서 부여하면 간단히 해결 됩니다. 이미지는 과연 어떻게 넣을까요? 알아보겠습니다. 먼저 백그라운드 색상을 지정하는 방법입니다. 보시는 것 처럼 원하는 선택자를 입력하시고, 속성 요소에 화살표가 가리키는대로 마크업 하시면 됩니다. 16진수로 색상을 입력하거나 이미 지정된 색 명칭으로 넣으시면 됩니다. 그러면 이렇게 백그라운드에 입력한 색상이 표현 됩니다. 이제 이미지를 넣어보겠습니다. 이미지 CSS 태그는 위에 나온대로 진행하시면 됩니다. 중요한건 경로를 꼭 제대로 입력하셔야 한다는 것 입니다. 또한 url 다음에 오는 괄호는 절대 붙여써야 한다는 것..
오늘은 CSS 스타일 중 border 태두리 속성에 대해서 배웠습니다. 사용법은 간단합니다. 테두리가 어떤 형태로 나타나는지, 그리고 해당 요소는 무엇인지만 기억해 주시고, 적절한 문장을 강조하고자 할때, 한 문단을 감싸고자 할 때 적시적소에 쓰시면 되겠습니다. 우선 마크업 상태를 확인해 주시기 바랍니다. 그리고 본문 body 안쪽에는 단락 요소인 p태그를 사용했고 짧은 문장을 몇 개 적었습니다. 그리고 p태그는 class 값을 부여했습니다. 각 클래스별 스타일을 내부스타일 방식으로 head의 style 에서 지정하였습니다. 보시면 border 속성값이 대략적으로 3가지 묶음 정도로 보여지게 되는데 각 요소의 역할은 다음과 같습니다. border : { 테두리 두께, 테두리 형태(디자인), 테두리 색상 ..
오늘은 텍스트 데코레이션 요소들에 대해서 다시한번 짚고 넘어가는 시간 입니다. 전 시간에 아마 한번 언급했던 부분이 있을 수 있겠는데요 복습한다는 마음으로 다시한번 봐주시면 감사하겠습니다. a링크에 대해서 말씀 드릴 때 나왔을수도 있는 부분입니다. 복습겸 다시한번 살펴보도록 하겠고, 여기에 오늘의 주제인 text-decoration 태그 스타일에 대해서 다양하게 다뤄보도록 하겠습니다. 태그라는게 알수록 신기하고 재밌네요. 이런 맛에 코딩을 하는 것 같습니다. 먼저 text-decoration의 쓰임새를 간단히 살펴보기 위해서 위와같이 마크업을 해두었습니다. a 요소에서 많이 쓰이는 text-decoration: none; 부분도 등장하게 될 것입니다. 먼저 이렇게 마크업을 하면 당연히 a 링크가 걸린 텍..
오늘 수업은 매우 알찼습니다. padding (패딩) 그리고 margin (마진) 에 대해서 다시한번 그 개념을 짚는 시간이었습니다. 또한 다양한 쓰임새를 파악할 수 있었습니다. 예전에 이게 너무 햇갈려서 사용하는데, 그리고 수정하는데 어려움이 많았지만 지금은 입맛대로 꾸밀 수 있을 것 같습니다. 티스토리를 입문하시고, 조금 용기내어 스킨을 수정하려고 하면 도무지 알 수 없는 코딩들 때문에 어떻게 손을 대야 좋을지 몰랐다면, 지금은 이제 어떤 부분을 고쳐야 하는건지에 대한 감이 조금씩 오고 있습니다. 두리뭉실하게 알고 있던 부분이 더 확고해졌습니다. 말이 길어졌군요. 바로 본론으로 들어가도록 하겠습니다. padding 개념 및 사용 방법 먼저 padding에 대한 개념과 간단한 사용 방법을 알아보겠습니다..
오늘은 텍스트를 자유롭게 위치시키는 방법을 배워보았습니다. 생각보다 어렵지는 않습니다. 크게 세가지 정도만 기억하고 있으면 될 것 같습니다. 먼저 좌/우에 대한 요소는 text-align 으로 진행하시면 되며, 상/하 위치의 요소는 vertical-align 으로 진행하시면 됩니다. 태그 구성을 먼저 살펴보시면 다음과 같이 구성할 수 있겠습니다. 이번에는 스타일을 인라인 방식으로 마크업을 했습니다. 헤드안의 스타일 안쪽에서 주는 내부 방식은 생략했습니다. body 안의 태그 요소들을 잘 봐주시길 바랍니다. 그리고 위에서 말씀드렸던 태그의 각각을 하나하나 설명드리겠습니다. vertical-align: top; → 텍스트 혹은 이미지를 맨 위로 정렬vertical-align: middle; → 텍스트 혹은 ..
오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다. 지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다. font-family → 글꼴을 지정합니다.font-size → 글자 크기를 설정합니다. 단위는 px 입니다.font-weight → 글자의 굵기를 설정합니다. 보통 bold 를 사용합니다.font-style → 기울이기 등의 글자 스타일을 지정합니다.font-variant → 영어 작성 시, 작은..
오늘은 가상 클래스 선택자에 대해 배웠습니다. 보통 링크 태그인 a 요소에서 많이 볼 수 있습니다. 우리가 흔히 알고 있는 텍스트 기본 링크 색상은 파란색이며, 밑줄이 그어져 있습니다. 그리고 한번 방문한 링크는 보라색으로 바뀌어 있습니다. 이 부분을 설정할 수 있는데, 가상 클래스 선택자를 통해서 수정이 가능합니다. 태그를 먼저 살펴보겠습니다. 위의 스크린샷처럼 작성하시면 됩니다. 각 부분의 설명은 다음과 같습니다. a:link → 링크가 걸린 텍스트의 기본 상태a:visited → 한번 이상 방문했던 링크 텍스트a:hover → 링크가 걸린 텍스트 위에 마우스가 올라갔을 경우를 설정a:active → 링크가 걸린 텍스트를 클릭하고 있을 때를 설정 보통은 색상 변경을 가장 많이 하는 편이죠. 아니면 밑..
오늘은 각 요소에 클래스값을 부여하고, 이들을 모두 그룹화해서 일괄적으로 스타일을 적용시키는 방법에 대해서 배웠습니다. 여러개의 클래스값을 사용하는 경우에, 이들 중 일부 몇 클래스만 동일한 스타일을 적용시키고 싶다면 그룹으로 묶어서 관리할 수 있습니다. 내부스타일로 적용한다고 했으니, head 안쪽에 style 영역을 따로 만들어 줍니다. 그리고 본문을 먼저 작업을 합니다. 지금 보시면 h1부터 h5까지 다양한 요소들로 텍스트를 작성했는데, 제목 부분인 h1을 제외한 나머지에 class 값을 부여했습니다. 각 클래스값은 다릅니다. 이 모든 클래스값에 동일한 스타일을 적용시키고자 한다면 어떻게 할까요? 간단합니다. 콤마(,)를 이용하여 그룹화를 만들고 일괄 적용할 수 있습니다. 위에 빨간색으로 표시된 부..
오늘은 정말 html 수업을 신청한 이유라 할 수 있는 메인화면을 구성하는 방법에 대해서 대략적으로 알아봤습니다. 디테일한 부분은 아직은 배우지 않고 있습니다. 지금의 머리로는 아직 멀었기 때문이죠. 기초를 탄탄히 다지고, 원리를 완전히 깨우친 다음 들어가도 늦지 않을 것 같습니다. 메인화면의 기본 레이아웃을 구성하는 방법입니다. 이미 몇 번 앞시간에서 말씀드린적이 있는데, 큰 덩어리를 구성하는건 div, 그리고 작은 부분에 대한 그룹화는 span 이라고 합니다. div는 블록요소, span은 인라인 요소라고 알고 계시면 좋을 듯 합니다. 이 글에서는 TOP / CENTER / BOTTOM 이 세 단락으로 크게 나눠보는 연습을 해 볼 것입니다. 그룹핑 (Grouping) 이란? 먼저 그룹핑에 대해 알아야..
예전에 한번 CSS 스타일에 대해서 언급한적이 있는데, 저도 언제 그랬는지 까먹었으니 다시한번 개념을 정리하고자 합니다. HTML에서 스타일을 적용하는 방법은 통상적으로 3개가 있습니다. 하나는 태그에 직접 스타일을 주는 인라인 방식, 두번째는, head 요소 안에 style을 지정하는 내부스타일 방식, 마지막은 아예 CSS 만 따로 모아둔 파일을 만들어서 외부에서 불러와서 적용하는 외부스타일 방식 입니다. 인라인 방식 지금 보시는 마크업 중 빨간색 표시가 된 부분이 인라인 방식 입니다. 태그 요소에 직접 스타일을 부여해서 적용하는 방법입니다. 스타일 적용 방법 중 가장 최우선으로 적용됩니다. 내부 방식 노란색 표시 부분이 내부스타일 방식으로 적용된 모습 입니다. head 요소 안에 스타일을 따로 만들고..
오늘은 홈페이지를 만들 때, 가장 기본이 되는 여러가지 폼에 대해서 배웠습니다. 어떤 종류의 폼이 있는지 알아보고, 어떻게 태그를 사용하는지, 어떻게 적용시키는지에 대해서 간단히 알아볼 것입니다. 먼저 아이디를 입력해야 한다면, 빈 칸을 구성하는 네모 상자가 필요하겠습니다. 그리고 비밀번호 입력 항목도 있어야 합니다. 성별을 선택하는 메뉴도 필요할 것 같고, 주민번호를 요구하기도 하겠죠? 그리고 비밀번호 분실 시 질문을 선택하는 항목도 있는 경우를 종종 경험해보셨을 겁니다. 그리고 오픈마켓에서 흔하게 볼 수 있는 제품 구매 후기 칸도 한번 구성해 보도록 하겠습니다. input type="text" / id / name / method / action / enctype 먼저 폼을 사용하기 위해서 본문인 b..
지난시간까지 테이블 사용법에 대해서 계속 배워가고 있습니다. 오늘 시간도 그 연장선 입니다. 접근성을 위한 테이블 사용 방법에 대해서 알아가고 있는데, 오늘은 id와 header 요소에 대해서 배웠습니다. 사실 지금까지 접근성만을 고려해봤을때, 제일 이해가 쉬운 요소가 오늘 배운 id와 header 였습니다. 뭔가 체계적이라고 해야 할까요? 이해가 쉬웠습니다. 이 부분은 마치 요소에 class 혹은 id를 별도로 부여해서 스타일이나 스크립트를 주는 방식과 비슷한 원리였습니다. 본문인 body 부분만 캡쳐한 마크업의 상태 입니다. 보시면 th 요소 안쪽으로 headers 와 id 태그가 들어있는것을 확인할 수 있습니다. 이것은 그대로 이해하시면 될 것 같습니다. 예를 들어서, 62열을 보시면 스마트폰 라고..
이번 수업을 이해하는데 좀 시간이 걸렸습니다. 그리고 반드시 코딩을 함에 있어서 알아야 하는 건 아니지만, 그래도 알아두시면 좋은 것 같습니다. 뭐든지 많이 알면 좋은 것 같아요. 제목에서도 써놨듯 colgroup에 대한 내용, 그리고 thead, tbody, tfoot 에 대한 내용인데 우리가 다양한 태그를 구사하는 이유는 접속한 사용자를 위한 것 보다는 사실 웹 언어를 이해해야하는 검색엔진 때문이라고 말씀 드렸을 것입니다. 사실 표 테이블을 작성함에 있어서는 그냥 일반적인 tr, th, td 의 요소들만 알고 계셔도 충분히 만드실 수 있습니다. 하지만 이 내용에서 나오는 요소들의 태그를 활용하는 이유는 바로 접근성 때문인데요, 우리는 단순히 시각화된 내용을 통해 정보를 가져가지만, 세상에는 장애를 가..
오늘 배운 내용은 정의형 목록 태그에 대해서 입니다. 사실 이 부분은 쓰임새가 크게 많지는 않지만, 그래도 알아두면 유용하게 사용할 수 있을 것 같습니다. 출력되는 텍스트는 비슷해도, 안에 쓰이는 태그가 다른데, 그 이유는 바로 검색엔진 때문이라고 예전 시간에 말씀드린바 있습니다. 그러므로 겉으로 보여지는게 아닌, 태그가 어떻게 쓰여지는지에 대해 알아두시면 무척이나 요긴할 것입니다. 지금까지 배운 내용 중, 목록형 요소 (태그) 는 ol과 ul 이 있었습니다. 이들의 특징은 안에 li 태그가 반드시 들어온다는 것이었는데, 정의형 목록 요소도 마찬가지 입니다. dl 안쪽에 dt와 dd만 요소로 사용할 수 있습니다. dt 태그는 인라인 요소이며 또 다른 인라인 요소와 텍스트만 사용 가능하며, dd는 블록 요..
html CSS를 사용해서 테이블의 사이즈를 조정할 수도 있지만, 간단한 방법도 존재합니다. 바로 col 태그 입니다. col은 Column 의 약자로 "행" 이라고 하며, 가로를 의미합니다. 엑셀에서 위로 쭈욱 선택한게 바로 행 입니다. row는 "열" 이라는 뜻으로 가로를 뜻 합니다. 처음에 이게 좀 햇갈려서 테이블 태그 구성하는게 어려웠습니다. 아주 사소한 것이지만, 기본 개념을 잘 숙지하신다면 차후에 나오는 여러가지 응용 방법에 대해 능숙하게 해결하실 수 있을 것 입니다. 지난 시간에 배웠던 테이블 태그 구성과는 조금 다른게 눈에 보이실 것입니다. 우선 헤드 안쪽의 스타일은 신경 쓰시지 마세요. 단지 표의 스타일을 바꾼 정도일 뿐 입니다. 중요한건 본문의 table 요소들 입니다. 참고로 tabl..
오늘은 정말 중요한 내용입니다. 앞으로도 자주 써먹을 수 있을 그런 내용이므로 만약 저처럼 html 코딩을 배우시려고 마음을 먹으셨다면 꼭 이해하고 넘어가야 하는 영역입니다. 직업전문학교 다니기 전에 저도 무척이나 햇갈렸던 부분으로 선생님께서도 이 부분은 상당히 어려운 부분에 속한다고 말씀 하셨어요. 처음 들을 땐 무슨소린지 모를 수 있어도 자꾸 반복 학습하면 분명 이해되는 순간이 올 것입니다. div 영역 안쪽에 리스트를 만들고, 해당 리스트를 가로배열헤서 적절히 떨어뜨리는 방법에 대해서 알아볼 것입니다. 최대한 알기쉽게 많은 부분을 스크린샷 했습니다. 하나하나 꼼꼼히 보시면서 배우시면 좋을 것 같습니다. 우선 지난시간에 배웠던 html 같은 페이지 내에서 div 영역 여러개 생성 후 원하는 위치로 바..
지난시간에는 테이블 (TABLE) 태그의 개념 정리와 간단한 표 만드는 방법에 대해서 확인해 봤습니다. 이번 시간에는 합치기를 알아보겠습니다. 보통 엑셀에서도 셀을 합치고 나누는 기능이 있는데, HTML 테이블 태그로도 합치기가 가능합니다. 나누기는 미리 표를 최대로 나눠진 상태에서 시작을 해야하는 부분이므로 별도로 나누는 기능은 필요하지 않습니다. 참고하시기 바랍니다. 합치기는 가로로 합치는 방법, 세로로 합치는 방법이 있습니다. 근데 사실 개념을 잘 살펴 보시면 합친다는게 아니라, 미리 합쳐질 칸을 계산해서 출력한다고 보시는게 더 정확할 것 같습니다. 말로는 햇갈리므로 다시 실제 예시를 살펴보면서 알아보겠습니다. 혹시 이전 강좌를 아직 못 보셨다면 한번 보시고 이 내용을 살펴보시면 많은 도움이 될 것..
예전에 애드센스와 티스토리 입문때 가장 골치 아팠던 부분이 바로 중앙정렬 이었습니다. 애드센스 상단 두개의 광고를 노출시키는 방법, 그리고 중앙정렬 하는 방법을 몰라서 참 해메었던 기억이 있는데, 지금 다 배우고나니 별거 없구나 라는 생각을 하게 됩니다. 테이블 (table) 태그는 영역을 나누는 기능이라기 보다는, 표를 만들 때 많이 사용하는 태그인데, 사실 거의 사용하지는 않습니다. 테이블 태그 대신 div를 많이 씁니다. 그래도 알아두면 언젠가는 요긴하게 쓰일테니 오늘 배운 간단한 개념을 한번 정리해보고 응용해보는 시간을 갖도록 하겠습니다. 우선 html 기본 구조를 작성합니다. 늘 그렇듯 사용 프로그램은 브라켓 (Brackets) 입니다. 본문 body 안쪽에 테이블을 작성해 줍니다. 사용 태그는..