CSS 썸네일형 리스트형 11. 레이아웃 관련 스타일 2 배치 관련 스타일 position: 상대위치(relative)와 절대위치(absolute) .outer { position: relative; /*기준이라는 뜻*/ } 첫번째자식 두번째자식 세번째자식 position: 고정위치(fixed) .positioning { border: 1px solid black; } z-index : 요소들을 순서대로 위로 쌓는 속성 .outer { position: relative; } .z-test { border: 1px solid black; width: 150px; height: 100px; position: absolute; /* 내가 원하는 위치에 위치시킬라고 absolute 사용 */ } #z1 { background-color: yellow; top: 100.. 더보기 10. 레이아웃 관련 스타일 레이아웃 관련 스타일 width, height 기본적으로 내용을 차지하는 content 영역의 가로, 세로 길이 조절하는 스타일 속성 고정크기(px), 가변크기(%) 예시 .size_test { border: 10px solid red; } #test1 { width: 400px; height: 200px; /* 요소 자체의 크기는 컨텐츠 + 패딩 + 보더 */ } #test2 { width: 50%; height: 150px; } 50%를 줬을 때 화면의 50%보다 살짝 더 커진 느낌을 받을 수 있다 border의 크기 때문에 그렇다 content의 크기만을 보면 50%임을 알 수 있음 display : 화면의 배치 방법 변경 display:inline | block | inline-block; dis.. 더보기 9. 배경 관련 스타일 배경 관련 스타일(background~) background-color : 배경색 지정하고자 할 때 사용 #div-bg { background-color: white; padding: 20px; border: 30px solid blue; width: 50%; /*테두리 빼고 컨텐츠만*/ } Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi dicta adipisci omnis, repellat earum illo non accusantium voluptate tempore sit, eligendi, corporis officia corrupti illum nobis ab ex excepturi laudantium? backgroud-clip.. 더보기 8. 테두리 관련 스타일 테두리 관련 스타일(border~) 선택자 { * 테두리 스타일 border[-위치]-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset * 테두리 두께 border[-위치]-width : 테두리두께; * 박스에 그림자 효과 box-shadow : x(가로거리) y(세로거리) 흐림정도 번짐정도 색상; * 테두리 색상 border[-위치]-color : 테두리색상; * 테두리 두께, 스타일, 색상을 한 큐에 지정 border[-위치] : 두께 스타일 [색상] * 테두리 모서리를 둥그스럼하게 border[-상하위치, 좌우위치]-radius : 숫자; } #test1{ border-style: dotted; bord.. 더보기 7. 영역 관련 스타일 요소 영역 == content(내용물) + padding(여백) + border(테두리) padding 내용물 영역(content)과 테두리 영역(border) 사이의 거리(여백)를 조절하는 스타일 속성 "컨텐츠영역" "컨텐츠영역" "컨텐츠영역" #test1 { padding: 100px; } #test2 { padding-top: 100px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px; } #test3 { /* 위에서부터 시계 방향으로 돌아감 */ padding: 100px 20px 30px 10px; /* 위아래, 좌우 */ padding: 50px 30px; } margin 타 요소들 간의 간격을 조정할 때 사용 "컨텐츠영역" "컨.. 더보기 6. 목록 관련 스타일 목록 관련 스타일(list~) list-style-type : 불릿기호를 변경시켜줄 때 사용 list-style-image : 불릿기호를 이미지로 적용할 때 사용 list-style-position : 불릿기호의 위치를 조정할 때 사용 순서 없는 목록(ul) list-style-type : disc | circle | square | none(제일중요); list-style-image : url(적용시키고자 하는 이미지의 경로); list-style-position : inside | outside(기본값) #ul1{ list-style-type: disc; list-style-type: circle; list-style-type: square; /* 이걸 제일 많이 씀 nav바에, 여기서 얘만 기억함 .. 더보기 5. 텍스트 관련 스타일 color : 색을 입힐 때 사용 color | RGBA | HSLA Hello World This is America This is Korea Red paragraph text Red Light green 네이버 text- decoration : 텍스트에 줄을 긋거나 없앨때 사용 text-transform : text-decoration-line | text-decoration-style | text-decoration-color .spelling-error { text-decoration: line-through; text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } This is some .. 더보기 4. 글꼴 관련 스타일 구글 웹 폰트사이트에서 외부 폰트를 가져와 사용할 수 있다 글꼴 관련 스타일 속성(font~) font-family : 글꼴을 지정할 때 사용 선택자 {font-family:글꼴명;} 글꼴 테스트1 글꼴 테스트2 글꼴 테스트3 외부 웹 폰트 사용하는 방법 웹 폰트 제공 사이트 : 구글 웹 폰트사이트 글꼴테스트 Font Style Test font-size : 글꼴의 크기를 변경할 때 사용 선택자{font-size : 크기(px | em(배수) | %);} 고정크기 px테스트 가변크기 em테스트 가변크기 %테스트 font-weight : 글꼴의 굵기를 표현할 때 사용 font-weight : 글꼴의 굵기를 표현할 때 사용 선택자 { font-weight : normal | bold | bolder | li.. 더보기 이전 1 2 다음
