잉고래의 잇다이어리

css의 list 속성은 html의 리스트 태그를 꾸밀 때 사용합니다.html의 리스트 태그로는 순서가 없는 목록을 나타내는 <ul>태그와 순서가 있는 목록을 나타내는 <ol> 태그가 있죠. css의 list 속성을 사용하면 item marker라고 하는 리스트 아이템의 맨 앞에 나오는 모양을 변경하거나 이미지를 넣고 배경 색상을 변경하는게 가능합니다. 각각에 대해 살펴봅시다.1. list-style-type ..

css의 link 속성을 사용하면 다음 예제와 같이 나만의 링크 버튼을 만들 수 있습니다.  링크 스타일1 링크 스타일2 링크 스타일3 링크 스타일4 링크는 HTML의 a 태그에 css 속성을 적용해서 커스마이징 할 수 있는데요. a태그에 color, font-family, background 같은 여러가지 css 속성들을 조합하면 됩니다.  a { background:black; color:white; ..

블로그 스킨 디자인을 변경하는데 괜찮은 가이드 라인을 제시하는 책이다. 일단 친절하고 자세하다. CSS, HTML의 해당 코드가 무엇을 뜻하는지 한 라인씩 자세히 설명하는 스타일이라서 어느정도 기초지식만으로도 읽는데 전혀 무리가 없었다. 대신 이러한 친절함은 나중에 단점이 된다. 글을 어느정도 읽어서 중간 정도 지나가게되면 같은 내용이 반복되기 때문에 좀 아니 많이 지루해진다. 중반 이후로는 같은 내용에 대해서 복붙(복사..

CSS 아이콘 블로그 글에 아이콘을 넣으면 참 글이 있어보입니다. css로 간단하게 아이콘을 추가하고 쓰는 방법입니다. 참고로 이 글은 w3schools의 원문을 번역한 것입니다. css를 공부하신다면 추천하는 곳입니다. 꼭 들러보세요.  웹페이지에 아이콘을 추가하는 방법 HTML 페이지에 아이콘을 추가하는 가장 간단한 방법은 Font Awesome과 같은 아이콘 라이브러리를 사용하는 것입니다. 지정된 아이콘 클래스의 이름을 인라인 HTM..

css 폰트 속성에 대해 함께 공부해 봅시다. css font 속성은 폰트 패밀리, 굵기, 사이즈,  텍스트 스타일을 정의하는데 사용합니다. 한 마디로 폰트 꾸미는데 사용하는 속성이죠.  css에는 2가지 폰트 패밀리가 있는데요, 비슷한 모양의 폰트 패밀리들을 묶은 generic family와 특정 폰트 패밀리를 뜻하는 걍~ font family 입니다.  generic family에는 serif, sans-serif..

color 속성은 텍스트 색상을 설정할 때 사용합니다. 이전에도 말했지만 색상을 지정하는데는 이름, hex, rgb의 3가지 방법이 있다고 했습니다. 가령 이런 식이죠. color: blue; 혹은 color: #0000ff; 혹은 color: rgb(0, 0, 255); 입니다. 텍스트 정렬을 하는 방법은 text-align 속성을 사용하면 됩니다. 이 속성은 수평 방향 정렬을 위해 사용되죠. 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬으로 말..

outline 속성 outline은 한글로 하면 윤곽선, 외곽선인데요. css에서 outline 속성은 요소 바깥 외곽선의 스타일, 색상, 폭을 정할때 사용합니다. 이 말이 무슨말이냐면 요소를 "눈에 띄게" 만들기 위해 테두리 주위에 그려진 선이 바로 윤곽선입니다. 요소(element)를 도드라져 보이게 만드는거죠.어떻게 보면 border 속성하고 비슷해 보이기도 하지만 border 속성과 다른 큰 특징을 갖습니다. 바로 요소의 일부가 아니라는 ..

css의 box model이란 css에서 모든 요소(=엘리먼트, element)들은 박스들로 간주됩니다. 그래서 css에서 디자인과 레이아웃에 대해 이야기할 때에 주로 "박스모델(box model)"이란 용어를 자주 사용하죠. 이 박스모델은 모든 각각의 html 요소들을 감싸는 하나의 박스를 지칭합니다. 이 박스는 여백(margin), 테두리(border), 패딩(padding)과 실제 내용(content)로 구성이..

css tutorial : order of margin face The order of the margin property of css is top, right, bottom, left. Same as clockwise. In the following css example, the margin for each direction would be 1px up, 2px right, 3px down, 4px left. ..

요소의 높이, 너비 설정 height와 width 속성은 요소(Element)의 높이 및 너비를 설정하는데 사용됩니다. 높이와 너비는 auto나 px, cm 등의 길이 값 또는 포함된 블록의 백분율(%)로 지정합니다. (auto : 브라우저가 높이와 너비를 계산한다는 의미) 여기서 주의할 점은 height 및 width 속성에는 padding, border 또는 margin의 길이가 포함되지 않습니다. 즉 width, he..

css padding CSS 패딩 속성은 내용 주위에 공간을 생성하는데 사용됩니다. 요소의 각면(위쪽, 오른쪽, 아래쪽 및 왼쪽)에 대해 패딩을 설정하기 위한 다양한 CSS 속성들이 있습니다. 각면에 대한 패딩 설정 CSS에는 요소의 각면에 대해 패딩을 지정하는 속성이 있습니다. padding-top padding-right padding-bottom ..

CSS 여백 속성 CSS margin 속성은 요소(element) 주위에 공간을 생성하는데 사용됩니다. margin 속성은 테두리 외부의 margin 즉 여백 크기를 설정합니다. 요소의 각면 (위, 오른쪽, 아래 및 왼쪽)의 여백을 설정하기위한 CSS 속성이 있습니다. 다음과 같이 margin 뒤에 각면의 이름을 붙이면 됩니다. margin-top margin-right margi..

css 테두리 속성들 css의 border 속성을 사용하면 요소(element) 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다. 지난 css 문법을 다시한번 복습하면 css 구문은 선택자(selector)와 선언블록으로 구성되고 각 선언블록은 속성(property)과 값(value)로 구성된다고 하였습니다. 다시말해 border란 속성은 선택자의 테두리 모양을 지정합니다. border-style 속성 border-style 속성은 4면의..

css background 속성 CSS의 배경 속성은 요소(element)의 배경 효과를 정의하는데 사용됩니다. 예를들면 div 태그에 background-image 속성을 적용하면 글의 배경으로 이미지를 표시할 수 있습니다. 이러한 배경 속성에는 다음과 같은 것들이 있습니다. background-color : 배경색 background-image : 배경 이미지 backgrou..

CSS의 색상지정 방법을 알아보자 시작 전에 참고로 이 글은 이전 CSS 학습 글에 이어진다. 이전 글은 학습목차를 참조하도록 하자. 다시 돌아와서 CSS 요소의 색상을 변경하고자 하는 경우, 색상 지정 방법에는 3가지가 있다. 미리 정해진 color의 이름을 속성 값으로 넣거나 RGB 혹은 16진수 값을 속성 값으로 입력하는 것이다. color 이름 - 예) "red" ..

CSS를 쓰는 3가지 사용법 브라우저는 CSS 즉 스타일 시트를 읽으면 스타일 시트의 정보에 따라 HTML 문서의 서식을 지정한다. 쉽게 말해 스타일에 따라 HTML을 예쁘게 꾸며주는거다. 그러려면 HTML에 스타일을 넣어줘야 하는데, 넣는 곳에 따라서 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 이렇게 3가지 방법이 있다. 스타일 시트를 HTML에 삽입하는 세 가지 방법을 알아보자. 참고로 이 포스팅은 CSS에 대한 지난 글에 이어..

CSS 선택자의 다양한 모습들 다시한번 복습하자면 CSS에서 선택자는 스타일을 적용 할 요소를 선택하는 데 사용되는 패턴이다. 지난 '기본적인 CSS 선택자 3가지' 글에서, 선택자는 요소 이름(Element Name), ID, 클래스(Class)와 같은 3가지 기본적 요소들로 선택될 수 있다고 하였다. 하지만 이 외에도 정말 다양한 선택자 정보들로 요소들을 선택 할 수 있는데, 이번 시간에는 그것들이 뭔지 알아보자. 참고로 선택자는 지원하는 C..

CSS Selector 지난번에는 CSS의 구문 구성을 알아보았다. 다시 복습하면 CSS 문법은 선택자(Selector)와 선언 블록(declaration block)으로 구성됨을 기억하자. 이번 시간에는 선택자에 대해 좀 더 자세히 알아보고자 한다. CSS 선택자(Selector)는 HTML 요소(Element)를 요소 이름(element name), ID, 클래스(class), 속성(attribute) 등에 따라 찾거나 선택하는데 사용된다. 각각..

CSS 구문구성 지난 'CSS가 없던 시절의 문제' 글에 이어서 이번 글에서는 CSS가 어떻게 구성이 되는지 알아보자. CSS의 규칙은 선택자(Selector)와 선언 블록(declaration block)으로 구성된다.첫번째 선택자는 HTML의 <DIV>나 <P>태그 같은 스타일을 지정할 HTML 태그나 클래스, ID 등을 가리킨다. 두번째 선언블록은 하나 이상의 선언들 모음을 말하는데, 블록 안의..

CSS란 무엇인가? CSS는 Cascading Style Sheets의 약자이다. 한글로 하면 '계단식 양식 문서들' 이란 어색한 해석이 된다. 왜 이런 이름이 지어 졌는지 궁금하면 지난 포스팅 글인 'CSS는 왜 Cascading Style Sheet일까?'를 참고하도록 하자. CSS는 다음의 특징들을 갖는다. CSS는 HTML 요소를 화면, 종이 또는 다른 매체에 표시하는 방법을 설명한다. CSS는 많은 작업을 저장하여, 한 번에 여..

티스토리 스킨 변경하는데 뭐가 이리 어려운지. 모르는게 너무 많다. 일단 css를 제대로 알아야 겠다는 생각이 들어서 처음부터 공부해 보기로 맘 먹었다. 막상 시작 지점으로 와서 보니 내가 css란 용어도 잘 몰랐구나 하고 깨닫게 된다. css란게 cascading style sheets의 약자인데, 한글로는 폭포식, 계단식 스타일 시트 이런식으로 번역 된다. 처음 단어부터 잘 와닿지 않는 뜬금없는 폭포식, 계단식이란 용어 때문에 왜 이런 명칭이 ..

티스토리 댓글 버튼 스킨 바꾸기 티스토리 블로그 스킨을 변경하기 시작한지 오늘로 9일인지, 10일인지 되네요. 시작하기 전에는 지루하고 힘든 작업이 될거라 생각했었는데, 막상 해보니 생각보다 재밌네요. 하나 하나 바꿔나가는 과정을 보고 있노라니 나름 화초 키우는 기분입니다. 오늘은 댓글 입력창 옆에 있는 '입력버튼' 모양을 바꿔봤습니다. 예전에 이미지 버튼으로 만들어서 넣었는데 지금보니 가독성도 떨어지고 이걸 왜 해놨지 싶더라고요. ..