Programming (40) 썸네일형 리스트형 css3 / 위치속성 - 상하좌우, position: absolute, relative, height, z-index, overflow Hello (부모) Ut adipisicing exercitation quis sit laboris et laborum sit nisi irure ad proident. Reprehenderit et et incididunt officia. Ipsum laborum cillum veniam elit id nisi ullamco cupidatat sunt irure. Esse pariatur tempor excepteur pariatur dolore. Reprehenderit anim est aliquip est consequat officia officia minim irure irure deserunt nostrud eiusmod. Excepteur sunt tempor occaecat consecte.. css3 / font 속성 Hello Worlda> Ad labore anim minim do pariatur mollit voluptate. Commodo do qui quis duis ullamco ea dolore tempor labore deserunt nulla sit. Incididunt ex incididunt quis dolore ad officia magna irure. Lorem nisi pariatur sunt laborum ex esse id minim veniam minim amet consequat. Sint dolore incididunt exercitation Lorem Lorem voluptate excepteur. Adipisicing consequat quis et eu. Veniam occaec.. css3 / 배경background 속성 Document body { background-image: url(img.jpg); /*외부파일의 경로를 css로 지정할 때 url 함수 사용 */ background-size: contain; /*너비, 높이. "크기단위"의 값을 입력해주거나 "cover" "contain" 등의 키워드 100% 또는 cover 입력하면 '너비'를 꽉채우게 됨. (반복됨) contain은 body내부에 있는 요소에 높이가 맞춰지게 됨. (반복됨) 이전에 body태그 내부에 뭔가가 있어야함.(높이 지정) = 이미지의 높이가 정확하게 내용물(h1)과 일치.(contain은 잘 안쓰임) 반복이 가능한 패턴을 가진 배경을 사용할 때 background-size 속성과 함께 많이 사용.*/ background-repeat: n.. CSS3 / border 속성 1. border 속성 (3개) - border-width 속성 - border-style 속성 - border-color 속성 2. border-radius 속성 .box { width: 100px; height: 100px; margin: 50px; border-width: 10px; /*테두리의 너비 나타냄. 선의 두께*/ border-style: solid; /*테두리에 어떤 스타일을 적용할 것인지 나타냄.*/ border-color: red; /*테두리에 어떤 색을 지정할 것인가*/ /* 위에 3개를 아래처럼 boder 한 줄에 한꺼번에 다 쓸 수 있음*/ border: 10px(너비) solid(스타일) red(컬러); /*margin과 다르게 각각 한개의 속성값만 입력가능. margin : .. CSS3 / 박스box 속성 - margin, padding, box-sizing 1. 박스 속성 기본 - width height margin padding 2. 배경의 적용 범위 3. 실질적인 너비와 높이 구하기 4. box-sizing 속성 Duism commodo enim Lorem do fugiat. Voluptate velit aute Lorem cillum quis magna consectetur cillum ex aute. Culpa in minim incididunt laborum culpa magna. Culpa est ex irure exercitation est dolore sint irure ipsum occaecat exercitation. Nisi quis amet ad do amet non ex. Veniam voluptatat culpa. Exercitat.. CSS3 / 가시속성 - display 속성 가시속성 : 눈에 보이는 방식을 지정하는 속성 1. display 속성 - none 또는 block 또는 inline 또는 inline-block형태 지정 2. visibility 속성 - 대상을 보이거나 보이지 않게 지정하는 스타일 속성. - collapse : table태그를 보이지 않게 한다. 익스플로러와 파이어폭스에서만 작동. - visible : 태그를 보이게 - hidden : 태그 안보이게. 화면에서 보이지 않을 뿐(공간O) VS display:none은 태그가 아예 화면에서 제거된다.(공간X) Hello Hello Hello Hello Hello World World World World World alpha Hello World Hello World Hello World Hello Hel.. CSS3_2/ 스타일속성의 단위 - 키워드, 크기, 색상, URL 스타일값에 넣을 수 있는 단위 : 1. 키워드 단위 입력하는 것 = 글자를 입력하는 것. 예) {스타일속성: none } 2. 크기 단위 - % : 크기를 % 단위로 지정하는 것.(상대적) 기본 설정된 크기에서 상대적 크기를 지정. - em/rem : 크기를 배수단위로 지정.(상대적) - px : 절대적인 크기를 지정하는 단위 - mm, cm, inch 1em=100% 1.5em=150% 폰트 크기를 지정할 때는 크기 단위를 섞어서 사용하는 경우가 많다. 전체 폰트 크기에 절대 크기를 지정하고 각각의 태그에 상대 크기를 지정하는 방법을 매우 많이 사용한다. 크기 단위 0을 입력할 땐 단위 생략 가능. 3. 색상 단위 4. URL 단위 - css3에서 이미지 파일이나 폰트 파일을 불러올 때 사용하는 단위인.. CSS3_1/ 선택자 CSS를 사용하는 방법 1.외부파일로 만들어서 작성하는 방법 Hello World -태그선택자 : 특정한 태그를 선택할때 쓰는 태그선택자. 태그의 이름을 넣어주면된다. 쉼표로 여러개 지정가능. Nulla esse occaecat minim sunt id velit magna reprehenderit non non occaecat. Id sit minim veniam mollit sunt irure ea nulla. Ad laborum tempor adipisicing cupidatat. Ex exercitation do sunt voluptate. Eu mollit minim deserunt et eiusmod. Elit cupidatat est nulla exercitation sit amet eu u.. 이전 1 2 3 4 5 다음
