본문 바로가기

잉고래의 티스토리

CSS 기초 문법 2가지 구문만 알면 오케이~ CSS 구문구성 지난 'CSS가 없던 시절의 문제' 글에 이어서 이번 글에서는 CSS가 어떻게 구성이 되는지 알아보자. CSS의 규칙은 선택자(Selector)와 선언 블록(declaration block)으로 구성된다.첫번째 선택자는 HTML의 나 태그 같은 스타일을 지정할 HTML 태그나 클래스, ID 등을 가리킨다. 두번째 선언블록은 하나 이상의 선언들 모음을 말하는데, 블록 안의 각 선언들은 세미콜론(;)으로 끝마치거나 구분되고 시작과 끝은 중괄호({ })로 둘러싸여진다. 그럼 이제 선언 블록 안의 각각의 선언들은 어떻게 구성이 되어지는지 알아야 할 것이다. 개별적인 선언(declaration)은 속성(Property)과 값(Value)으로 구성된다. 속성이란건 어떤 요소에 대한 속성을 말한다. .. 더보기
CSS가 없던 시절의 문제 CSS란 무엇인가? CSS는 Cascading Style Sheets의 약자이다. 한글로 하면 '계단식 양식 문서들' 이란 어색한 해석이 된다. 왜 이런 이름이 지어 졌는지 궁금하면 지난 포스팅 글인 'CSS는 왜 Cascading Style Sheet일까?'를 참고하도록 하자. CSS는 다음의 특징들을 갖는다. CSS는 HTML 요소를 화면, 종이 또는 다른 매체에 표시하는 방법을 설명한다. CSS는 많은 작업을 저장하여, 한 번에 여러 웹 페이지의 레이아웃을 제어 할 수 있다. HTML 내부에 삽입된 CSS가 아닌 외부 스타일 시트는 CSS 파일에 저장된다. CSS를 어디에 쓰지? CSS는 디자인, 레이아웃 및 다양한 장치 및 화면 크기에 대한 디스플레이의 변형을 포함하여 웹 페이지의 스타일(양식)을.. 더보기
CSS는 왜 Cascading Style Sheet일까? 티스토리 스킨 변경하는데 뭐가 이리 어려운지. 모르는게 너무 많다. 일단 css를 제대로 알아야 겠다는 생각이 들어서 처음부터 공부해 보기로 맘 먹었다. 막상 시작 지점으로 와서 보니 내가 css란 용어도 잘 몰랐구나 하고 깨닫게 된다. css란게 cascading style sheets의 약자인데, 한글로는 폭포식, 계단식 스타일 시트 이런식으로 번역 된다. 처음 단어부터 잘 와닿지 않는 뜬금없는 폭포식, 계단식이란 용어 때문에 왜 이런 명칭이 붙게 되었을까?하고 의구심이 든다. 여기에는 사연(?)이 당연히 있다. html의 계층적 구조에는 각각의 태그들이 존재한다. 이런 태그들을 꾸미는 것이 스타일이고 이렇게 꾸며진 각 태그마다의 스타일은 상위에서 하위로 상속이 되면서 각 스타일들이 누적되어지면서 가.. 더보기
티스토리 스킨 계속 변경해야할지 말아야할지 아직도 멈추지 않고 티스토리 블로그 스킨을 변경 중이다. 티스토리 블로그의 경우 네이버 블로그나 다음 블로그 보다 스킨에 대한 자유도가 훨씬 높다. 이 부분이 내가 티스토리를 선택한 주된 이유인데, 내가 맘대로 바꿀수 있다는게 너무 좋다. 물론 완전한 자유도를 느끼려면 블로그를 운영할 서버를 임대하거나 그도아니면 직접 운영해야 하지만 난 그럴정돈 아닌지라. 내게 티스토리는 최선의 선택이라 본다. 그런데 요즘은 자꾸 욕심이 부쩍 생긴다. 이미 잘 만들어진 반응형 웹스킨을 가져다 쓰면 될 것을 무엇하러 하나씩 배워가며 스킨을 바꾸고 있나 싶어지는거다. 예를들면 이런거다 난 열심히 자동차를 만들어서 타고 다닐려고 하는데, 눈 앞에 훨씬 멋지고 좋은 스포츠카가 공짜로 제공되는 느낌? 난 왜 차를 만들고 있는거지.. 더보기
초간단 WAI-ARIA 이해 영상 WAI-ARIA의 초간단 분석 티스토리 관리자 페이지에서 제공하는 반응형 웹 스킨의 코드를 보다가 role이란 속성을 발견했습니다. 이게 뭐지?? 하고 간단히 찾아봤는데, 전혀~ 이해가 안 되는거에요. 한참 보다가 나름 이런게 아닐까 싶어서 영상으로 정리해봤습니다. 근데 찍어놓은거 보니 정말 오글거리네요. 말은 왜이리 떠듬이는겨~ ㅋㅋㅋㅋㅋㅋㅋㅋㅋ WAI ARIA의 이해 웹 콘텐츠를 제작할 때 장애인을 위한 접근방법을 정의하는 것을 ARIA(Accessible Rich Internet Applications)라고 합니다. 그 중에서 role의 경우는 해당 영역이 콘텐츠 영역인지 배너 영역인지, 검색영역인지 등을 정의하여 해당 요소들을 스크린 리더가 인식하기 쉽게 만듭니다. ARIA 관련 추천 링크 정말 .. 더보기
5분만에 만드는 티스토리 버튼 스킨 티스토리 댓글 버튼 스킨 바꾸기 티스토리 블로그 스킨을 변경하기 시작한지 오늘로 9일인지, 10일인지 되네요. 시작하기 전에는 지루하고 힘든 작업이 될거라 생각했었는데, 막상 해보니 생각보다 재밌네요. 하나 하나 바꿔나가는 과정을 보고 있노라니 나름 화초 키우는 기분입니다. 오늘은 댓글 입력창 옆에 있는 '입력버튼' 모양을 바꿔봤습니다. 예전에 이미지 버튼으로 만들어서 넣었는데 지금보니 가독성도 떨어지고 이걸 왜 해놨지 싶더라고요. 댓글 버튼 치환자 스킨 바꾸는 과정은 그리 어렵지 않습니다. 관리자 모드의 html 코드에서 치환자 '_rp_onclick_submit_'를 찾습니다. 그런다음 해당 태그에 대해 css에서 사용할 id 또는 class를 지정해 줍니다. 간단히는 여기까지만 해도 HTML 수정은.. 더보기
블로그 꾸미기 4일차 또 뒤엎고 있네요.. 티스토리 블로그 최적화 폰트를 찾아서 티스토리 스킨에 빠져서 며칠째 잠도 못자고 몸이 영 아니네요. 한번 손대기 시작하니 왜 이리 무너지는지... 허허... 진짜 이걸 왜 시작 해가지고 내가 이러나 자괴감이 들고... ㅋ 오늘이 벌써 스킨 수정 4일차 되어가네요. 폰트를 며칠전에 바꿨는데 무슨 바람이 불었는지 오늘 또 뒤집었습니다. 구글 Pan-CJK 글꼴이 맘에 들어서 이녀석으로 샤샥~ 교체 했죠. 약간 굵으면서도 가독성이 좋아서 맘에 듭니다. 당분간 이녀석으로 쭉 써야겠어요. 구글 Pan-CJK 글꼴 이 폰트는 구글이 어도비와 협력해서 만든 한중일 언어를 모두 지원하는 글꼴이에요. 링크를 가보시면 자세한 소개와 다운로드를 받을 수 있습니다. 더보기
티스토리 그래프 옮기기 삽질중 스킨 바꾸는거 너무 재밌어요. 티스토리 스킨에 손댄지 3일차 들어갑니다. 지금 새벽 2시가 넘어가고 있는데 아직도 잠을 못 자고 글을 적고 있네요. 이거 하나만 하고 자야지~ 하면서 10분만 더 하던게 벌써 잠 잘시간을 훌쩍 넘겨버렸네요. 내일 출근해야 하는데 뭐 하는건지... 내일 헤롱 댈것이 뻔한데, 그런데도 하나에 꽂히면 정신을 못 차리고 이러고 있네요. 이거 고쳐야 하는데 정말 안 돼요. 어쨌거나 잠시 전까지 안 돼서 삽질하던 녀석은 _StatisticsGraph_라는 치환자 입니다. 이 녀석은 일별 방문자 수를 그래프로 보여주는 녀석인데요. 이 녀석을 쓰는 문제는 일도 아닌데, 표시를 하는게 문제에요. css에 대한 이해가 없다 보니 내가 원하는 위치에 놓기가 어렵더라고요. 이리 저리 몇번인가 .. 더보기

티스토리툴바