반응형 IT/Web105 CSS3 - CSS 글자 관련 속성 font, text 글자 속성 글꼴 및 폰트 사이즈 관련 속성 font-family: 글꼴 font-size: 크기 font-style: 스타일(italic / normal ... ) font-weight: bold 유무 Nye 우진아빠 IT 세상 Nye 우진아빠 IT 세상 Nye 우진아빠 IT 세상 Nye 우진아빠 IT 세상 font-family : 글꼴 선택 PC마다 글꼴 설치 유무가 다르기 때문에 ① 글꼴이 없으면 ②, ② 글꼴이 없으면 ③ // 이렇게 순차적으로 적용된다. font-style: italic | normal | oblique 스타일 적용 font-size: 크기 (em, px, %) font-weight: 굵기 line-height: 행 간격 or 세로 정렬(height 값과 동일하게 적용하면 세로 가.. IT/Web 2019. 7. 11. 더보기 ›› CSS3 - CSS box-sizing, border, background-image 속성 box-sizing border를 안쪽으로 적용할 것이냐 바깥쪽으로 적용할 것이냐 (default는 바깥쪽) 안쪽 box-sizing: border-box; 바깥쪽 box-sizing: content-box; 200*200 200*200 200*200 border 속성 border의 스타일을 적용 border-width: 크기 border-style: 모양 border-color: 색 border-radius: 둥글게 둥글게 border-top / bottom / left / right : 방향 backgound-image background-size: 크기 backgound-repeat: 반복 backgound-attachment: 스크롤 여부 backgound-size:50% 설정 시 길이 기준으로 .. IT/Web 2019. 7. 11. 더보기 ›› CSS3 - CSS margin padding 속성 margin 과 padding 속성 margin (여백) 사용법 margin: 위 오른쪽(생략가능) 아래(생략가능) 왼쪽(생략가능); 생략하면 해당 위치의 대칭된 곳의 값을 가져와 적용 (아래 생략 -> 위 값 적용, 왼쪽 생략 -> 오른쪽 값 적용) 하나만 적용되었다면 적용된 값을 모두 적용 ex1) margin: 10px 20px 30px 40px; 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px 만큼 여백을 둔다 ex2) margin: 10px 20px 30px; 위: 10px 오른쪽: 20px 아래: 30px // 왼쪽: (값 생략) 오른쪽의 20px 를 가져와 적용한다 즉, 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 20px ex3) margin: 0 auto; 위: 0.. IT/Web 2019. 7. 10. 더보기 ›› CSS3 - CSS 단위와 url, display, visibility, opacity 속성 단위 em, px, % em은 배수, px는 픽셀, %는 100%를 기준으로 설정 font-size 를 통해 변경한다. (간단한 것이라 예제는 생략) url() 배경화면 설정하기 url 속성은 일반적으로 background-img 속성 값으로 많이 사용된다. 배경 이미지의 경로를 나타낸다. Nye 우진아빠 backgroud-imge:url(' ... '); 로 배경 이미지 지정 backgroud-repeat:no-repeat; 로 이미지 반복 해제 // 선언하지 않을 경우 아래 사진과 같이 height 만큼 이미지가 반복적으로 나온다 backgound-size: contain; 으로 너비와 높이가 내용 안쪽에 알맞은 방식으로 이미지를 가장 크게 조절한다. backgound-* 에 대한 내용은 나중에 더 .. IT/Web 2019. 7. 10. 더보기 ›› CSS3 - CSS 문자, 링크, 부정 선택자 문자 선택자 특정 문자 또는 문자열을 선택하여 CSS 속성을 설정할 수 있다 selection 속성은 마우스 드래그 선택이다 설립개요 우진아빠의 블로그 2019 07월 9일 HTML5 2019 07월 10일 CSS3 #history2:first-letter, #history1:first-letter { ... }는 id history2, history 1의 첫 번째 문자를 선택(em은 배수) #history2:first-line, #history1:first-line { ... }는 id history2, history 1의 첫 번째 주를 선택 #content p::selection { ... } 는 id content 의 모든 p 태그에서 selection 즉 마우스 드래그 처리되면 선택 링크 선택자 .. IT/Web 2019. 7. 10. 더보기 ›› 반응형 이전 1 ··· 16 17 18 19 20 21 다음
