디자인/CSS 강좌 (20) 썸네일형 리스트형 CSS 기초강좌 15 (display:block display:inline) CSS display:block display:inline CSS에서 Display는 문자그대로 유저에게 "보여주는" 속성입니다. 보여줄때 어떻게 보여주느냐에 따라 몇가지의 값을 갖습니다. block, inline, inline-block, none, table,.. 이죠. 1. none 그냥 보여주지 않는 것이죠. (ex; display:none) 이 속성값은 원래 보여져야할 부분이 차지하고 있던 영역까지 없애버립니다. 이에비해 visibility라는 CSS 속성이 있는데 visibility:hidden 라고 코딩하면 보이지 않게 감춰버린 요소의 자리가 여전히 남아 있는 상태로 보여집니다. 예제1 여기는 첫행입니다 Visibility 로 감춰집니다 바로 위에는 Visibility 속성으로 줄이 없어졌는.. CSS 기초강좌 14 (CSS로 Menu 만들기) CSS 메뉴 만들기 오늘은 그동안 배운 CSS만 이용해서 매우 간단한 메뉴를 만들어 보죠. HTML 태그중에서 div와 a태그만 이용해서 만듭니다. 구조는 아래와 같습니다. 구조 =>메뉴바 부분 중앙정렬 Home 회사소개 주요제품 포트폴리오 Contact 특별한 내용은 없죠. 위의 코드중에서 그동안 배우지 않았던 것은 div #menubar1 > a {...} 바로 이부분의 ">"입니다. 위의 코드중에서 ">"의 의미는 div태그 중에서 id가 menubar1인 것을 찾은후 와 블럭 안에 있는 모든 a태그를 선택하라는 것입니다. (div가 부모이고 여러 자식중에서 a라는 자식만 골라서 일을 시키는 태그입니다.) 아래는 CSS로 스타일링한 예제 입니다. 메뉴 만들기 Home 회사소개 주요제품 포트폴리오 C.. CSS 기초강좌 13 (Border) CSS Border Border 속성은 말 그대로 content주변을 감싸는 경계선이다. Border 속성은 border-style(실선,점선,이중실선 등..) 속성값이 없으면 다른 속성값을 줘도 아무런 효과가 없습니다. Code p {border-style: none;}p {border-style: solid;}p {border-style: dashed;}p {border-style: dotted;}p {border-style: double;}p {border-style: ridge;}p {border-style: inset;}p {border-style: outset;}p {border-style: groove;}p {border-style: hidden;} 결과 None solid dashed do.. CSS 기초강좌 12 (Padding) CSS Padding padding은 내용과 border(경계선)사이의 공백을 설정할때 사용한다. padding 여기는 내용 padding은 상하좌우 따로 값을 줄 수 있다. padding의 상하좌우 값을 주는 문법은 이전 강좌의 margin과 동일하다. 예제1 div { padding-top: 100px; padding-bottom: 70px; padding-right: 150px; padding-left: 50px; } 예제2 div {padding:100px 150px 70px 50px;} 결과 결과보기 padding값을:100px 150px 70px 50px 늘리는 것입니다. Van-xy. 이전 Margin강좌보기 2014/09/19 - [강좌/CSS 강좌] - CSS 기초강좌 11 (Margin.. 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.. 이전 1 2 3 4 다음
