본문 바로가기
반응형

분류 전체보기233

[HTML] 티스토리 북클럽 스킨 여백 조정하기 이번 글에서는 북클럽 스킨을 사용하는 블로거들이 웹사이트의 여백을 조정하는 방법에 대하여 다루겠습니다. # 북클럽 초기 설정 아래 사진은 북클럽 스킨의 초기 설정 그대로의 웹 페이지입니다. 화면을 2분할로 나누어 사이드바 영역과 본문 + 여백이 형성되어 있어 여백이 과하다 생각됩니다. 물론, 여백이란 것은 사람이 어떠한 정보를 받아들이는데에 긍정적인 영향을 주고는 합니다. 실제로 프로 프리젠터들은 PPT를 작성함에 있어 한 슬라이드 내부에 여백을 40% 가량을 맞추기 위하여 노력합니다. 하지만 저는 저 여백들이 광고 노출에 긍정적인 영향을 줄 것이라 생각하지 않습니다. 왜냐하면 블로그에 유입된 방문자가 스크롤 없이 또는, 몇번의 스크롤 만으로 많은 정보를 파악하기 위해서는 하나의 화면안에 많은 정보가 보.. 2022. 7. 16.
[HTML] 영역 지정으로 header 영역 여백 잡기 이번 글에서는 header 영역의 position을 fixed로 설정하였을 때 생기는 여백 형성의 문제를 영역을 지정하여 잡는 방법에 대하여 다루겠습니다. # header 영역 여백 형성 문제 아래 사진은 header 영역의 positon을 fixed로 설정하여 header 영역이 스크롤의 움직임에 따라 같이 움직이게 설정되어 있는 웹페이지입니다. 이렇게 일정 영역의 position을 고정하였을 때 아래사진과 같이 여백이 형성되고는 합니다. #header { background-color: yellow; position : fixed; width : 2000px; height : 100px; border-bottom: 2px solid red; } 위 html 코드가 header를 이루고 있는 css 파.. 2022. 7. 14.
[HTML] align 속성 사용방법 이번 글에서는 html 에서 표를 정렬하는 속성인 text-align 과 vertical-align 에 대하여 다루겠습니다 # align 정의 align은 '일렬로 나란히 하다' 또는 '정렬하다'라는 뜻을 가진 영단어입니다. html 에서 사용하는 태그는 아니나, 스타일 시트를 통하여 html에 연결하는 CSS에서 사용되는 속성입니다. text-align 은 표의 수평방향 정렬의 방식을 left, middle, right 로 지정하여 왼쪽 가운데 오른쪽 정렬중에서 선택하는 속성입니다. vertical-align은 top, middle, bottom을 지정하여 위, 가운데, 아래 정렬중에서 선택하는 속성입니다. 우리는 이 2가지 정렬 속성중에서 하나씩을 선택하여 총 6개의 9개의 큐브 속에서 우리의 정보가.. 2022. 7. 12.
[HTML] div class와 div id 사용방법 이번 글에서는 html을 사용함에 있어서 꾸며주는 역할을 하는 css를 사용하고자 할 때 사용하는 태그인 div 태그에 대해서 다루겠으며 그 중에서 class와 id 속성의 차이점에 대해 중점적으로 다루도록 하겠습니다. # CSS 파일 이 HTML문서는 CSS 파일입니다. 이 CSS 파일은 우리들 티스토리 블로그의 블로그 메뉴를 꾸며주고 있습니다. 각 요소들이 그저 문자와 링크의 집합인 HTML 정보를 아래와 같은 블로그 메뉴로 바꾸어주고 있는 것입니다. # div id 와 div class의 차이점 div id와 class의 차이는 중복 가능성입니다. id는 html 문서 내에서 오직 단 한번만 사용이 가능합니다. 만약에, 와 같이 사용하였다면 다른 위치에서 a 를 id로서 정의할 수 없어집니다. 하지.. 2022. 7. 10.
반응형