본문 바로가기
반응형

분류 전체보기

 (493)
CSS 기초강좌 11 (Margin) CSS margin (속성) CSS에서 margin은 태그주변의 공간을 조절하기 위한 속성이다. Margin Margin은 border(경계선) 바깥쪽에 투명한 여백의 크기를 조절하는데 사용한다. margin을 일정크기로 설정하면 그영역은 투명한 공간이 차지하게 된다. margin은 상하좌우 모두 따로 설정할 수 있다. 예를들면, 아래와 같다. 예제 1 p { margin-top: 100px; margin-bottom: 70px; margin-right: 150px; margin-left: 50px; } 예제 2 p {margin:100px 150px 70px 50px;} 위의 2개의 예제는 결과 똑 같습니다. 위쪽으로 100px 띄고 오른쪽으로 150px 띄고 아래쪽으로 70px 띄고 왼쪽으로 50px..
CSS 기초강좌 10 (Box Model) BoxModel CSS에서의 모든 요소는 하나의 박스(box)로 생각해 볼 수 있습니다. Boxmodel 이라는 말은 주로 layout이나 디자인 할때 주로 고려됩니다.. CSS에서 Boxmodel은 어떤 HTML 요소로 감싸진 하나의 박스를 말합니다. (ex, ..) 그 HTML 요소는 margin, border, padding 과 내용(content)으로 구성됩니다. 이러한 Boxmodel은 HTML요소 주변에 선을 그을 수도 있고 공간이나 여백을 채워넣을 수가 있어서 우리가 웹페이지를 디자인 할때 도움을 줍니다. 아래 이미지는 Boxmodel을 그림으로 표현한 것입니다. Margin - 경계선(border) 바깥쪽에 여백을 줄때 사용합니다. Border - 경계선입니다. Padding - 경계선(b..
날개 합성하기 [날개 이미지 소스 PSD] deviantART를 둘러보다가 날개 이미지 소스가 훌륭한 것을 발견했습니다. 그냥 날개 이미지가 좋아서 갖다 붙이기만 해도 괜찮게 합성이 되네요. 판타지한 작품에 쓰면 괜찮을 것 같습니다. 김태희 사진에다 날개를 붙여보았는데 실력이 없어서 그런지 좀 어색합니다. 아래의 링크에 날개이미지를 다운 받을 수 있는 주소를 링크했으니 참고하세요. [Angelwings by nightgraue] 날개소스 다운로드 하러 가기
CSS 기초강좌 9 (Table) CSS Tables Border 이 속성은 테이블의 경계선을 지정하기 위해 사용합니다. 아래의 예제는 테이블의 th(제목줄), td 엘리먼트를 검정색 1픽셀로 지정한 것입니다. table, th, td {border:1px solid black;} Collapse Borders border-collapse 속성은 테이블의 셀사이의 여백을 없앨때 사용합니다. table {border-collapse:collapse;} table, th, td {border:1px solid black;} Width 와 Height 는 테이블의 넓이와 높이를 정합니다. text-align: 테이블 내의 문자들의 가로방향 정렬 (left, right, center) vertical-align: 테이블 내의 문자들을 상하방향으..
CSS 기초강좌 8 (Link) CSS Links Link는 CSS 속성으로 여러가지를 표현할 수 있습니다. (예를 들면, color, font-family, background,...) link는 아래의 4가지 형태로 각기 다르게 표현됩니다. a:link - 방문한적이 없는 보통의 링크 a:visited - 방문한적이 있는 링크 a:hover - 마우스를 올렸을때의 링크 a:active - 마우스로 클릭한 순간의 링크 a태그 뒤에 붙어있는 :visited나 :hover 등은 가상클래스라고 부르는 것인데, 자주 쓰이는 것은 위의 네가지 말고도 몇개가 더 있습니다. 여기서는 이런 것이 있다는 정도만 알고 넘어가도록 하겠습니다. 예제 a:link {color: #FF0000;} a:visited {color: #00FF00;} a:hove..
반응형

티스토리툴바