CSS 썸네일형 리스트형 css list 속성 이해 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 - 클.. 더보기 최신 표준 HTML+CSS 디자인 책 서평 블로그 스킨 디자인을 변경하는데 괜찮은 가이드 라인을 제시하는 책이다. 일단 친절하고 자세하다. CSS, HTML의 해당 코드가 무엇을 뜻하는지 한 라인씩 자세히 설명하는 스타일이라서 어느정도 기초지식만으로도 읽는데 전혀 무리가 없었다. 대신 이러한 친절함은 나중에 단점이 된다. 글을 어느정도 읽어서 중간 정도 지나가게되면 같은 내용이 반복되기 때문에 좀 아니 많이 지루해진다. 중반 이후로는 같은 내용에 대해서 복붙(복사와 붙여넣기)이다. 앞 부분을 이해했다면 그냥 건너뛰기를 추천한다. 정작 중요한 부분은 마지막 부분들이 아닐까 싶다. 앞서나왔던 HTML, CSS의 각각의 이론들을 묶어서 정리해 놓았는데. 요점만 간추려서 잘 정리해놓았다. 자주 써먹는 정보들은 메모해서 완전히 습득하면 좋다. 블로그 스킨.. 더보기 블로그에 CSS 아이콘 쓰기 CSS 아이콘 블로그 글에 아이콘을 넣으면 참 글이 있어보입니다. css로 간단하게 아이콘을 추가하고 쓰는 방법입니다. 참고로 이 글은 w3schools의 원문을 번역한 것입니다. css를 공부하신다면 추천하는 곳입니다. 꼭 들러보세요. 웹페이지에 아이콘을 추가하는 방법 HTML 페이지에 아이콘을 추가하는 가장 간단한 방법은 Font Awesome과 같은 아이콘 라이브러리를 사용하는 것입니다. 지정된 아이콘 클래스의 이름을 인라인 HTML 요소 (예 : 또는 )로 추가하십시오. 아이콘 라이브러리에있는 모든 아이콘은 CSS (크기, 색상, 그림자 등)로 사용자 정의 할 수있는 확장 가능한 벡터입니다. 벡터는 크기를 아무리 늘려도 이미지가 깨지거나 하지 않죠~ Font Awesome Icon Font Awe.. 더보기 css font 속성 css 폰트 속성에 대해 함께 공부해 봅시다. css font 속성은 폰트 패밀리, 굵기, 사이즈, 텍스트 스타일을 정의하는데 사용합니다. 한 마디로 폰트 꾸미는데 사용하는 속성이죠. css에는 2가지 폰트 패밀리가 있는데요, 비슷한 모양의 폰트 패밀리들을 묶은 generic family와 특정 폰트 패밀리를 뜻하는 걍~ font family 입니다. generic family에는 serif, sans-serif, monospace 가 있어요. 궁서체 처럼 끝이 휘어지는 모양의 글자 폰트가 세리프, 세리프가 없는건 산세리프, 글자 간격이 동일한게 모노스페이스로 알면 됩니다. 자 이제 폰트패밀리를 알았으니 이걸 적용해야 할텐데요. 텍스트의 폰트 패밀리를 설정하는 css 속성은 font-family 속성입니.. 더보기 css text 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 속성 값이 있는데요. 요건 저스트란 말처럼 줄의 폭에 맞춰.. 더보기 css outline 속성 강좌 outline 속성 outline은 한글로 하면 윤곽선, 외곽선인데요. css에서 outline 속성은 요소 바깥 외곽선의 스타일, 색상, 폭을 정할때 사용합니다. 이 말이 무슨말이냐면 요소를 "눈에 띄게" 만들기 위해 테두리 주위에 그려진 선이 바로 윤곽선입니다. 요소(element)를 도드라져 보이게 만드는거죠.어떻게 보면 border 속성하고 비슷해 보이기도 하지만 border 속성과 다른 큰 특징을 갖습니다. 바로 요소의 일부가 아니라는 점입니다. 이 말은 outline의 폭을 조절해도 요소의 전체 크기에 영향을 주지 않습니다. 또 outline의 폭이 요소 바깥으로 넘어갈 수도 있다는 뜻이죠. 하지만 border는 해당 속성의 너비와 높이가 요소 전체 크기에 포함을 주어 영향을 줍니다. outl.. 더보기 box model의 이해 css의 box model이란 css에서 모든 요소(=엘리먼트, element)들은 박스들로 간주됩니다. 그래서 css에서 디자인과 레이아웃에 대해 이야기할 때에 주로 "박스모델(box model)"이란 용어를 자주 사용하죠. 이 박스모델은 모든 각각의 html 요소들을 감싸는 하나의 박스를 지칭합니다. 이 박스는 여백(margin), 테두리(border), 패딩(padding)과 실제 내용(content)로 구성이 되고요. box model의 각 요소 content - 텍스트 및 이미지가 나타나는 내용 영역입니다. padding - content 주위의 영역을 투명하게 분리합니다. 패딩을 조절해서 내용이 너무 답답해 보이지 않도록 할때도 사용하죠. border - 패딩과 content 주위를 둘러싸는 .. 더보기 이전 1 2 3 다음
