잉고래의 잇다이어리

CSS 구문구성 지난 'CSS가 없던 시절의 문제' 글에 이어서 이번 글에서는 CSS가 어떻게 구성이 되는지 알아보자. CSS의 규칙은 선택자(Selector)와 선언 블록(declaration block)으로 구성된다.첫번째 선택자는 HTML의 나 태그 같은 스타일을 지정할 HTML 태그나 클래스, ID 등을 가리킨다. 두번째 선언블록은 하나 이상의 선언들 모음을 말하는데, 블록 안의 각 선언들은 세미콜론(;)으로 끝마치거나 구분되고 시작과 끝은 중괄호({ })로 둘러싸여진다. 그럼 이제 선언 블록 안의 각각의 선언들은 어떻게 구성이 되어지는지 알아야 할 것이다. 개별적인 선언(declaration)은 속성(Property)과 값(Value)으로 구성된다. 속성이란건 어떤 요소에 대한 속성을 말한다. ..

CSS란 무엇인가? CSS는 Cascading Style Sheets의 약자이다. 한글로 하면 '계단식 양식 문서들' 이란 어색한 해석이 된다. 왜 이런 이름이 지어 졌는지 궁금하면 지난 포스팅 글인 'CSS는 왜 Cascading Style Sheet일까?'를 참고하도록 하자. CSS는 다음의 특징들을 갖는다. CSS는 HTML 요소를 화면, 종이 또는 다른 매체에 표시하는 방법을 설명한다. CSS는 많은 작업을 저장하여, 한 번에 여러 웹 페이지의 레이아웃을 제어 할 수 있다. HTML 내부에 삽입된 CSS가 아닌 외부 스타일 시트는 CSS 파일에 저장된다. CSS를 어디에 쓰지? CSS는 디자인, 레이아웃 및 다양한 장치 및 화면 크기에 대한 디스플레이의 변형을 포함하여 웹 페이지의 스타일(양식)을..

티스토리 스킨 변경하는데 뭐가 이리 어려운지. 모르는게 너무 많다. 일단 css를 제대로 알아야 겠다는 생각이 들어서 처음부터 공부해 보기로 맘 먹었다. 막상 시작 지점으로 와서 보니 내가 css란 용어도 잘 몰랐구나 하고 깨닫게 된다. css란게 cascading style sheets의 약자인데, 한글로는 폭포식, 계단식 스타일 시트 이런식으로 번역 된다. 처음 단어부터 잘 와닿지 않는 뜬금없는 폭포식, 계단식이란 용어 때문에 왜 이런 명칭이 붙게 되었을까?하고 의구심이 든다. 여기에는 사연(?)이 당연히 있다. html의 계층적 구조에는 각각의 태그들이 존재한다. 이런 태그들을 꾸미는 것이 스타일이고 이렇게 꾸며진 각 태그마다의 스타일은 상위에서 하위로 상속이 되면서 각 스타일들이 누적되어지면서 가..

아직도 멈추지 않고 티스토리 블로그 스킨을 변경 중이다. 티스토리 블로그의 경우 네이버 블로그나 다음 블로그 보다 스킨에 대한 자유도가 훨씬 높다. 이 부분이 내가 티스토리를 선택한 주된 이유인데, 내가 맘대로 바꿀수 있다는게 너무 좋다. 물론 완전한 자유도를 느끼려면 블로그를 운영할 서버를 임대하거나 그도아니면 직접 운영해야 하지만 난 그럴정돈 아닌지라. 내게 티스토리는 최선의 선택이라 본다. 그런데 요즘은 자꾸 욕심이 부쩍 생긴다. 이미 잘 만들어진 반응형 웹스킨을 가져다 쓰면 될 것을 무엇하러 하나씩 배워가며 스킨을 바꾸고 있나 싶어지는거다. 예를들면 이런거다 난 열심히 자동차를 만들어서 타고 다닐려고 하는데, 눈 앞에 훨씬 멋지고 좋은 스포츠카가 공짜로 제공되는 느낌? 난 왜 차를 만들고 있는거지..

WAI-ARIA의 초간단 분석 티스토리 관리자 페이지에서 제공하는 반응형 웹 스킨의 코드를 보다가 role이란 속성을 발견했습니다. 이게 뭐지?? 하고 간단히 찾아봤는데, 전혀~ 이해가 안 되는거에요. 한참 보다가 나름 이런게 아닐까 싶어서 영상으로 정리해봤습니다. 근데 찍어놓은거 보니 정말 오글거리네요. 말은 왜이리 떠듬이는겨~ ㅋㅋㅋㅋㅋㅋㅋㅋㅋ WAI ARIA의 이해 웹 콘텐츠를 제작할 때 장애인을 위한 접근방법을 정의하는 것을 ARIA(Accessible Rich Internet Applications)라고 합니다. 그 중에서 role의 경우는 해당 영역이 콘텐츠 영역인지 배너 영역인지, 검색영역인지 등을 정의하여 해당 요소들을 스크린 리더가 인식하기 쉽게 만듭니다. ARIA 관련 추천 링크 정말 ..

티스토리 댓글 버튼 스킨 바꾸기 티스토리 블로그 스킨을 변경하기 시작한지 오늘로 9일인지, 10일인지 되네요. 시작하기 전에는 지루하고 힘든 작업이 될거라 생각했었는데, 막상 해보니 생각보다 재밌네요. 하나 하나 바꿔나가는 과정을 보고 있노라니 나름 화초 키우는 기분입니다. 오늘은 댓글 입력창 옆에 있는 '입력버튼' 모양을 바꿔봤습니다. 예전에 이미지 버튼으로 만들어서 넣었는데 지금보니 가독성도 떨어지고 이걸 왜 해놨지 싶더라고요. 댓글 버튼 치환자 스킨 바꾸는 과정은 그리 어렵지 않습니다. 관리자 모드의 html 코드에서 치환자 '_rp_onclick_submit_'를 찾습니다. 그런다음 해당 태그에 대해 css에서 사용할 id 또는 class를 지정해 줍니다. 간단히는 여기까지만 해도 HTML 수정은..