잉고래의 잇다이어리

css의 list 속성은 html의 리스트 태그를 꾸밀 때 사용합니다.html의 리스트 태그로는 순서가 없는 목록을 나타내는 태그와 순서가 있는 목록을 나타내는 태그가 있죠. css의 list 속성을 사용하면 item marker라고 하는 리스트 아이템의 맨 앞에 나오는 모양을 변경하거나 이미지를 넣고 배경 색상을 변경하는게 가능합니다. 각각에 대해 살펴봅시다.1. list-style-type : 이 속성은 리스트 아이템 마커의 타입을 지정할 때 사용합니다. 네모, 동그라미, 숫자, 알파벳 그런것들로 말이죠. 쓰는 법은 ul { list-style-type : circle }이런 식으로 쓰면 됩니다. 2. list-style-image : 이 속성은 리스트 아이템 마커로 이미지를 지정할 때 사용합니다. ..

css의 link 속성을 사용하면 다음 예제와 같이 나만의 링크 버튼을 만들 수 있습니다. 링크 스타일1 링크 스타일2 링크 스타일3 링크 스타일4 링크는 HTML의 a 태그에 css 속성을 적용해서 커스마이징 할 수 있는데요. a태그에 color, font-family, background 같은 여러가지 css 속성들을 조합하면 됩니다. a { background:black; color:white; } 하나씩 조합해 보는게 익숙해 졌다면 좀 더 나아가 링크의 상태에 따른 각각의 스타일을 지정할 수도 있습니다. 예를들어 마우스를 올렸을 때, 클릭을 했을 때 등으로 말이죠. a:link - 방문하지 않은 링크 a:visited - 방문한 링크 a:hover - 마우스를 올려놓았을 때 a:active - 클..

블로그 스킨 디자인을 변경하는데 괜찮은 가이드 라인을 제시하는 책이다. 일단 친절하고 자세하다. CSS, HTML의 해당 코드가 무엇을 뜻하는지 한 라인씩 자세히 설명하는 스타일이라서 어느정도 기초지식만으로도 읽는데 전혀 무리가 없었다. 대신 이러한 친절함은 나중에 단점이 된다. 글을 어느정도 읽어서 중간 정도 지나가게되면 같은 내용이 반복되기 때문에 좀 아니 많이 지루해진다. 중반 이후로는 같은 내용에 대해서 복붙(복사와 붙여넣기)이다. 앞 부분을 이해했다면 그냥 건너뛰기를 추천한다. 정작 중요한 부분은 마지막 부분들이 아닐까 싶다. 앞서나왔던 HTML, CSS의 각각의 이론들을 묶어서 정리해 놓았는데. 요점만 간추려서 잘 정리해놓았다. 자주 써먹는 정보들은 메모해서 완전히 습득하면 좋다. 블로그 스킨..

CSS 아이콘 블로그 글에 아이콘을 넣으면 참 글이 있어보입니다. css로 간단하게 아이콘을 추가하고 쓰는 방법입니다. 참고로 이 글은 w3schools의 원문을 번역한 것입니다. css를 공부하신다면 추천하는 곳입니다. 꼭 들러보세요. 웹페이지에 아이콘을 추가하는 방법 HTML 페이지에 아이콘을 추가하는 가장 간단한 방법은 Font Awesome과 같은 아이콘 라이브러리를 사용하는 것입니다. 지정된 아이콘 클래스의 이름을 인라인 HTML 요소 (예 : 또는 )로 추가하십시오. 아이콘 라이브러리에있는 모든 아이콘은 CSS (크기, 색상, 그림자 등)로 사용자 정의 할 수있는 확장 가능한 벡터입니다. 벡터는 크기를 아무리 늘려도 이미지가 깨지거나 하지 않죠~ Font Awesome Icon Font Awe..

css 폰트 속성에 대해 함께 공부해 봅시다. css font 속성은 폰트 패밀리, 굵기, 사이즈, 텍스트 스타일을 정의하는데 사용합니다. 한 마디로 폰트 꾸미는데 사용하는 속성이죠. css에는 2가지 폰트 패밀리가 있는데요, 비슷한 모양의 폰트 패밀리들을 묶은 generic family와 특정 폰트 패밀리를 뜻하는 걍~ font family 입니다. generic family에는 serif, sans-serif, monospace 가 있어요. 궁서체 처럼 끝이 휘어지는 모양의 글자 폰트가 세리프, 세리프가 없는건 산세리프, 글자 간격이 동일한게 모노스페이스로 알면 됩니다. 자 이제 폰트패밀리를 알았으니 이걸 적용해야 할텐데요. 텍스트의 폰트 패밀리를 설정하는 css 속성은 font-family 속성입니..

color 속성은 텍스트 색상을 설정할 때 사용합니다. 이전에도 말했지만 색상을 지정하는데는 이름, hex, rgb의 3가지 방법이 있다고 했습니다. 가령 이런 식이죠. color: blue; 혹은 color: #0000ff; 혹은 color: rgb(0, 0, 255); 입니다. 텍스트 정렬을 하는 방법은 text-align 속성을 사용하면 됩니다. 이 속성은 수평 방향 정렬을 위해 사용되죠. 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬으로 말이죠. 다음과 같이 사용합니다. text-align: left; 혹은 text-align: center; 혹은 text-align: right; 입니다. 참 쉽죠잉~ 그 밖에 justify란 text-align 속성 값이 있는데요. 요건 저스트란 말처럼 줄의 폭에 맞춰..