Amazing Story

9. 플로트(Float)(1) 플로트의 개념- 플로트는 블록, 인라인 요소를 좌우 정렬한다.(기준은 부모요소를 기준으로)- 플로트가 적용되면 자신의 자리를 다음에 오는 블록요소에게 내어준다.- 플로트요소는 플로트요소끼리만 정렬하며 일반요소와는 정렬하지 않음- 예시) float: left; (2) 플로트와 일반요소가 함께 있는 경우■ 작성법- float에 적용하는 값은 left, right- 플로트 적용시 자신이 있는 위치에서 부모요소를 기준으로 왼쪽 또는 오른쪽 정렬을 한다.- 자신의 자리를 다음 요소에게 내어줌. 다음에 오는 요소는 플로트 요소 아래에 배치됨 ■ 예시1 123456789101112131415161718192021222324252627282930313233343536Float *{marg..

8. z-index- 포지션을 적용한 요소는 z-index(레이어개념)를 사용할 수 있음- z-index 미적용시 가장 마지막에 작성한 요소가 가장 상위에 배치됨- z-index는 0을 기준으로 음수 양수 입력이 가능하며 수치값이 높을 수록 상위에 배치- 일반적인 z-index입력수치는 양수값을 기준으로 작성- 계층구조에서 z-index는 상위요소의 z-index에 종속됨. 즉 상위요소의 z-index보다 수치가 높더라도 상위요소의 z-index보다 우선하지 않음 ■ 예시 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162z-index *{margin..

7. 포지션이란- 요소를 화면에 배치하기 위한 기법으로 기준점을 이용하여 요소를 특정 위치에 배치하는 방법- 기준점 및 배치방법에 따라 절대포지션, 상대포지션, 고정포지션 세가지 방법을 사용(1) Position 종류- Absolute Position(브라우저 또는 상위요소를 기준으로 배치하는 방법)- Relative Position(자기자신을 기준으로 배치하는 방법)- Fixed Position(스크린을 기준으로 배치하는 방법) (2) Position사용시 기준좌표 입력방법- 포지션 적용시 기준이 되는 요소의 Edge중(이때 Edge는 top, right, bottom, left)로부터 자기자신의 Edge까지의 거리값을 입력(3) Position 요소 z-index- 포지션을 적용한 요소는 포토샵의 레..

6. 디스플레이- 브라우저가 요소를 화면에 나타내는 방법을 제어하는 속성으로 block, inline, inline-block 등이 있다. (1) Block 요소- 블록요소는 줄바꿈이 되어 표현됨- 블록요소의 가로크기는 부모요소만큼 적용- 블록요소의 높이는 콘텐츠 크기만큼 적용- 블록요소에 width값을 적용하여 부모요소의 가로 크기보다 작더라도 가로전체는 해당요소의 영역으로 유지- 블록요소는 마진과 패딩을 적용할 수 있고 다른 블록요소에 영향을 줌 ■ 예시1 123456789101112131415161718192021디스플레이 속성 .box{border: 10px solid #000;} .box p{border: 3px solid #f00;} .box .b1{width: 500px;} .box .b2{..

(8) text-align- 인라인 요소의 가로정렬을 표시- 인라인 요소는 텍스트, 이미지, 폼요소- 스타일은 인라인 요소를 감싸는 "블록" 요소에 작성- 사용하는 값은 left, center, right, justify를 사용한다. ■ 예시1 12345678910111213141516171819202122232425262728text 스타일 *{margin:0; padding: 0;} .align{border:2px solid #333;} .right{text-align: right;} .center{text-align: center;} .justify{text-align: justify;} text-align 왼쪽 오른쪽 가운데 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌..

5. 타이포그래피(Typhography)- 글자와 문단의 속성을 제어하며 다음과 같은 스타일을 사용한다(1) 스타일 종류 1) 글자가. font-family나. font-size다. line-height라. font-weight마. font-style바. font-variant 2) 문단가. text-align(인라인 요소의 가로정렬 셋팅)나. text-indent(들여쓰기)다. text-decoration(글자장식 밑줄)라. text-transform(대문자 소문자)마. vertical-align(인라인 요소의 수직위치 정렬)바. letter-spacing(자간)사. word-spacing(단어와 단어사이)아. white-space(공백문자처리)자. word-break(줄바꿈처리) (참고)상속이란- 부..

(7) 배경(background)- 배경속성은 마진영역을 제외한 박스영역에 설정할 수 있고 다음과 같은 속성이 있음 (요약) 배경속성의 종류가. background-color나. background-image다. background-repeat라. background-position마. background-attachment바. background-size ※ 예제를 시작하기 전에 준비물을 알려드리려고 합니다. 저는 설명을 위해 20px*20px의 하트 이미지를 사용했어요. 크기는 상관없고, 실습용 이미지를 준비해주세요^^ 가. background-color- 모든박스의 배경색은 투명이며, 폼요소는 배경색이 미리 지정되어 있음- 요소를 투명하게 만들려면, background-color: transpare..

(6) 박스모델 정리 1) width - 입력한 크기만큼만 적용됨- 부모요소의 width값을 그대로 사용2) 배경색 : 콘텐츠 영역(width, height) + padding + 테두리※ margin, padding, border를 각 크기를 주지 않을 경우에는 배경색을 주었을 때, 모두를 포함해서 배경색으로 나타납니다. ■ 예시1 1234567891011121314151617박스모델 정리 *{margin:0; padding:0;} .test1{background-color:#f00;} .test2{background-color:#0f0; width:300px;} width 콘텐츠 width값 입력한 경우 ■ 실행결과1 3) 자식요소는 부모요소의 width값을 사용함. 상속받음. 4) 자식의 넓이가 부..

(5) 패딩(padding)과 마진(margin) 1) padding- 테두리와 콘텐츠 사이의 여백을 표현- 패딩은 top, right, bottom, left 네방향을 설정 2) margin- 테두리 바깥쪽 여백을 표현- 요소와 요소사이의 여백을 표현- 마진은 top, right, bottom, left 네방향을 설정 3)마진과 패딩은 작성법이 동일 margin:10px; → 모든방향이 마진 10px; margin:10px 20px; → 상하, 좌우 동일 margin:10px 20px 30px; → 상, 좌우, 하 margin:10px 20px 30px 40px; → 상, 우, 하, 좌 margin-top: margin-right: margin-bottom: margin-left: ■ 예시1 12345..

(4) border(테두리)란- 테두리 표현시 동서남북 네방향을 설정할 수 있으며 다음과 같은 값을 설정할 수 있다1) 선의 두께 : border-width2) 선의 종류 : border-style3) 선의 색상 : border-color (참고1)테두리 설정방향은 4방향 : top, right, bottom, left 작성1) 방향이 지정되지 않은 경우border : width style color; 작성2) 방향이 지정된 경우border-방향 : width style color; (참고2)선의 종류- solid(실선)- dotted(점선)- dashed(간격이 좁고 그려지는 라인이 긴 형태) (참고3) border를 없애는 경우- border: none;- border : 0 none; (→ 권장) ..