구글 블로거 플랫폼! 현재로서는 좀 엉망입니다. 특히 이미지 업로드가 너무나 불편하기 그지없습니다. 구글 얘들은 왜 블로거에 신경을 쓰지 않는 것일까요? 조금만 신경써주면 너무 멋진 플랫폼이 될 것인데 참 아쉽습니다. 그럼에도 불구하고 틈나는대로 꾸역꾸역 글을 작성하고 있습니다. 뭐든 시작할때가 어려워서 그렇지 인간이란 생명체는 금세 적응을 합니다. 블로거(Blogger)도 지금 거의 생태계를 파악해 나가고 있습니다. 오늘은 블로거 글쓰기에 대한 내용입니다. 보통과 단락형식 구글 블로거의 글쓰기 화면입니다. 지금은 상당히 심플하다는걸 알 수 있는데 처음 글을 쓸 때는 뭐가 이리 복잡하고 햇갈렸는지... 참~ 뭐든 첫 걸음이 어려운 법입니다. 자! 텍스트를 작성하기 위해서 커서를 활성화 합니다. 클릭 한 ..
여기 단 하나의 div 태그가 있습니다. 이 div 태그로 원형 오브젝트 표현은 아마 HTML과 CSS를 조금 이해하시는 분들이라면 그리 어렵지 않게 완성하실 수 있으실 겁니다. 가로 세로 값을 고정 후 border-radius 값을 50%로 적용시켜 백그라운드 색상만 입혀주면 끝입니다. 그렇게 div는 동그라미가 될 수 있는 것입니다. 문제는 div 1개당 원형 1개만 표현했다는 것입니다. 그럼 제목에서처럼 여러개의 동그라미를 만들려면 어떻게 해야 할까요? 가장 원초적인 방법은 당연히 여러개의 div를 사용하면 됩니다. 그리고 정렬만 대충 잘 해 놓으면 끝이죠. 하지만! 단 한 개의 div로 여러개의 동그라미를 표현하라고 한다면 해내실 수 있으시겠습니까? 물론 최대 3개까지는 표현 가능합니다. 가상 요..
div 블록요소들의 세로 가운데 정렬 방법에 대해 알아보도록 하겠습니다. 블록요소이면서 반응형으로 완성되는 레이아웃의 대부분은 세로 크기는 고정되어 있습니다. 본문 설명에서도 고정된 경우라고 가정하고 진행하겠습니다. 먼저 이 개념을 이해하려면 아래의 관련글들을 잘 읽어보시고 넘어가시는것을 추천합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tistory.com position을 사용한 세로 가운데 정렬 먼저 예시입니다. 세로 크기가 500px인 ..
HTML의 각 태그는 기본적인 속성이 있다고 말씀드린 바 있습니다. 바로 블록, 인라인, 블록-인라인 요소가 그것입니다. 혹시 이 개념에 대해 잘 모르신다면 먼저 아래의 글을 반드시 꼭 정독하시어 이해를 먼저 해주시기 바랍니다. 정말 중요한 부분이거든요. 개인적으로 이 개념이 확실히 머릿속에 적립된 시점부터 웹언어에 대한 이해도가 부쩍 향상되었습니다. 기초는 정말 정말 너무 중요하다고 생각합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tisto..
이 방법은 기존 DIV 커스텀 박스 만들기와 같습니다. 단지 클래스명만 다를 뿐 입니다. 그래도 처음부터 설명드리는게 훨씬 이해하시기 수월할테니 꼼꼼히 차근차근 안내해 드리겠습니다. 아래의 글은 그냥 참고만 하시기 바랍니다. 친효애드온 : 커스텀 DIV 박스 모듈 (마크1) CSS 세팅하기 기본적으로 친효스킨 최신 버전을 사용하시면 CSS는 세팅이 되어 있습니다. 따라서 본문의 내용은 친효스킨을 사용하지 않는 분들을 기준으로 설명되어 있음을 밝힙니다. 먼저 아래의 첨부파일을 다운로드 해주시기 바랍니다. 첨부파일의 텍스트 문서를 열어보시면 다음의 CSS 코드들이 들어있습니다. .rgyBG2, .rgyBG3, .rgyBG4, .rgyBG5 { margin: 10px 0; padding: 10px 15px; ..
스크립트를 써서 출력하는 Syntaxhighlighter 코드는 로딩이 다소 오래 걸려서 포스팅 출력 시간이 지연됩니다. 신형 글쓰기에 있는 코드블럭은 뭔가 많이 부족합니다. 차라리 그럴바에 그냥 직접 DIV를 꾸며서 사용하자고 생각했고 바로 실천에 옮겼습니다. HTML, CSS, 자바스크립트 등의 코드를 직관적으로 표현하고자 할 때 사용하면 요긴합니다. 코드 뿐만 아니라 뭔가 강조하고자 하는 내용에 대한 텍스트를 작성할 때에도 좋습니다. 얼마든지 활용 가능한 모듈이라고 생각합니다. 백그라운드 색상도 커스텀 할 수 있어서 원하시는 색상코드를 넣고 사용하시면 됩니다. 커스텀 DIV 박스 모듈 미리보기 먼저 검정색 백그라운드 DIV 박스 입니다. .rgyBG { margin: 10px 0; padding: ..
이번에는 div로 박스를 만들고, 테두리의 값을 입력하여 모양일 변경하는 방법입니다. 모서리 부분이 둥근 테두리 형태의 박스를 표현하고자 할 때, CSS3 에서는 border-radius 속성을 이용해서 스타일을 만들어 줍니다. 아래는 예시 입니다. 참고하시기 바랍니다. See the Pen CSS3 : border-radius by rgy0409 (@rgy0409) on CodePen. HTML과 CSS 버튼을 누르시면 코딩 상태를 확인하실 수 있습니다. 특히 CSS 부분을 유심히 살펴보시기 바랍니다. 가장 기본 형태는 다음과 같습니다. border-radius 값에 따른 적용 위치border-radius: 픽셀 혹은 %단위의 값 입력; 이렇게 하시면 사각형의 각 모서리에 입력한 값 만큼 영향을 받게됩..
브라우저의 창 크기와 상관 없이, 정 가운데 div를 위치하는 방법에 대해서는 지난시간에 말씀드린바 있습니다. 오늘은 div를 하나 생성하고, 그 안에 div를 하나 더 만들어서 정가운데로 위치하는 방법을 알아보겠습니다. 제가 사용하는 방법은 position 요소를 이용하는 것 입니다. 여기에 transform 요소까지 사용하면 가장 밖에 있는 div의 가로 세로 크기에 상관 없이, 또한 가운데 배치되는 div의 가로 세로 크기에 상관 없이 무조건 정중앙에 위치하도록 만들 수 있습니다. 그 예시가 아래에 있습니다. See the Pen CSS3: DIV in DIV Center (Middle) Align by rgy0409 (@rgy0409) on CodePen. 스크롤해서 하나하나 살펴보시기 바랍니다...
div는 블록요소 이므로 만들면 세로로 쌓이게 됩니다. 이 요소들을 가로로 정렬하기 위해서 float 속성을 사용합니다. float: left; 혹은 right를 작성하면 가로로 배열됩니다. 문제는 이 속성을 기준으로 뒤에 생성될 모든 div가 싹 다 가로정렬 하려는 성질을 갖게 됩니다. 그래서 float을 이제 그만두라는 뜻에서 해제를 진행하게 되는데, 오늘은 가상요소라는 것을 만들어서 해제하는 방법에 대해 배웠습니다. 저는 직업학교에서 배우는 예제들을 다 한번씩 직접 마크업 (코딩) 해보고 그 결과를 바로 확인하니 어떻게 작용하는지 알 것 같습니다. 여러분들께서도 이 부분을 직접 작성해 보시고 어떤 변화가 생기는지 경험을 통해서 깨달으신다면 더욱 기억에 오래 남게 될 것 같습니다. 우선 스타일 부분입..
직업학교에서 HTML과 CSS를 배우고 있는데 상당히 재밌습니다. 햇갈렸던 부분, 개념정리가 다소 안 되었던 부분, 어려웠던 부분들을 하나하나 터득해가며 내 것으로 만드는 재미가 쏠쏠하다고나 할까요? 마치 퀘스트를 받고 수행하며 보상을 얻는 기분입니다. 레이아웃 기초 부분을 배우는데 어려웠던 div에 대해서도 하나하나 개념을 적립해 나가고 있습니다. 그리고 중앙정렬에 대해서도 이제 확실히 알았습니다. 기준이 뭐가 되어야 하는지, 왜 이렇게 하면 중앙정렬이 되는지 말이죠. 원리는 간단합니다. div같은 블록요소는 반드시 크기값을 가져야 합니다. h1이나 p태그는 블록요소이고 텍스트를 작성하면 알아서 가로사이즈의 크기가 정해집니다. 그렇기 때문에 중앙정렬인 text-align:center; 를 진행하면 한방..
오늘은 정말 중요한 요소를 배웠습니다. 레이아웃을 꾸미는데 가장 기본이 되는 div 블록 요소를 가로로 정렬하는 방법입니다. h1 이나 p태그, div 등의 태그는 모두 블록요소라고 합니다. 특별히 크기를 지정하지 않았어도 크기값을 가지며, 줄바꿈 현상이 일어나는 요소를 블록요소라고 하지요. 때문에 가로로 정렬하려면 또 다른 CSS 스타일 태그를 사용해야 합니다. 이 때 사용하는 요소가 바로 float 입니다. 크게 두 가지 속성이 있습니다. float: left; → 왼쪽부터 가로로 정렬 float: right; → 오른쪽부터 가로로 정렬 이렇게 사용 되는것이 대부분이며, 각 요소를 사용하면 어떻게 되는지를 한번 살펴보겠습니다. 먼저 본문인 body 안쪽에 div 3개를 만들었습니다. 각각 클래스값을 ..
오늘은 정말 html 수업을 신청한 이유라 할 수 있는 메인화면을 구성하는 방법에 대해서 대략적으로 알아봤습니다. 디테일한 부분은 아직은 배우지 않고 있습니다. 지금의 머리로는 아직 멀었기 때문이죠. 기초를 탄탄히 다지고, 원리를 완전히 깨우친 다음 들어가도 늦지 않을 것 같습니다. 메인화면의 기본 레이아웃을 구성하는 방법입니다. 이미 몇 번 앞시간에서 말씀드린적이 있는데, 큰 덩어리를 구성하는건 div, 그리고 작은 부분에 대한 그룹화는 span 이라고 합니다. div는 블록요소, span은 인라인 요소라고 알고 계시면 좋을 듯 합니다. 이 글에서는 TOP / CENTER / BOTTOM 이 세 단락으로 크게 나눠보는 연습을 해 볼 것입니다. 그룹핑 (Grouping) 이란? 먼저 그룹핑에 대해 알아야..
오늘은 정말 중요한 내용입니다. 앞으로도 자주 써먹을 수 있을 그런 내용이므로 만약 저처럼 html 코딩을 배우시려고 마음을 먹으셨다면 꼭 이해하고 넘어가야 하는 영역입니다. 직업전문학교 다니기 전에 저도 무척이나 햇갈렸던 부분으로 선생님께서도 이 부분은 상당히 어려운 부분에 속한다고 말씀 하셨어요. 처음 들을 땐 무슨소린지 모를 수 있어도 자꾸 반복 학습하면 분명 이해되는 순간이 올 것입니다. div 영역 안쪽에 리스트를 만들고, 해당 리스트를 가로배열헤서 적절히 떨어뜨리는 방법에 대해서 알아볼 것입니다. 최대한 알기쉽게 많은 부분을 스크린샷 했습니다. 하나하나 꼼꼼히 보시면서 배우시면 좋을 것 같습니다. 우선 지난시간에 배웠던 html 같은 페이지 내에서 div 영역 여러개 생성 후 원하는 위치로 바..
제목이 다소 복잡한 것 같습니다만, 다시한번 풀어서 설명하면 이렇습니다. 하나의 메뉴를 두고, 링크된 글씨나 이미지를 누르면 아래쪽에 해당 페이지를 불러오거나, 그쪽으로 바로 이동하는 방법입니다. 보통 스크롤 내용이 많은 쇼핑몰의 경우, 오른쪽에 보시면 TOP 메뉴라던지, 제품 상세보기 버튼이 있을 수 있습니다. 바로 이런 경우가 하나의 웹페이지 상에서 구간별로 영역을 나누어 해당 구간으로 이동하는 기능이라고 보시면 됩니다. 우선 HTML 기본 태그와 요소들을 작성해 둡니다. 그리고 본문 안족에 a태그를 이용해서 구성했습니다. 저기 보시면 와 사이에 " | " 이렇게 생긴 특수문자가 보이시나요? 저건 키보드에 보시면 백스페이스 바로 왼쪽에 있는 특수문자 입니다. Shift를 누른 상태에서 누르시면 출력됩..
제작자님의 실수인건지는 모르겠는데, Fastboot 스킨의 HTML을 살펴보시면 맨 마지막에 로 마무리가 되는 태그가 보인다. 근데 이 태그가 빨간색으로 표시가 되어있다. HTML에서는 오류가 있는 태그는 빨간색으로 표시되는데, 무슨 영문인지 아무짓도 안 했는데도 불구하고 오류라고 나와 있어서 무척이나 당혹스럽다. 티스토리 반응형 스킨인 Fastboot : HTML 마지막 태그에 빨간색 표시가? 오류 해결 방법을 알아보자. 하지만 의외로 이 오류를 해결하는 방법은 간단하다. 오류는 늘 짝을 이루어 발생할 확률이 크다. 특히 다른 태그도 아닌 이라고 마무리 짓는 코드에 발생되었다는 뜻은, 이것과 비슷한 태그를 찾으면 되는 것이다. 예전에 한번 설명드린적이 있는데, HTML의 구조는 늘 시작과 끝 태그가 같..
[CSS 기초] DIV 태그를 이용하여 프레임 나누기 안녕하세요~ 친절한효자손 이에요. CSS를 이용하여, 프레임을 나누는 실습을 하고 있는데요,이거 생각보다 쉽지만은 않지만, 재.미.있.네.요! ㅎㅎㅎ 역시, 마음을 비우고, 하나하나 차근차근 배운다고 생각하고 진행하면 참으로 쉽고 재밌게 배우지 않겠느냐~라는 것이 개인 견해에요~ ㅎ 이번에는, CSS기초중, DIV태그를 써서, 웹 안쪽에 프레임을 나누는 방법을 학습했는데요,호오...확실한건, HTML TABLE 태그보다는! 쉽다는것~! (개인생각?) 한번 그럼 차근차근 진행해 보도록 할까요???? 다시한번 말씀 드리자면, HTML과는 다른특징 중 하나가, CSS 속성들은, 모두 안쪽에 들어오고,본문인 에서 자유롭게 속성을 끌어 쓰면 되기에, CSS가 ..