쭈루랩

DOCTYPE html> 속성 선택자 /* 특정 속성이 있는 요소를 선택하는 [속성] 선택자 - 대괄호([])사이에 원하는 속성을 입력 */ a[href] { background: yellow; border: 1px solid #ccc; font-weight: normal; } /* 특정 속성값이 있는 요소를 선택하는 [속성=속성값] 선택자 - 주어진 속성과 속성값이 일치하는 요소를 찾아 선택 */ a[target=_blank] { padding-right: 30px; background: url('images/newwindow.png') no-repeat center right; } 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 DOCTYPE html> 속성 선택자 ul { list-style-ty..

DOCTYPE html> 박스 모델 너비, 높이 지정 .box1 { width: 400px; height: 100px; border: 1px solid black; margin-bottom: 100px; } .box2 { width: 50%; height: 100px; border: 1px solid red; } DOCTYPE html> 둥근 테투리 #container { width: 700px; margin: 20px auto; } .br1 { padding: 30px; border-style: solid; border-width: thick; border-color: green; border-radius: 30px; } #circle { border-radius: 50%; } 둥근 테두리 스타일 예제..

DOCTYPE html> CSS float 속성 /* float 속성값 left - 해당 요소를 문서 왼쪽에 배치 right - 해당 요소를 문서 오른쪽에 배치 none - 좌우 어느쪽에도 배치하지 않음. 기본값 */ #tree { float: left; margin-right: 40px; } Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua labo..

DOCTYPE html> 배치 방법 /* display 속성 - 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능 display 속성값 block - 인라인 레벨 요소를 블록 레벨 요소로 만듬 inline - 블록 레벨 요소를 인라인 레벨 요소로 만듬 inline-block - 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있고, 마진과 패딩을 지정할 수 있음 none - 해당 요소를 화면에 표시하지 않음 */ nav ul { list-style: none; } nav ul li { display: inline-block; padding: 20px; margin: 0 20px; border: 1px solid #222; } menu 1 menu 2 menu 3 menu 4

DOCTYPE html> 웹 요소의 위치 지정 /* position 속성 - 텍스트나 이미지 요소를 원하는 위치에 배치 position 속성값 static - 문서의 흐름에 맞춰 배치 relative - 위치값을 지정할 수 있다는 점을 제외하면 static과 동일 absolute - relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치 fixed - 브라우저 창을 기준으로 위치를 지정해 배치 */ p { width: 500px; height: 300px; border: 1px solid silver; background-color: #eee; line-height: 2; } #static { position: static; } #relative-1 { position: relative; }..

DOCTYPE html> 패딩 마진 p { background-color: yellow; color: red; font-weight: bold; font-size: 16pt; } p.pad { color: purple; padding: 20px; } p.mar { color: green; margin: 30px; } p.mp { color: blue; padding: 5%; margin: 5%; } 박스의 안쪽 여백과 바깥쪽 여백 지정 (1) 안쪽 여백 지정 - padding 20px (2) 바깥쪽 여백 지정 - margin 30px (3) 안쪽, 바깥쪽 여백 지정 - padding 5%, margin 5% DOCTYPE html> 패딩 마진 여백 네 방향 지정 body { background-color..

DOCTYPE html> 목록 스타일 .book1 { list-style-type: none; list-style-image: url(images/dot.png); } .book2 { list-style-type: upper-alpha; list-style-position: inside; } 도서 시리즈 Do it! 시리즈 첫 코딩 시리즈 된다 시리즈 Do it! 시리즈 첫 코딩 시리즈 된다 시리즈

DOCTYPE html> 텍스트 스타일 /* 텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성 none - 줄표시 없음 underline - 밑줄 overline - 윗줄 line-through - 취소선 */ /* 텍스트의 대소 문자를 변환하는 text-transform 속성 - 한글에는 영향을 미치지 않고 영문자에만 적용 none - 변환하지 않음 capitalize - 첫번째 글자를 대문자로 변환 uppercase - 모든 글자를 대문자로 변환 lowercase - 모든 글자를 소문자로 변환 full-width - 가능한 한 모든 문자를 전각 문자(가로 세로 비율이 같은 글자)로 변환 */ .trans1{ text-transform: capitalize; } .trans2{ te..

DOCTYPE html> 글꼴 관련 스타일 /* 글자 색을 지정하는 color 속성 기본형 color: 색상값은 16진수, rgb (또는 rgba), hsl (또는 hsla), 색상 이름 16진수 - #RRGGBB RR - 빨간색 / GG - 초록색 / BB - 파란색 ex) #ffff00 rgb - red, green, blue ex) rgb(0, 0, 255) rgba - alpha(불투명도) 추가 ex) rgba(0, 0, 255, 0.5) hsl - hue(색상), saturation(채도), lightness(명도)의 줄임말 ex) hsl(0, 100%, 50%) hsla - alpha(불투명도) 추가 ex) hsla(0, 100%, 50%, 0.5) */ body { color: #f41800..

DOCTYPE html> 글꼴 관련 스타일 /* 글꼴을 지정하는 font-family 속성 기본형 - font-family: | , */ body { font-family: "맑은 고딕", 돋움, 굴림; } /* 글자 크기를 지정하는 font-size 속성 기본형 - font-size: | | | 절대 크기 - 브라우저에서 지정한 글자 크기 상대 크기 - 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정 크기 - 브라우저와 상관없이 글자 크기를 직접 지정 백분율 - 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시 키워드를 사용하여 글자 크기 지정 - xx-small < x-small < small < medium < large < x-large < xx-large 단위를 사용하여 글자 크..