css (11) 썸네일형 리스트형 CSS 기초강좌 16 (Position) [ position 및 relative,absolute,fixed,static 이해하기 ] 우리가 레이아웃을 만들때는 보통 CSS의 세가지 속성을 많이 사용합니다. display, position, float 입니다. 이 세가지는 무척 중요하고 까다롭기도 합니다. 만약 위의 3가지를 정확히 이해하신다면 웹페이지의 Layout을 구성하는 것이 상당히 수월해지지 아닐까 생각합니다. 물론 저는 아직 초보라서 위의 세가지를 정확히 이해하지 못합니다. 다만 제가 아는 범위에서만 포스팅 하려고 합니다. 그럼 이전에 연재했던 display에 이어 position에 대해 알아보기로 하겠습니다. Position 이 속성에는 여러가지 적용값이 있지만 가장 많이 사용하는 4가지만 알아보겠습니다. static, relativ.. 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 기초강좌 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 다음
